Examples of how to apply custom CSS to components
Posted: 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.
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.
You will find that often you cannot apply styles directly to the class listed but must be more specific. Example CSS is shown below.
Classes and ids can be seen under the Mark-up section of the properties panel.
- Mark-up.png (8.01 KiB) Viewed 16022 times
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 17172 times
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 17167 times