Examples of how to apply custom CSS to components

[Forum Admin]

The Style Sheet library section is used to apply custom CSS to ProtoShare components. You can do so by either adding/modifying classes or using an id selector.

Classes and ids can be seen under the Mark-up section of the properties panel.

Mark-up.png (8.01 KiB) Viewed 16104 times

In this example, the #id has been set to Submit so that styles can be assigned to this specific component.

To change the appearance of the button in question, the following CSS was added to the Style Sheet. You'll notice the addition of .s9-body, which is recommended to ensure that the CSS gets applied correctly.

Code: Select all

.s9-body .s9-btn#Submit button{
font-weight: bold;
font-family: Tahoma;
color: #FFFFFF;
background-color: #99CC00;
text-transform: uppercase;
}

Buttons.png (3.21 KiB) Viewed 17254 times

You will find that often you cannot apply styles directly to the class listed but must be more specific. Example CSS is shown below.

Code: Select all

.s9-body .s9-v-nav#Catalog li a {
font-weight : normal;
font-size : 9px;
margin : 0px;
list-style-type : none;
padding : 1px;
border-bottom : solid;
border-left : none;
border-width : 1px;
}

Vert_Nav.png (7.77 KiB) Viewed 17249 times