You have a fair degree of control from within Athenaeum over the appearance of the Athenaeum search web site.

You can control components such as:

  • the width of the site: fixed or full browser width

  • the number of columns on the home page and search results page

  • a banner that is displayed across the top, along with its positioning and size

  • the background colour of the navigation bar

  • the colour of the text in the navigation bar

  • an optional “big message” to display between the header and the blog entries on the home page

  • the background colours of the home page and search results links

  • the border colour of the home page and search results links

  • the colours of the links (anchors)

  • “styling” of almost all elements on the page via a free-form css definition

Four examples of just a few different settings with (mostly) the same content are shown here. The differences are in the banner image/colour, the colour of the navigation bar, the text colour and the background colours of each entry.

4 different views on roughly the same data
4 different views on roughly the same data

differences in the data are because of the carousel(s) on the web pages, which change every 10 seconds


Athenaeum is provided with default configurations, so you don’t have to do any styling. If you have a support agreement with Athenaeum Library Software, then we can provide you some direction in customising your look and feel.

Colours are specified in hexadecimal, e.g. #000000 is black, #FFFFFF is white and #0000FF is blue. Each pair of hexadecimal numbers is, in turn, the amount of Red, Green and Blue.

While this sounds unintuitive, there are lots of web sites that will allow you to choose from co-ordinated palettes of colours that make specifying colours much easier.

For example, this Google page shows various hues in hexadecimal: This page is an example of users contributing thousands of colour themes

Open Styles page

To customise your blog look and feel, click the {…}Styles button at the top of the blog page:

Navigate to theme/styles at the top of the blog page
Navigate to theme/styles at the top of the blog page

You can also simply click the Blog Styles tab in admin.

Available settings

We provide you with starter settings. However, if you have a geek handy, you can supply her/him with this list.

the name of each style option must appear exactly as shown here

Styling options
name description options
site_width the width of the web page in the web browser window container (fixed width) or container-fluid (full window width)
column_count number of columns for blog and search results - entries start at the top left, go down first column, then top second column, etc. any number, typically you will use 2, 3 or 4
banner style information (css) describing the content of the banner - use valid css to describe the properties e.g. background-position: center; height: 150px; background-image: url(–150.jpg); background-size: cover; background-repeat: no-repeat; css
text_colour the colour of text on the body of each web page hexadecimal number e.g. #31708f or #000
border_colour the colour of the border around each blog entry and search result hex number
background colour colour of the background of the web page hex number
nav_background_colour the colour of the background behind the navigation links hex number
navbar_colour colour of text in the navigation bar (should contrast with nav_background_colour) navbar-light or navbar-dark are typical options
link_colour colour of clickable hypertext links hex number
btn_class name of the Bootstrap button style btn-light, btn-dark are the most obvious choices, though you may also use btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info
style raw css allowing you to customise the look, size and positioning of virtually any component on the web page (including the “big_message”) css
big_message message text that is inserted between the navigation bar and the blog columns on the web site home page - use this for occasional announcements such as “library closed” or “book fair” (and you can style this with CSS using the .big_message h1 {} selector text

Your styling choices might depend upon the type of devices your patrons typically use. For example, you might be tempted to set the number of columns to 5 to suit the big screens you might have in the library, however if your library patrons are using low cost mobile devices, then these might dictate fewer columns for legibility.