changing page bground color and text spacing

[plymouthhypno]

I want to do two simple things to improve appearance of my website www.plymouth-hypnotherapist.co.uk It presently uses the default NCleanBlue template and stylesheet.

I just want to change the background color of the pages, and the line spacing of the text (to 1.5 spacing). Being very inexperienced, I'm hoping I can do this without creating a new stylesheet! Presumably by altering the code in the NCleanBlue stylesheet but wanted some advice before doing so in case I screw up.

Also, in the stylesheet edit sections, the window doesn't seem big enough to display the whole code, it gets cut off at the bottom- how can I enlarge the window?

[M@rtijn]

Hello Pete,

In regards to the background color: this templates uses an image to display the blue top gradiant, but also the first half of the grey background color.

You can see the image here: http://plymouth-hypnotherapist.co.uk/up ... __full.png

The color is defined here in this piece of CSS, but if you change the color, you'll see it doesn't really look right. Or, not right at all, would be a better description

Code: Select all

#ncleanblue {
    background: url("http://plymouth-hypnotherapist.co.uk/uploads/NCleanBlue/bg__full.png") repeat-x scroll left top #ffffff;
    width: auto;
}

If you do want to change it, I suggest cutting the image to only show the blue top part.

You can include 'line-height: 150%;' to your main stylesheet. Right on top you'll find this:

Code: Select all

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

As said, just add 'line-height: 150%;'.
A little tip, don't put text in a list. I understand you did it to create the white lines, but it's a real nasty way.
After adding the line height, just remove the <ul> and <li> in your text altogether and just put it inside a single <p> tag.

As for your last question. There should be a scroll bar, so you can scroll down. You don't see it? Any chance you're working on an Ipad? Try switching to a normal PC or in case you already are, try switching browsers, as that scroll bar really should be there

[plymouthhypno]

OK thanks for that, its partly solved my problems.

I've altered the line spacing in the NCleanBlue stylesheet, to 200% in fact.

Re the scroll bar to see the full stylesheets- I'm guessing that should be on the right? In which case my 10.5 inch wide screen is the problem- 13 years old! I guess I need a new monitor.

I altered the background colour but I now realise I didn't mean background- I meant the blocks superimposed on the background, in which the text appears. What is the proper name for them? I presume their background colour can be set in the same stylesheet?

Also- the background image I found- but where on my site would I find it in a form in which it can be altered, e.g. cut? It's not in Image Manager. Can I get to it through my site admin panel or do I have to go back into Filezilla to find it?

[plymouthhypno]

OK I've now bought a new monitor for my computer, with wide screen, and having fixed the monitor settings correectly the stylesheets now display properly with the vertical scrollbar on the right. So now i'd just like to know how to alter colour of the actual boxes in which text appears (are they called containers?).