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 (8.01 KiB) Viewed 5308 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 6458 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 6453 times

Return to “F.A.Q.s”

Who is online

Users browsing this forum: No registered users and 1 guest