Solid Color Buttons

• “button-template” (inherits template color)
• “button-red”
• “button-yellow”
• “button-blue”
• “button-grey”

Other Styles

• “w-100”
• “fw-regular”
• “fw-bold”
• “fw-semi-bold”

Directions

Inside the Bakery Builder you can find all of the theme color options using the color picker. This is found under the Design Options tab.

Step 1

Inside the Bakery Builder you can select the accordion module.

Step 2

Select the following styles to best match the Cicero theme.

Color: Cicero Red, Cicero Yellow, Cicero Blue,

Style: Flat

Shape: Square

Gap: 1px

Icon: Chevron

Roboto

Class: family-roboto

This text is appearing as Roboto. Roboto is the font intended for paragraph text throughout the site.

Barlow

Class: family-barlow

This text is appearing as Barlow. Barlow is the font used in the headings, lists, links, and buttons.

Merriweather

Class: family-merriweather

This text is appearing as merriweather. Merriweather is occasionally used as an italic secondary font.

A line element can be added to any size of heading by selecting the “Cicero Lined Heading” option in the page builder.

Paragraph

Paragraph Text should normally be a simple block of text which you can create from the pagebuilder ‘Paragraph’ option in the editor (normal text).  The default for the Cicero theme is 16px font size, roboto font family, and a grey text color.  You can add classes to ‘extra class name’ in the editor for various effects.  Classes available are listed to the right.

Typically, adding extra classes should be used sparingly.  The normal paragraph text works best for most all cases within the theme.

Classes

Typically you should be able to change these styles directly in the page builder… but if a special case should arise (editing a plugin), these will work.

• “text-red”
• “text-yellow”
• “text-blue”
• “text-grey”
• “text-white”
• “text-black”
• “text-italic”
• “text-underline”
• “text-center”
• “text-right”
• “fw-bold”
• “fw-semi-bold”
• “fw-regular”

Bullet List

• Create this from WPBuilder
• By selecting the bullet icon in the editor
• By default the text appears like this
• You can add the text classes above
• Default font-size: 16px
• Font-family: barlow
• font-color: grey

Numbered List

1. Create this from WPBuilder
2. By selecting the numbered icon in the editor
3. By default the text appears like this
4. You can add the text classes above
5. Default font-size: 16px
6. Font-family: barlow
7. font-color: grey
8. Shows leading 0.

Directions

You can create a Cicero-styled video easily by selecting the icon in WPBakery.  These can be placed within a column within content or full width.

The view in-page view is simply an image with a hover-state.  You will need to provide an image, possibly by taking a screenshot of the location that you like best from the given video.  You can select that image from the media library.

Next you will want to place the embed code provided by youtube or other services.  It it better if the video will auto-play inside the modal and you can make sure the auto-play perimeter is in the embed link. (Youtube will add this by default).

When clicked, the image will open a responsive modal with the video player.

Video in column.  1×1.

Full Length Video 16×9