Customise 'soccer' template - CSS pointer req.

[david@mediacopy]

Hi,

I'm trying to customise the 'Soccer' template to match the broad design used on my web site. It's mostly done but I'm struggling to find a couple of CSS settings to change the back-ground colour in a couple of area's.

The blog is here: http://www.davidtapley.co.uk/blog/

My Web site is here: http://www.davidtapley.co.uk

The style sheet for the theme is: http://www.davidtapley.co.uk/blog/templ ... /style.css

1. Ideally I'd like to be able to change the 'background' colour in the left side column (currently light grey) which holds the plug-in's etc. The would appear to partly set in the #bg setting but does not seem to work.

2. I'd like to change the main 'background' colour that the blog sits in (currently white ?) I can't find this at all.

3. Finally, assuming I manage to add the main background colour, it would be nice to add a white boarder around the centre 'blog' screen. I'm guessing I can use the #wrap setting to set a wider boarder.

Sorry for what are probably simple questions, I've spent to afternoon trying to track them down without any success. Any hints tips or pointers towards the blindingly obvious will be appreciated

Thanks for your help

David

[Timbalu]

to correct the sidebar and content issue use

Code: Select all

#mainpane {
    background: none repeat scroll 0 0 #FFFFFF; /*this is white*/
    overflow: visible;
}

for the border add to #content

Code: Select all

#content {
    border: 2px solid red; /* try any colour - or use web-colors */
}

[david@mediacopy]

to correct the sidebar and content issue use

Code: Select all

#mainpane {
    background: none repeat scroll 0 0 #FFFFFF; /*this is white*/
    overflow: visible;
}

for the border add to #content

Code: Select all

#content {
    border: 2px solid red; /* try any colour - or use web-colors */
}

Cheers Ian, just the job - much appreciated.

I've made those amends and used 'background' in the 'body' tag to get the whole screen coloured background I was looking for.

All's good except there is a slight alignment issue (which I expect was hidden in the original template) that has shown up with the colour change.

If anyone has any suggestions on how to fix it, that would be cool.

Thanks again

David

[Timbalu]

All's good except there is a slight alignment issue (which I expect was hidden in the original template) that has shown up with the colour change.

Hi David

What do you mean? The Contact Nav link?

Change width to

Code: Select all

#navbar {
    width: auto; /*542px;*/
}

Additional I would set and add to

Code: Select all

#bg {
    background: none repeat scroll 0 0 transparent;
}

to avoid this left vertical background image or just surround the background: url(...mainpane_bg.gif) with /* */

Trying to get this all near http://www.davidtapley.co.uk/index.htm is very nice. Go on!

[david@mediacopy]

Hi Ian,

The menu (contact) button does seem to roll onto a new line if the menu text is too long - your fix should allow me more descriptive menu link text

The alignment issue is in the white boarder - the left side is wider than the right side.

I've not had chance to play with your suggestions yet but that could be the fix ?

It's getting closer in style to the main site so fingers crossed. I'll make a few tweaks to the header image and they will help with the look too.

One thing that I was going to ask - are there any tricks to have a separate 'style' for different 'categories' ? You'll see on the blog I cover some very different subjects where the 'snow' style doesn't really match the other stuff.

Cheers

David

[Timbalu]

I've not had chance to play with your suggestions yet but that could be the fix ?

Yes.

...any tricks to have a separate 'style' for different 'categories' ?

Yes!

Something like

Code: Select all

/* syndication, quicksearch, archives, categories, authors, superuser, etc.
   staticpage plugin, entrylinks plugin, freetag plugin, guestbook plugin, etc. */
.serendipitySideBarContent .serendipity_edit_nugget  { 
    do: something;
} 

or

Code: Select all

h3.serendipitySideBarTitle serendipity_syndication_plugin  { 
    background: none repeat scroll 0 0 transparent;
}

Search for exact sidebar name in html source code.

[david@mediacopy]

Cheers Ian,

Much appreciated. I've fixed the background issue and it all looks balanced now.

I'll have a play with decoding the other elements of the CSS and am confident I'll be able better match to the main site when I have a bit more time.

I'm not sure I fully understand the plug-in/nugget approach - could this allow me to change the current \active css style between categories ?

Thinking about it, I guess the template HTML stays the same, it's just a case of using a different .css style sheet depending on the category 'content' or 'posts' being displayed ?

thanks again


David.

[Timbalu]

Thinking about it, I guess the template HTML stays the same, it's just a case of using a different .css style sheet depending on the category 'content' or 'posts' being displayed ?

Right! I should have said: Search for exact sidebar block name in html source code.

[david@mediacopy]

will do

[david@mediacopy]

One slight issue with the new theme is that the preview function fails when drafting a message.

The preview pane is very narrow, just a few px in the horizontal. The content appears to be displayed and it's possible to use the mouse to scroll it up and down so I'm guessing it must be a css setting somewhere

[Timbalu]

Yes David, it seems to do so, but without having this in real it is nearly impossible to give an advice.

Firefox has this fantastic plugin tool named Firebug, which being installed is able to let you do live editing od CSS and even HTML. With a tool like this everybody is able to solve its CSS problems after a while.

[yellowled]

One slight issue with the new theme is that the preview function fails when drafting a message.

The preview pane is very narrow, just a few px in the horizontal. The content appears to be displayed and it's possible to use the mouse to scroll it up and down so I'm guessing it must be a css setting somewhere

Yes, but also possibly modifications to preview_iframe.tpl. Beware, said file is a tricky bitch. Basically, you'll want to make sure that preview_iframe.tpl resembles your index.tpl, but it still needs some special (inline) styles (see default/preview_iframe.tpl for reference). I'm afraid it's really hard to give you any further and more specific advice on this.

YL

[david@mediacopy]

Thanks both, I'll have a look at it when I have a moment.

It's not a busy site so previewing 'live' isn't a deal breaker at the moment.