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:
capitalize
The first letter of every word will be capitalized
none
The text will appear as entered
lowercase
All text will be displayed lower case
uppercase
All 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:
.WaGadgetBlog ul.boxesList li.boxesListItem .boxHeaderOuterContainer
h4.boxHeaderTitle a{
text-transform: capitalize;
}
where the capitalize option can be replaced by none, lowercase, or uppercase. See the beginning 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:
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a{
text-transform: capitalize;
}where the capitalize option can be replaced by none, lowercase, or uppercase. See the beginning 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:
.WaGadgetMenuHorizontal .menuInner ul ul li > .item > a{
text-transform: capitalize;
}where the capitalize option can be replaced by none, lowercase, or uppercase. See the beginning 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 { .
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...
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a
...you insert it ahead of the code used to control the capitalization, which appears as...
{
text-transform: capitalize;
}...to form the final code that you add to the CSS customization screen:
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a{
text-transform: capitalize;
}
