Joomla Templates Club 406,261 posts

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#135702

Hi, I’ve been working with the template and really like it. Just one thing I have not been able to figure out and I’m hoping someone can help.

I have the latest version of the template and have made some modifications, mostly color and fonts and some images. Joomla 1.5.8.

Right now the main body of the page and the background and header, nav, etc., are all white background.

See the site here (not yet in operation so don’t order any shoes from it! :laugh: )

I would like to have a gray background on the page, and then the main body of the site be white. I was able to get most of it that way, but there are some gaps in between the containers that show through the gray pg background, and I could not get the nav bar to stay within the confines of the width (wide 950px config). It seems to float too far to the left. Even if I don’t change the color, I’d still like the “extra” area on the left & right to be gone and the menu to be centered on the page.

Could anyone help me with what needs to be changed in the css to achieve this? I would really appreciate the input.

Thank you,
Cheryl

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#280330

for background color

template.css

body#bd {
color: #333333;
background: #FFFFFF;
}

change the background color to the required color.

for the centering of menu:

template.css

find this

#ja-mainnavwrap {
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}

add the line
padding-left: 100px;

change 100px according to your preference to center menu

1 user says Thank You to jsliao for this useful post

1. cjmicro

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#280366

Thank you for the quick reply.

I had found where to change the body background color, but then all the other stuff on top is the same color, so I need to make it all white. I also figured out where to do that.

The problem is the gaps… so I will put the colors back and show you what I mean so it makes sense.

the link again is http://www.neuaurashoes.com/newsite

Here is what I’ve changed:

<blockquote>body#bd {
color: #333333;
background: #9A9A9A;
}

#ja-header {
position: relative;
padding: 20px 0;
line-height: normal;
position: relative;
text-align: center;
z-index: 0;
background:#ffffff;

}

#ja-container {
width: 950px;
background: #ffffff;
}

#ja-mainnavwrap {
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
background: #ffffff;
padding-left: 40px;
}

#ja-footer {
clear: both;
position: relative;
padding: 15px 0;
border-top: 5px solid #CCCCCC;
color: #999999;
text-align: center;
background: #ffffff;
}</blockquote>

I need to get rid of the gray spaces between the nav/content/footer areas, and then make the nav the same width as the template (950px) and get rid of the areas that stick out the side.

The stylesheet is great, but more complex than most I have worked with and I am finding it hard to adjust how I want. I have the FF developer so I can highlight the css, but I’m still stuck!! :confused:

Thank you for looking.
Cheryl

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#280442

To remove gray space between body and menu:

#ja-containerwrap-f {template.css (line 640)
margin:0;
padding:20px 0;
}

remove padding:20px 0;

to align the menut to center:

template.css (line 847)

#ja-mainnavwrap {
background:#FFFFFF none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
border-top:1px solid #DDDDDD;
margin-left:auto;
margin-right:auto;
padding-left:30px;
padding-right:30px;
width:890px;
}

you may need to adjust the padding-left and padding-right to center the menu more… hope you get the drift.

cheers

1 user says Thank You to jsliao for this useful post

1. cjmicro

[cjmicro Friend cjmicroJoin date: June 2008Posts: 501Downloads:3Uploads:0 Thanks: 198 Thanked: 81 times in 10 posts]

#280530

Thank you!! This did the trick.

I will figure out how to add a bit more whitespace above the main content then a little on the left of the hilite modules (which are in dk gray).

I really appreciate your help. You made my day.

Cheryl
Happy Thanksgiving (do you celebrate that in Singapore? 🙂

[jsliao Friend jsliaoJoin date: April 2008Posts: 817Downloads:0Uploads:12 Thanks: 25 Thanked: 236 times in 210 posts]

#280569

nope we dont have thanksgiving holiday here in singapore

glad i was of help. 🙂

1 user says Thank You to jsliao for this useful post

1. cjmicro

[mom2nine Friend mom2nineJoin date: January 2008Posts: 3Downloads:0Uploads:0 Thanks: 3]

#281163

My question is similar. My client wants the top bar and the menu bar to be the same width as the rest of the site, with a grey background it all (so the main site is a centered white box, for want of a better explanation). What areas do I have to change to get this? He wants it 970 px wide, with the main menu bar in four even sections. And I have to figure out how to get the menu bar another color than white. Sigh…some days I wonder why I started doing this for a living.

[Author]

Posts