Customise Tabs With CSS

You can customize tabs using CSS styling. To do this, you use the CSS Style Sheet Macro along with the tabs macros. You can apply styles to the container and the individual tabs. You can add multiple styles to each macro. Below are some examples using borders, background color, and text color. For more CSS examples, see w3schools.

Instructions

Add the CSS Style Sheet Macro

1. Navigate to the page you want to edit.

2. Click Edit.

3. Click Insert More Content > Other Macros.

4. Select the CSS Stylesheet macro from Macro Browser.

   

5. Click Insert. The macro placeholder displays. 

Add A Border

1. To put a border on the tab container select the tab container macro and click Edit.
2.  In the CSS Class field input a name eg. border
   
3. Inside the CSS Style Sheet macro type the CSS for the type of border you want. Remember to use the CSS Class you used in tabs macro as your selector.
   eg. The following gives a solid blue border
   

Published Tabs With Blue Border

Change The Background Color Of A Tab

1. To put a background color in a tab select the tab page macro and click Edit.
2.  In the CSS Class field input a name eg. orange
   

3. Inside the CSS Style Sheet macro type the CSS for the background color you want. Remember to use the CSS Class you used in tabs macro as your selector.
   eg. The following gives an orange background
   

   When selecting a color with CSS Style Sheet you can name a color or use a Hex code for a specific shade.

Published Tabs With An Orange Background on the First Tab

Change The Text Color In a Tab

1. To change the text color in a tab select the tab page macro and click Edit.
2.  In the CSS Class field input a name eg. Denim
   

3. Inside the CSS Style Sheet macro type the CSS for the color text you want. Remember to use the CSS Class you used in tabs macro as your selector.
   eg. The following gives denim blue text
   

Published Tabs With Denim Blue Text on the First Tab

Add Multiple Styles To A Single Tab

1. Select the tab page macro and click Edit.
2.  In the CSS Class field input the selectors you wish to apply. Just leave a space between the different ones. eg orange denim
   

Published Tabs With Multiple CSS Styles Applied