Get Rockbase

Docs

/

Global Styles

Global Styles lets you change the look of your website with a simple button click. Global Styles contains Browse styles, Typography, Colors, Layout, and Blocks.

  1. Navigate to Appearance > Editor > Styles.
  2. Click on the pencil icon.
  3. Global Styles toolbar will open on the right-hand side. The half-moon icon turns on and off the toolbar.
  4. Become familiar with the icons in this view. Page icon (settings), half moon icon (Styles) three dots (View tools) .
  5. Under Styles: eye icon (Style Book), timer (Revisions), three dots (Additional CSS, Welcome Guide , Reset styles)
global styles settings hightlighted and an arrow pointing to the global styles icon.

Browse Styles

  1. Open Browse Styles.
  2. There are 24 style variations in the Rockbase theme. Pick one that you like.
  3. Once you have found the style that works. Click Save (page). Click Save (Global)

Pro Tip: If you find a style variation that is close to what you like pick that one. In the Typography and Colors sections are directions on how to edit font family and the colors in the palette so it is just what you want.

Typography

Typography manages the font families and the font choices for different elements.

Highlight the typography settings in global styles

Pro Tip: Design tip: When thinking about fonts pick those that are easy to read for accessibility. Best practice is to go with two different fonts; one for the headings, one for the text. Pick a normal and bold weight, and an italic normal and bold.

Fonts

Under Fonts you will see the list of fonts that are part of the style variation you picked. Next to each font name is the number of style variations that are part of the font library.

an arrow pointing to the manage fonts icon in typography inside global styles

Installing Google fonts

  1. Click Manage fonts icon.
  2. Click Install Fonts
  3. Allow access to Google Fonts
  4. Decide on a font family. Click on the boxes of the variations you want to install.
  5. Click Install in the bottom right-hand corner.
the font library where you install and upload fonts

Uploading a custom font

  1. Click Manage fonts icon.
  2. Click Upload
  3. Click Upload font. Supported formats: .ttf, .otf, .woff, and .woff2.
  4. Find file and click Open. Message will appear at top. ‘Fonts were installed successfully’.

Elements

The Elements section is where you can set the global styles for the different types of elements: text, links, headings, captions, and buttons. Each element has the following settings.

  1. Font – Change the font family.
  2. Size – Change the font size.
  3. Appearance – Change the weight of the font from normal to bold to italic.
  4. Line Height – Change the space between two lines of text.
  5. Lettering Spacing – Change the space between the letters of a word.
  6. Letter Case – Change the lettering case: none, all uppercase, all lowercase, or capitalize ( the first letter of a sentence is capitalized ).

Change settings for text

the settings available for changing the text elements in global styles

Under Elements. Click Text.

Change font
  1. Click the drop-down arrow icon to choose your font family.
  2. Click Save (page). Click Save (Global)
Change size
  1. Click the drop-down arrow to choose a different font size.
  2. Click Save (page). Click Save (Global) Rockbase uses the following font sizing. The font sizing uses fluid typography and automatically scales to different device sizes. A term you might hear for font size is t-shirt sizing since we use XS- XXL.
    • XS = 1rem ( 16 px )
    • S = 1.125 rem ( 18 px )
    • M = 1.5 rem ( 24 px )
    • L = 2.25 rem ( 36 px )
    • XL = 2.625 rem ( 42 px )
    • XXL = 4 rem ( 64 px )
  3. Another way to change the font size.
    1. Click Set Custom Size icon.
    2. In the box you can adjust by rem (default), px, or em and type in the size you want.
    3. You can also use the slide bar to adjust font size.
    4. Click Save (page). Click Save (Global)
Change appearance
  1. Click the drop-down arrow
  2. Choose the font weight: normal, bold, italic
  3. Click Save (page). Click Save (Global)
Change line height
  1. In the box Click the (+) or (-) symbols to change the size
  2. Click Save (page). Click Save (Global)
Change letter spacing
  1. In the box you have the option of changing the units of measurement. Options are px, %, em, rem, vw, vh.
  2. Click on the measurement showing and a drop-down menu will appear with the other options.
  3. To change the numeric value. Click inside the box to the left and type in your number.
  4. Click Save (page). Click Save (Global)
Change letter case
  1. Hover over an option then Click to highlight.
  2. Click Save (page). Click Save (Global)

Change settings for links

Under Elements. Click Links.

The same settings are available as in Change Text. See above.

Links do not have line spacing or lettering spacing. A link will inherit these properties based on the type being used.

Links have Decorations.

  1. Hover over choice. Click to highlight.
  2. Click Save (page). Click Save (Global).

Change settings for headings

Under Elements. Click Heading.

The same settings are available as in Change Text. See above.

Headings have the option to resize each of the heading types from H1 to H6.

