Examples of how to apply custom CSS to components

Frequently Asked Questions
Forum Admin
Posts: 79
Joined: Wed Feb 04, 2009 12:42 pm

Examples of how to apply custom CSS to components

Postby Forum Admin » Fri Sep 04, 2009 12:01 pm

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
Mark-up.png (8.01 KiB) Viewed 5442 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
Buttons.png (3.21 KiB) Viewed 6592 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
Vert_Nav.png (7.77 KiB) Viewed 6587 times

Return to “F.A.Q.s”

Who is online

Users browsing this forum: No registered users and 1 guest

cron