Home

Download this help site
(PDF 82MB)

Download

Overriding theme capitalization

Some Wild Apricot website themes force menus options, blog titles, or other elements to display all upper case text, regardless of how the text was entered. Using CSS code, you can override theme capitalization and control yourself how the text is displayed. You can choose to display the text using one of the following options:

OptionEffect
capitalizeThe first letter of every word will be capitalized
noneThe text will appear as entered
lowercaseAll text will be displayed lower case
uppercaseAll text will be displayed upper case

To override theme capitalization, you add the required code to the CSS customization screen. See the sections below for the required code.

Changing capitalization for blog post titles

To change the capitalization of blog post titles, copy and paste the following code to the CSS customization screen:

 Read more/less

where the capitalize option can be replaced by nonelowercase, or uppercase. See the table at the top of this topic for a description of each option.

Changing capitalization for parent menu items

To change the capitalization of parent menu items – the top-level items – on a horizontal menu gadget, copy and paste the following code to the CSS customization screen:

 Read more/less

where the capitalize option can be replaced by nonelowercase, or uppercase. See the table at the top of this topic for a description of each option. 

Changing capitalization for child menu items

To change the capitalization of child menu items – items below the top-level menu items – on a horizontal menu gadget, copy and paste the following code to the CSS customization screen:

 Read more/less

where the capitalize option can be replaced by nonelowercase, or uppercase. See the table at the top of this topic for a description of each option.

Changing capitalization for other elements

To change the capitalization of other theme elements, you can use the same approach. Within the code, you need to identify the element to be customized. In the examples above, the element is identified to the left of the left curly bracket { .

 Read more/less

To figure out the name of the element you want to customize, you can use the Inspect option that's available on all modern browsers. To use this option, right click over the component you want to change and select the Inspect option.

In the window that appears, the element should appear followed by a number of formatting options.

The code you need to identify the element should appear just to the left of the left curly bracket { . In the screen clip above, we've highlighted the code you need to identify the element in this case.

After you've copied the identifying code, in this case...

...you insert it ahead of the code used to control the capitalization, which appears as...

...to form the final code that you add to the CSS customization screen:

On this page: 

  • No labels