Customization thru CSS placement

Web development skills are required to do CSS customization

Example1: Increasing the width of the header logo container (to avoid logo from being clipped)

Override the CSS placement (Site Admin->Placements->CSS) by adding following content. 

#headlogo{width:310px}
#headTn1{width:450px}

headlogo class controls the width of the logo, whereas headTn1 class controls the width of the tab button container.

Example2: Changing Page headings, menu highlight and button backgrounds to red color

Using Images

If you like to use any image in the CSS, just create a dummy CMS resource (Site Page), and attache the image(s) to it. Finish the editing and re-open the dummy resource again, you will see the list of attachments, just click on any image and note the URL in browser, you can use that url to reference the image from inside your CSS class. Or you can also use relative URL (e.g. ../att/14df5256-d037-11e1-a737-00163e003984?red_button_bg.png), don't forget to add the actual filename after ?

CSS Placement Code

.page_heading{color:#BD190E}
.clickMenu li.hover{ background-color:#D83620; color:#ffffff; }
.clickMenu a:hover, .clickMenu li.main a:hover, .clickMenu li.main li a:hover { color: #ffffff; font-family: "Trebuchet MS",Trebuchet,Verdana,Arial,Helvetica,sans-serif; font-size: 12px; }
input.button, input.smallbutton, input.pagingButton {background: url("../att/14df5256-d037-11e1-a737-00163e003984?red_button_bg.png") repeat-x; }