Styles and templates
In order to maintain consistency across the site, there are a few styles and templates that can be applied to create a look for a section of the website. This section will outline what they are and how to apply them.
Styles
Most of the styles on the website are there by default. When you paste in text and set it to be a paragraph or a heading these will automatically be applied. If the text doesn't look as expected, you should check that you are pasting in content using the 'clipboard' icon, which strips out any unwanted formatting.
In addition to the default styles there are some styles that can be applied to a row or a module to change how it looks. The way these styles are applied is by adding the name of the style to the 'Class' field in the advanced settings tab of the row or module. Here is a list of the style names:
Coloured rows
red_background dark-red_background grey_background
Adds a red, dark red or grey background to the row and styles any buttons or text colours accordingly
Coloured columns
red_column dark-red_column grey_column
Adds a red, dark red or grey background to the column and styles any buttons or text colours accordingly
Row arrows
red_arrow-top dark-red_arrow-top grey_arrow-top
Adds a red, dark red or grey arrow shape to the top of the row. This helps link the row content to the preceding row.
red_arrow-bottom dark-red_arrow-bottom grey_arrow-bottom
Adds a red, dark red or grey arrow shape to the bottom of the row. This helps link the row content to the following row.
Bulleted list styles
line-bullets
Turns standard bullet points into a vertical line to the left of the bullet point.
Button styles
inline-buttons inline-buttons_left inline-buttons_right
Allows a group of buttons to align next to each other rather than one below the other. By default the buttons will be centre aligned.
btn_dark-red btn_black
Changes the colours of the buttons to dark red or black. By default buttons are red, or white if they are on a red background.
Title styles
small-title
This makes titles small and uniform rather than observing the usual sizing of h1 being larger than h2, which is larger than h3 etc. It can be useful to apply this style when a title is long, so a large title would be overwhelming.
black-title red-title white-title
The colours of the title should, for the most part be automatically determined by the default styles of the background colours. Should there be a need to over-ride these styles the title colour can be set using these classes.
banner-headings
This makes the title white on a rounded red background.
Callout syles
The following classes will style up the callout module. For the default style use the following class:
default_callout
To make callouts the same heights across multiple columns the column settings should be changed within the page builder to set the 'equalize column heights' field to yes. The following class should then be applied to the row:
equal-height_columns
To change the colours of the callouts you can uses these classes. The first colour defines the border colour, the second colour defines the background colour.
callout_white_black callout_white_red callout_red_white callout_red_black
These variations that follow the same format as above but include 'small-title' have a smaller heading title size.
callout_white_black_small-title callout_white_red_small-title callout_red_white_small-title callout_red_black_small-title
Other styles
handwritten-text
This makes the text use the 'chewy' handwritten font. Using bold or strong text will change the colour to red.
rotate_clockwise rotate_counter-clockwise
Will rotate a heading or image slightly clockwise or counter-clockwise
Note:
In the page settings there is a field called 'Body class'. Adding classes to this field will add them onto the body tag of the page. Currently the main use for this is to set whether a page has a dark red arrow at the bottom of the page intro box. On pages where the right hand column of the page doesn't lead on directly from the page intro, the following class should be used to remove the arrow:
no_title_arrow
Templates, saved rows and modules
You can save your own rows, modules or complete pages as templates to re-use elsewhere on the site. When you are in the row or module you can click the 'Save as' button choose a name and save the item. It will now appear in the page builder (plus icon in the top right corner) under Modules > Saved modules, Rows > Saved rows or Templates.
To save a complete page or post, whilst in the page builder, click the dropdown in the top left corner and choose Save template
Saved rows can also be used to populate the content of some other modules (eg. the 'Advanced tabs' module can show a different 'saved row' in each tab). There are some existing saved rows on the site that have the word "TAB" in them, which are used in this way - so please don't delete them!
In building the site we have created a number of saved modules, rows and templates. Here is a quick overview.
Saved template
News story - example
This template will give you a starting point for a new new story. When you create a new news story and click into the page builder select this template from the 'plus' menu > templates. You can then replace the content, add or delete layouts as required.
Saved row
Case study - two photos
This saved row gives you a two column layout for a case study with two photos.
Saved row
Callout boxes 3
This saved row gives you a row of 3 callout boxes. The callout box styles above can be used to change how they look.
Saved row
Callout boxes 2
This saved row gives you a row of 2 callout boxes that are spaced to sit centrally. The callout box styles above can be used to change how they look.
Saved row
Corporate FOW - Prompt Amounts
This saved row gives you a 3 column row with banner headings, line bullet descriptions and CTA buttons for each column, which has been used for the Corporate Friends of Wag. The background colour class can be used to change it to a red, grey or white (default) section.
Saved row
Cost banner button
This saved row displays the cost banner, which is often used at the top of the page.
Note: The cost banner is contains a text module and a button module. They are both saved as 'global' saved modules. This means that updating them in one place will update them throughout the site.
Saved row
Cost banner button - with intro
Sometimes the Cost banner button is used with some intro text in the right hand column. This saved row makes it easy to achieve that layout.
Saved row
FAQs accordion (Saved row)
This displays the accordion module used for Frequently Asked Questions.
Saved row
Friends of Wag prompt amounts
Displays the 3 prompt boxes for a Friends of Wag regular gift.
Note: This saved row should always be used in combination with the Friends of Wag - donation metadata saved row, which must also be on the page. This saved row holds the data that is used for the prompt amount boxes.
Saved row
Full width - banner - image left
This is a row that has an image to the left with no white space between the image and the edges of the row. It can be used as a promo / call to action banner.
The colour of the banner can be changed (eg. to red with white text) using the background colour classes.
Saved row
Full width - banner - image right
This is a row that has an image to the right with no white space between the image and the edges of the row. It can be used as a promo / call to action banner.
The colour of the banner can be changed (eg. to red with white text) using the background colour classes.
Global row
Join us - Friends of Wag
This saved row has some text about the importance of supporting the Friends of Wag programme and a call to action button to support.
This is a global row, so changes to the text will be reflected wherever the saved row is used.
Saved row
Meet one of our Friends
This is the row we have used for highlighting the story of a Friend of Wag. It would be used for other similar content too.
Saved row
Meet one of our volunteers
This is the row we have used for highlighting the story of a volunteer. It would be used for other similar content too.
Saved row
Single column - centred
When text is used in a single column, using the full width of the screen can make the line length quite long. This reduces the readability of the text, especially for longer block of text. In most cases, if a single column of text with no images is used, this saved row can be used to reduce the width of the section.
Saved row
Title - arrow box
This row can be used as a title for a section. The arrow at the bottom helps to link the title to the content that comes after it.
The arrow class used on this row can be changed to put the arrow at the top of the box (see arrow classes above). This will helpo link this section to the preceding content.
Note: When this saved row is used at the top of the page content, the body class 'no_title_arrow' should be applied to the page (see note in styles section) so that this row sits flush with the header of the site.
Global row
Support strip
This strip can be used to promote supporting Wag.
It is a global row, so updating it in one place will update it wherever it is used.
Saved row
Text left and video row
This row has a text block to the left and a video to the right. The video thumbnail is set as a background image on the column, a 'play' icon button contains the link to the video, which is set to display in a popup window. There is also a regular button that can link to a case study.
Saved row
Volunteering menu
This saved row displays the menu that is used on the volunteering pages.
Global module
Social icons
This module will include the Wag social media link icons.
This is a global module, so updating it in one place will change it wherever it's used.
Saved module
Vimeo video
This saved module will include a Vimeo video.
Theme setup
Technical details of how the website theme is set up (to help with future updates and management).
Child theme
The Wag theme for the website is set up as a child theme. The parent theme is required, as it provides the starter theme for Beaver Builder that gives the basic functionality and styles for the built-in Beaver Builder modules.
The child theme inherits from this parent theme and layers the Wag styling and scripts on top.
The styling is set in two places. The parent theme gives a default setup for text colours and some other very basic settings, which are set in the 'Customize' section of the WordPress admin area. The CSS that is applied to the site comes from the styles.css file in the child bb-theme-child folder.
Working with CSS
This CSS for the website styles is compiles from the SASS files that are in the sass folder of the bb-theme-child theme.
The styles.css file in the cild theme should not be edited directly!
Rather, the SASS in the sass folder should be edited and then compiled to create a new CSS file. Adding to the styles.css file directly is likely to result in your code being deleted the next time the SASS is compiled.
Sitewide Javascript
The javascript in the site is either help within specific plugins to do specialist jobs. (Eg. Donorfy integration) or is held in the bb-theme-child/js/boldlight-scripts.js file. This script controls any custom javascript that is applied generally across the site as well as javascript that is used for controlling the donation prompt value selection for Friends of Wag and donate pages.
Conditional logic in modules
Some Page Builder modules have been included using 'conditional logic'. This means that they only display on certain pages. This is how the logo for 'Friends of Wag' is included - It only displays when on a FoW page, otherwise the regular logo displays. This conditional logic is set in the 'advanced' tab of the row or module. The module or row then shows a red 'eye' icon when in edit mode in the page builder to say that it's conditionally displayed.
Nebula Labs forms
Forms from Nebula Labs, for volunteer sign up, carehome visits and home visits (and the impact map) have been included using Beaver Themer 'parts' that conditionally include the relevant JS and CSS code at the start or end of the page. The forms themselves have been included in the page body using standard HTML modules.