[solved] Adding a line down side of the website

[andybr1ggs]

Hi how would i make two lines appear at the side of my website, like the pic attached that i edited with paint.

[Patric]

Topic moved.

[radders]

Edit your theme's css to add border-left and border-right for

#page

[spott]

modify the global.css file

[andybr1ggs]

Cheers Lads,

What code would i need to add in the themes.css,

Nice One


Andy.

[radders]

The file you need to modify is /global.css in the themes directory.

The exact code depends on the exact look you require - colour, line thickness etc. You *really* need to find out a bit more about css if you want to make these sorts of changes. I suggest you install the webdeveloper addon to Firefox.

[andybr1ggs]

The file you need to modify is /global.css in the themes directory.

The exact code depends on the exact look you require - colour, line thickness etc. You *really* need to find out a bit more about css if you want to make these sorts of changes. I suggest you install the webdeveloper addon to Firefox.

Cheers for that radders, im onto it

[andybr1ggs]

The file you need to modify is /global.css in the themes directory.

The exact code depends on the exact look you require - colour, line thickness etc. You *really* need to find out a bit more about css if you want to make these sorts of changes. I suggest you install the webdeveloper addon to Firefox.

Cheers for that radders, im onto it

ar8 radders I dont know if your subscribed to this thread but here goes........Ive figured a little bit out but cant seem to get it to work, heres the code what i entered into the global.css


.container {border-left:1px solid #cccccc;
border-right:1px solid #cccccc;}

dows that seem ok or do i need to add anything else ?

[guitarplayer]

Hello Andy,


on line 183 in global.css you have this

#page
{
  width: 980px;
  margin-top: 0pt;
  margin-right: auto;
  margin-bottom: 2px;
  margin-left: auto;
  text-align: left;
}

change it to this

#page
{
  width: 980px;
  margin-top: 0pt;
  margin-right: auto;
  margin-bottom: 2px;
  margin-left: auto;
  text-align: left;
  border-left: 1px solid #000000
  border-right: 1px solid #000000
}

Should do the trick

[andybr1ggs]

Hello Andy,


on line 183 in global.css you have this

#page
{
  width: 980px;
  margin-top: 0pt;
  margin-right: auto;
  margin-bottom: 2px;
  margin-left: auto;
  text-align: left;
}

change it to this

#page
{
  width: 980px;
  margin-top: 0pt;
  margin-right: auto;
  margin-bottom: 2px;
  margin-left: auto;
  text-align: left;
  border-left: 1px solid #000000
  border-right: 1px solid #000000
}

Should do the trick

i added that but dont seem to do anything

[guitarplayer]

Then you haven't uploaded it to the server, because I'm looking at your style sheet now and it's not on it.

[guitarplayer]

it's this, my mistake

#page
{
  width: 980px;
  margin-top: 0pt;
  margin-right: auto;
  margin-bottom: 2px;
  margin-left: auto;
  text-align: left;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

[andybr1ggs]

What would these be under in css the info block and logo ?

[guitarplayer]

#header line 200

Did you see my corrected .css post?

[andybr1ggs]

just seen it thanks alot im going to edit it right now :-)


Cheers.


Andy.

[andybr1ggs]

nice 1 :-) how would i pull the right in slightly by adding 2px ?

Cheers


Andy

[alpaca]

Using this method can you make a think left and right border of the main 980px of the website liket his website?

http://www.office.co.uk/

[alpaca]

Anyone care to share with a "crazy with lack of sleep trying to figure this one out" guy like me

[Eihwaz]

2 Alpaca: No, they use another method on the site you gave: they use a shadow image.
Open your global.css, find #page bit and replace it with:

#page {
   width: 966px;
   margin: 0 auto 2px auto;
   text-align:left;
   padding: 0 5px;
   background: url('../img/bodyBg.png') repeat-y top left;
}

Then download the image and put it to your theme's img directory.
I'm not sure if it will work fine with IE6, because of it's broken box model, so test it first.

[alpaca]

Hi Eihwaz,

Thank you for the suggestion. I tried this but this isn't the effect I was trying to do. I have attached a screenshot to show you what I mean:

2 Alpaca: No, they use another method on the site you gave: they use a shadow image.
Open your global.css, find #page bit and replace it with:

#page {
   width: 966px;
   margin: 0 auto 2px auto;
   text-align:left;
   padding: 0 5px;
   background: url('../img/bodyBg.png') repeat-y top left;
}

Then download the image and put it to your theme's img directory.
I'm not sure if it will work fine with IE6, because of it's broken box model, so test it first.

[Eihwaz]

Try this then:
global.css
Line 16 or so, find body selector and replace with:

body {
   background: #9F8C63 url('../img/backgroundImage.gif') 0 0;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
}

Actually, you're only interested in the first line, you can leave the other attributes as they are, except for background-color — delete it.

Find #page selector and replace it with:

#page {
   width: 966px;
   margin: 0 auto 2px auto;
   text-align:left;
   padding: 0 8px;
   background: url('../img/bodyBg.png') repeat-y top left;
}

I still used shadow for #page selector, because without it the page doesn't look that well (In my opinion, that is).
Two files were used: the background and the shadow (the shadow file from the previous post will not work as it should with this version).
I've attached an image showing how it looks.

Note to self: Da Vinci sleep schedule doesn't work very well.

[alpaca]

Hi Eihwaz,

You have just made my day!!! Thanks very much for that! is there anyway I can make it so the man website looks like it's raised from the brown sides? i.e. drop shadow?

[Eihwaz]

Hi, Alpaca,
Yes, there is a way: as we use an image to draw shadow (bodyBg.png) that has an opaque middle part (white) and semi-transparent shadows on the sides.
So you can just open that bodyBg.png in virtually any graphic editor (I'd recommend Gimp — it's free), duplicate that image and place it on top of itself: that will make shadows less transparent.
Or you can download another bodyBg.png image that I've already changed and see if it works for you.
Cheers!

[alpaca]

nice!!!