Intermediate Styling

Color Palettes

Making a Color Palette

To create a Color Palette, go to the Manage Bar and hover over Content > Add Content, and click Color Palette. Alternatively, you can click Content, and then click the Add Content button, and then choose the Color Palette option.

You must give your Color Palette a name. This is the only required field.

The remaining fields allow you to set the values for your page’s Color Primary, and Colors One through Ten. (Eleven color combinations total.) 

Each color is really a set of color values: Background, Foreground (text), Link, Hover (link changes to this color when hovered over), and Focus (element changes to this color when selected). These are all open text fields, into which you will enter a hex color code. (A hex code comprises of a # followed by a combination of six numbers or letters. Google provides a number of references for picking hex values for colors.)

You will also need to choose a Fallback for that color set. This is a dropdown menu, as you only have two options: Light (white background, black text) and Dark (black background, white text.) This is important for accessibility and browser support. Choose whichever is closest to your combination of background and foreground colors.

You are not required to fill all eleven color sets. Fill as many as are relevant to you. 

When you are done, click Save at the bottom of the page. Make sure to keep the Color Palette published so that you can use it.

Using a Color Palette

To use a Color Palette, you will need to add a Color Palette Block to your page. See the Content Fields section on the Layout View: Other Block Types page on how to do this.

Section Level Font Overrides

Generally, you’ll be setting your font choices in your page’s Edit view. However, if you find yourself needing more font options on your page, you can override the Primary and Secondary fonts set for your page at the Section level. This means you could potentially have two different font pairs for every Section on your page, if you wish to be so bold!

To change a Section’s font, open the Section’s Configure settings by clicking on the grey Configure Section link in the Section’s upper left corner. This will open the dark grey Configure Section menu on the right side of the browser. Scroll to the bottom of this menu to Typography. Here you have the same fields that appear for typography in Edit view. You can override the Primary or Secondary font, or both. And you can choose from a webfont or a system font. (Note that unlike in Edit view, the system fonts are chosen from an open text field rather than a dropdown menu. You still can only use fonts hosted on your web server. When typing into these fields, Ziggurat will autosuggest fonts based on what fonts you have loaded.) For more information about how to set a webfont, see the Typography section on the Edit View page.

Finally, you will need to do one more thing for this change to take effect. You will need to add a Custom ID to your Section. Do so by scrolling up in the Configure Section menu and finding the Custom ID open text field (under Attributes in the Extra section). Enter a custom ID into this field. This can be anything, though avoid special characters (except hyphens), and make sure that this ID is unique on this page. Essentially, this field allows you to assign a CSS ID to your Section. In CSS, IDs are special selectors that are only used once on a page, to target a specific entity. (As opposed to classes, which are selectors that can be assigned to multiple entities.)

Make sure to scroll back to the bottom of the menu and click Update.

Bootstrap for Custom Class Fields
 

You can use Bootstrap in the Custom Class fields at either the Section or Block level.

Bootstrap is a CSS framework, particularly good for responsive web design. (CSS stands for Cascading Style Sheets, which is the code language used to style HTML, which is the document markup language used to build websites.) You can think of Bootstrap as a kind of CSS shorthand. In Ziggurat, you can use it to apply certain styles to Blocks and Sections with just a few letters and numbers. It’s not as specific as full-out CSS, but it’s quicker and less complex to write.

The most common applications are controlling spacing (padding and margins) around Blocks and Sections, and, in the case of Blocks, sizing. This can be extremely useful. In the case of Sections, this is really your best option for adding spacing around a Section. For Blocks, you do have the opportunity to add spacing with a Block Style, but you can only do that for all four sides. Bootstrap allows you to be more specific. You can control how much spacing, where the spacing goes, and even apply different spacings for different viewport sizes (referred to as breakpoints).

You can read more about Bootstrap spacing language here, but we’ll cover the basics below. Sizing can only be controlled on a Block level. You can read more about Bootstrap sizing language here, but we’ll cover the basics below. 

Padding & Margins

Both padding and margins are used to add space around elements (in our case, Blocks and Sections,) in CSS. What’s the difference? Sometimes it doesn’t matter. But essentially, padding adds more background color, margins do not. This will make a difference if you have a background color applied to either your section or block.

Once you know the spacing vocabulary, writing Bootstrap is quite easy. You will designate the property you wish to control (Margin or Padding), which sides you want to apply the spacing to, and what amount of spacing you want to add. Each of these is written with either a single letter or a number. Those are listed below. Note that these are pre-assigned values, and not pixel values. (If you want to use precise pixel values, you will need to use CSS. For more about that, see the Advanced Styling page.)

Here is the basic formula: [Property Letter][Side Letter]-[Size Number] You can add as many of these as you want, separated by a space. (Not a comma or semi-colon!)

For example, if I wanted extra large padding on the top and bottom of my block, I'd write that as py-5 .

Property
    margin: m
    padding: p

Sides
    top: t
    bottom: b
    left: l
    right: r
    top and bottom: y
    left and right: x
    all sides: [leave this part blank]

Size
    none: 0
    extra small: 1
    small: 2
    medium: 3
    large: 4
    extra large: 5

Width & Height

You can also use Bootstrap to control the width and height of a Block. This is particularly useful with images. As with Spacing, you will be controlling this with pre-determined numerical values, and not pixel values. If you want precise pixel values for an image width or height, you will need to use inline code. (See the Advanced Styling page.)

Here is the basic formula:  [Property Letter]-[Size Number]

For example, if I want my image block to display at 50% of its original width, I'd write that as w-50 . Note that this 50% is based on how big the image is, as you uploaded it to the Media Library. If you uploaded a very large image, it might already be displaying at 50% in your block. 

Property
    width: w
    height: h

Size
    100%: 100
    75%: 75
    50%: 50
    25%: 25

Be aware that once you shrink the width of your Block, it will move the pencil icon as well. The pencil icon will still be in the  Block’s upper right corner, but now that upper right corner will be moved over 75, 50, or 25% of where it used to be.

One final note. If you shrink your Block down from 100%, it will default left align. Frequently, you will want the Block to be centered, and not left aligned. To fix this, you will add a little bit more code to the Custom Class. Type mx-auto after your width or height. (Make sure you separate the two pieces of code with a space.) For example, if I wanted to center that image block I made 50% width above, I’d write w-50 mx-auto. This piece of code target’s the block’s horizontal margins, and makes sure that they are equal.

You might recall from the Block Styles page, that we were using text-align-center to center images that were aligning left when we didn’t want them to. That will NOT work in this case. Why? Because text-align-center takes the Block’s content, and places it in the center of the Block. But that’s not the problem here. The content is centered within the Block, but the Block itself has shrunk, and needs to be centered within the Section column. That’s why we use mx-auto here, because it targets the spacing outside of the Block.

Breakpoints

This is an incredibly valuable aspect of Bootstrap. In webspeak, breakpoints are what allow you to set different style configurations for different screen sizes. Because what looks great on a big, landscape-oriented desktop screen rarely looks great on a small, portrait-oriented mobile screen. This is particularly the case with spacing. For example, you might need a bunch of padding for desktop, but you just don’t have room for that on mobile. With breakpoints, you can tell the computer that for big screens, set this amount of padding, and for small screens, set a different amount. Best of both worlds!

As with the Bootstrap we’ve discussed above, you won’t be able to target specific, custom pixel values for your breakpoints. To do that, you will need to use CSS, which is covered on the Advanced Styles page.

If you want to use breakpoints in your Bootstrap spacing, you will add a little extra code to the spacing code we’ve already covered. 

Here is the basic formula for spacing with breakpoints: [Property Letter][Side Letter]-[Breakpoint]-[Size Number] 

Breakpoints
    <576px Screens:     None (this is the default)    
    ≥576px Screens:     sm    
    ≥768px Screens:     md    
    ≥992px Screens:     lg    
    ≥1200px Screens:   xl

For example, if I wanted extra large padding on the top and bottom of my Block at large screen sizes, but no spacing at extra small screen sizes, I'd write that as py-0 py-lg-5. 

Bootstrap is mobile-first, so you will write your basic styles to accommodate a mobile view, and then add on extra styles to accommodate larger screens. 

More Bootstrap

There are lots of other things you can do with Bootstrap, and you can use Bootstrap code as custom CSS inside a Block. (For example, we’ve found it used their accordion feature before.)  We won’t cover that here, but if you are interested, take a deep dive into Bootstrap’s extensive documentation. The Utilities section could be particularly relevant.

Note that you won’t need to install Bootstrap to use it, as it’s already Ziggurat compatible.