Using the brand colours (rather than fixed colours) and considering how your site appears on different device will make a big difference to user interaction with your site.  The following guidance will help you to make your site much more attractive to users, with very little effort.  The features on this page do require your site to have been upgraded with the April 2019 brand changes.

---

Create a responsive grid (or table)

A responsive grid is a tidy way of allowing content in 'tiles' (a table) to flow better and be more readable on different size viewports, such as a desktop PC, a tablet and a smart phone.  To make a layout responsive, the <table> HTML construct needs to be replaced with nested <div> structures.

Add the following, which will create a grid (table) that will have three columns on a desktop, reduce to two columns and one column as the viewport width decreases:

<div class="camra-responsive-grid">
<div>... </div>
<div>... </div>
<div>... </div>
<div>... </div>
<div>... </div>
<div>... </div>
</div>

Replace the ... with the content you want to appear in each tile.  Note that a row will be the height of the tallest tile, so try to place similar height tiles together.

---

CSS rules for content colouring

CSS Style classes have been made available to allow foreground, background and border colours to follow the site's chosen colour palette, this avoids the need to specify explict colours, which would not follow a change in the colour scheme.

Instead of using fixed colours in styles...

<thing style="color: red; border: red"> ... </thing>

Use CSS class selectors...

<p class="camra-primary-foreground camra-tint-20-background">Example colour palette consistent styling!</p>

Examle colour palette consistent styling!

The following rules (style classes) are available that will apply the current brand colour (or a tint):

• camra-primary-foreground
• camra-primary-background
• camra-primary-border
• camra-tint-80-foreground
• camra-tint-80-background
• camra-tint-80-border
• camra-tint-40-foreground
• camra-tint-40-background
• camra-tint-40-border
• camra-tint-20-foreground
• camra-tint-20-background
• camra-tint-20-border

---

Site specific customisation

The following 'local' CSS customisation can be use used to completely reformat some of Beer Engine's 'standard' pages (list output). See the examples provided.

The following CSS should be inserted in the advanced section of the appearance configuration page (only available to specific users). Note that much of what was documented here has since been incorporated into the core product and guidance to its use added to the content tags page.

DIARY page layout customisation (Mk4)

see https://www.halton.camra.org.uk/diary

The flowing formats can be 'invoked' by specifying event-diary as the STYLE parameter in the [[list]] directive. Scroll down the example page to see the two different formats.

Mk4: Displays a synopsis (first 3 HTML blocks) with an improved "there's more" indicator.

Notes:

1. The list output MUST include WHEN
2. This style also works well on NEWS lists

[[list: title=Branch events, type=event, category=BranchMeeting, category=BranchSocial, 
category=BranchBeerFestival, display=when(after_rel=-0 week)+,  display=location.locality, 
display=body, style=event-diary]]

/* event-diary customisation Mk4 */
li.event-diary {position : relative; margin-top: 1.5em; margin-bottom: 3em;}
li.event-diary a.title {position : relative; top : 3em; left : 25px; font-size : 130%; color : var(--camra-primary-or-black); font-weight: bold; text-decoration:none; display: -webkit-flex; display: flex;}
li.event-diary span.when {position : relative ; top : -2.5em; left : 0px; margin-left : 0px; background : var(--camra-tint-40); color : black; padding : 1em; font-weight : bold;}
li.event-diary span.location {position : relative ; top : 2em; margin-left : 25px !important;}
li.event-diary span.locality {position : relative; top : 0px; margin-left:0px !important;}
li.event-diary span.teaser {position: relative; left: 40px; top: 2em; max-width: 90%;}
li.event-diary span.teaser::after {content: " … there's more … click the title"; color: gray; font-size: 70%; font-weight: 100;}

li.event-diary div.body {position : relative; left : 40px; top:2em; max-width : 90%; overflow: hidden;}
li.event-diary div.body > * {display: none;}
li.event-diary div.body > :first-child {display: inherit; margin-top: 0px;}
li.event-diary div.body > :nth-child(1) {display: inherit;}
li.event-diary div.body > :nth-child(2) {display: inherit;}
li.event-diary div.body > :nth-child(3) {display: inherit; max-height: 1.2em; }
li.event-diary div.body > :nth-child(3)::before {content: " … there's more … click the title"; display: block; color: grey; font-size: 70%; font-weight: 100;}