How to Change orange square in default template

[mattpitts74]

Hi There

I have just installed the latest version of CSM made simple it all works great,  I am very new to css layouts, having built previous webistes using tables.  Anyway would appriecate some help.  I have been playimg around with the CSS but cannot seem to change the orange square and orange lines which appear in the defalt template.

Can anyone point me in the right direction?  Thanks

[heatherfeuer]

Hi!  Welcome to the grand world of table-free web layouts!    In the admin area, click on layouts --> stylesheets.  Select the one that is attached to the template you are using (default is usually Layout: Left Sidebar + 1 column.  Open that stylesheet and scroll to the bottom where you will find the following bit of code:

div#content h2 {
color: #294B5F;
font-size: 1.5em;
text-align: left;
/* some air around the text */
padding-left: 0.5em;
padding-bottom: 1px;
/* set borders around header */
border-bottom: 1px solid #e7ab0b;
border-left: 1.1em solid #e7ab0b;
        line-height: 1.5em;
/* and some air under the border */
        margin: 0 0 0.5em 0;
}

The two lines in red control the styling of that orange "box" and line.  If you can, I would strongly suggest finding a CSS editor that shows you changes in real time.  I use TopStyle Pro by bradsoft and I can make changes to the CSS and see an instant preview.

[Nullig]

Firefox with the Web Developer Tools addon is very good for real-time editing of CSS, with instant preview. It is so helpful in finding layout and styling problems.

Nullig