Headings setting highlighted in global styles in typography
  1. Hover over the box containing All, H1, H2, H3, H4, H5, H6.
  2. Click on the heading type to set styles.
  3. After making all the changes.
  4. Click Save (page). Click Save (Global)

Change settings for captions and buttons

They have the same settings available as in Change Text. See Above.

Reset changes to default settings

  1. Inside each of the Element sections.
  2. Click on the three dots next to Typography.
  3. This allows you to reset one or all the style changes.
  4. Click Save (page). Click Save (Global)

Colors

Manage the palette colors and change the default colors of different elements.

an arrow pointing to the the highlighted colors section.

Palette

The Palette shows the number of colors of the style variation you chose when setting global styles in Browse Styles.

the colors settings in global styles

Change a color

  1. Click on ( # colors ) Example: The default palette has 11 colors. Click on 11 colors.
  2. This view will show the theme colors in solid and gradient. It also has an option for Custom colors.
  3. Click on the three dots next to Theme. This will display a box “Show Details”.
  4. Click on Show Details. This view will show a list of all the colors and what they are used for within the theme.
an arrow pointing to the three dots to show how to open show details in the colors palette.

Pro Tip: Copy this list in your notes and add the hex code numbers for each item and where they are being used.

Change a color in the palette

the theme colors and where to click done is shown with an arrow
  1. Change the Secondary color.
  2. Click on the color dot in the list.
  3. This opens the color picker.
  4. Pick a color by:
    1. Moving the small dot mover within the top color window. OR
    2. Moving the small dot mover within the color selector bar. OR
    3. Type in a HEX, RGB, or HSL color code in the box.
  5. Once you have a color. You can change the color’s opacity (how transparent you want the color).
    1. Move the small dot mover with the checkerboard bar located under the color selector bar.
  6. Click Done.
  7. Click Save (page). Click Save (Global).
  8. To Reset colors. Click on the three dots and the reset option appears. Click on it. Click Save (page). Click Save (Global).

Color

The Color section under Colors manages the default color of the following elements: text, background, link, captions, button, heading. There is an option to turn on H1, H2, H3, H4, H5, H6 so they show in the color list.

Change Text color

  1. Click Text.
  2. Choose a color from the Theme colors. Or
  3. Click on the color box and use the color picker. Or
  4. Add the HEX, RGB, or HSL color code.
  5. There is the option to Copy the color code to be used in another setting.
  6. Click Save (page). Click Save (Global).
  7. Click Clear to reset.

Change Background color

  • Click Background.
  • There is a Solid or Gradient.
  • Solid
    1. Pick a theme color. Or
    2. Click on the color box to use the color picker. Or
    3. Input color code.
  • Gradient
    1. Hover the mouse over the color box to pick a color.
    2. Use the small dot on either side of the box to adjust the gradient.
    3. Type – Linear or Radical
    4. Angle – input a degree or hover the circle to move the angle of the gradient.
    5. Theme – there are several theme gradients.
  • Click Save (page). Click Save (Global).
  • Click Clear to reset.

Change Link color

  1. Click Link.
  2. There is a Default and Hover.
  3. Default is the same as changing the text color.
  4. Hover is the color that the link will change when a mouse hovers over it.
  5. Click Save (page). Click Save (Global).
  6. Click Clear to reset.

Change Captions color

  1. Click Captions.
  2. Changing the captions color is the same as changing the text color.
  3. Click Save (page). Click Save (Global).
  4. Click Clear to reset.

Change Button color

highlighted button color in global styles and the settings window to change the gradient color
  1. Click Button.
  2. There are settings for Text, Background, Gradient.
  3. Text is the color of the button’s text.
  4. Background should have a contrasting color from the button text.
  5. Gradient – see change background color for directions.
  6. Click Save (page). Click Save (Global).
  7. Click Clear to reset.

Change Heading color

highlighted heading color and the settings to change the heading background color
  1. Click Heading.
  2. There are settings for Text, Background, Gradient.
  3. Text is the color of the button’s text.
  4. Background should have a contrasting color from the button text.
  5. Gradient – see change background color for directions.
  6. Click Save (page). Click Save (Global).
  7. Click Clear to reset.

Layout

Layout controls the width of the main content area for all pages and posts. Rockbase comes with default settings, padding, and block spacing. We have optimized the default Layout settings for today’s website design principles.

highlighted area of layout settings in global styles

If you want to edit these and make adjustments you can refer to the WordPress documentation.

Blocks

Blocks is where you will find a list of all the Core blocks. Rockbase includes styling for Core blocks, adjusting these may create varying results.

highlighted area of where to find blocks in global styles

Start with Rockbase and get a 100+ hr head start.

Get Rockbase Now