Change sidebar background color

[wibby]

Hi All, Firstly I'd like to thank everyone involved in this project, it's fantatstic!

I know this is kind of a *newb* question but alas it has me at a loss,

I am using the "Top simple navigation + left subnavigation + 1 column" template, all I am trying to do is turn the whole of the left screen column with the menu sidebar background to a black.

I have succeded in turning the menu background itself black but I need the whole left hand height of the sidebar black and I can't figure out what to alter in the stylesheets

Can anyone offer any help?

(sorry I am using CMS Made Simple 1.2 "Barbados")

Thanks

[Nullig]

Just change the css for:

div#sidebar

to include:

background-color: black;

Nullig

[wibby]

Thanks Nullig but as you can see here:

http://freehandlinux.co.uk/rjlewis/index.php?page=our-services

It just does the menu, I need the whole side depth of the screen to be black, Any other suggestions?

Code: Select all

div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;    /* sidebar width, if you change this please also change #main margins */
  
background-color: black;
display: inline;  /* FIX ie doublemargin bug */
margin-left: 0;
}

[Nullig]

To do that, you'll have to make a background image for the content div, which has a black stripe down the left, the size of the sidebar div and make the sidebar and main divs transparent.

Nullig

[wibby]

Thanks again Nullig,

Sorry to be a pain but could you give me a pointer in the correct direction

I have set sidebar div to transparent

Code: Select all

div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 26%;    /* sidebar width, if you change this please also change #main margins */
  background-color: transparent;
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
}

You say I have to set the main divs transparent too. Could I ask what ones these are?

Also I have made a black gif the width of the sidebar, in what div do I place it?

Code: Select all

background: #fff url(images/sideback.gif) repeat-y;

I am really sorry about being so dumb about this I really do appreciate all your help.

[kermit]

no monkeying around with a background image..... tested via webdeveloper toolbar in firefox; added to the end of your css:

div#main {border-left:250px solid black;margin-left:0;padding-left:30px;}
div#sidebar {width:250px;}

and keep the black background on div#sidebar.

there's also a 1px border on div#menu_vert ul li (i think that's the right element) you might want to make black so it doesn't show (dunno if removing it will goof anything up, so using border-bottom-color:black on it might be safer).


edit.. tip: keep the float:left; on div#sidebar.

edit2... confirmed that pesky border location to be:


div#menu_vert ul li {border-bottom-color:black;}

[wibby]

Thanks kermit!

That did the trick 
I also added border-left:250px solid black;margin-left:0;padding-left:30px;} to #footer as it was skipping the bottom of the page (obviously)

Again thanks for all your help guys , I'll buy you a pint! 


EDIT:

Cheers Kermit... I spotted the bottom border just gave it a #000000

If you click the link now you should see it all working nicely now

Code: Select all

div#main {border-left:250px solid black;margin-left:0;padding-left:30px;}


}
div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  background-color: transparent;
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
width:250px;
}

Code: Select all

/* menu li block */
#menu_vert li {
   list-style: none;
   margin: 0;
   border-bottom: 1px solid #000000;
display: block;
}

[wibby]

Just noticed if you have this set as transparent It goes loopy on the roll overs

Code: Select all

div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  background-color: transparent;
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
width:250px;
}

Set it to this and it's all fine and dandy!

Code: Select all

div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  background-color: black;
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
width:250px;

[kermit]

there's a rogue } above div#sidebar in your css causing firefox to NOT apply any styles to div#sidebar -- i.e. no float, no width, no background....  which is why i mentioned keeping the float on it.. it wasn't.. at least not for me cause of that extra }

you musta missed my note about keeping the sidebar background as black..

[wibby]

Got it!, Cheers kermit... all sorted now

[mimursal]

Hi to everyone. I am new to this CMSMS-world.

I have a layout of three columns (left-sidebar, main and right-sidebar) and I would like a colored sidebars that goes as down as the footer regardless of their content. Of course in FF and IE. I took as an example from the previous messages, but not succeeding to hit my target. Here is what I have as code

In the main column

Code: Select all

div#main {
   border-left:   175px solid #C2D4D6;
   border-right: 180px solid #C2D4D6;
   background-color : #EEEEEE;
   padding: 5px 5px 5px 5px; 
}

In the right-sidebar and left-sidebar columns

Code: Select all

div#sidebar-right {
   float: right;        /* set sidebar on the right side. Change to right to float it left instead. */
   width: 180px;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */   
   background-color : #E2F4F6; 
   margin-right: 0;
}

div#sidebar-left {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 175px;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
   background-color : #E2F4F6; 
}

In FF I am closer to my target than IE. This is the page I am talking about http://www.uss-baidoa.org/index.php?page=admission

[Dr.CSS]

To get it to go to the bottom, and use a CSS color call, you will have to make sure your side bars have more content than the middle, not easy to do, so you may want to use an image which would be one size as you are using a fixed width layout...

[mimursal]

Thanks Mark,

I was hopping to find a solution within CSS-color, but I had to go for image. Now I have a working (in FX and IE) page with image decorated sidebars.

[Dr.CSS]

[solved] ?...