CSS for Pier

Examples of interesting design choices that one may do in Pier (see also UI Distribution):

  • Move buttons closer together - The default buttons at the top of the standard Pier image are rather far apart (see Home and About above, and on http://www.piercms.com/). These can be moved closer together by altering the margin-right in the below from 1.5em to 0em:

    .menu ul li {
           display: inline;
           margin: 0;
           margin-right: 1.5em;
           list-style-type: none;}

  • Put a border on both sides - The motivation for this is from http://www.lukas-renggli.ch/, working towards this is the CSS:

    body {margin-top: 0; background-image: none; background-color: #999999;}
    div.container {background-color: white;}

    The div.container is from the following in _Environment:


When there are Problems

There are several conditions which can cause Pier to be displayed without the CSS, examples:

  • If the CSS is stored in an embedded file in Pier, like:

    /System/Components/DefaultCss

    then it may not be accessible on the filesystem, this can cause walkbacks for other activities. This situation is common when copying the image, changes, and files between different machines. First check if the CSS is view-able in pier, and check in a Pharo Workspace (this should returned true if accessible):

     (PRPathLookup start: (PRKernel instanceNamed: 'Pier') root path: '/System/Components/DefaultCss') file directory exists.

  • Ensure that under http://localhost:8080/config, the files application does not have WAAuthConfiguration as a parent - if this requires a password, then the CSS for pier would not be public