Joomla Templates Club 406,261 posts

[phee Friend pheeJoin date: March 2010Posts: 23Downloads:0Uploads:1 Thanks: 6]

#151989

Hi, I want to change the user menu bar to a different color and the background to a picture background, how can i achieve this? thanks!

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#347789

Hi Phee

Open template.css file, line 32
edit this to have different menu bar colour bkg
body#bd {
background: url(../images/mw-bg.gif) repeat-x left top #EBEAE8;
color: #555555;

change images/body-bg.jpg for a background for the site in templatesja opalimages for default style or if you use any of the colours black, blue, red , yellow athletic etc it’s called mainwrap-bg.jpg, and is found in the folder matching the colour name

Hope this is a help
Blessings Shannon

[phee Friend pheeJoin date: March 2010Posts: 23Downloads:0Uploads:1 Thanks: 6]

#347797

Hi shannon! thanks for the reply!

I tried changing the color to #bc6ef8. Althought in the css it says the usermenu is #555555, it’s not that color as the user menu is black.

Is there something wrong?

Thanks!

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#347799

Sorry about that I was looking as a different menu config

the background is a graphic in the images folder called mainnav-bg.gif
called by line 1013 in template.css

#ja-mainnav .inner {
background: url(../images/mainnav-bg.gif) repeat-x left top #333333;
border-bottom: 1px solid #4F4F4F;
padding: 0;
margin: 0 5px;

Blessings Shannon

1 user says Thank You to uniquebiz for this useful post

1. phee

[ramadji Friend ramadjiJoin date: March 2007Posts: 21Downloads:22Uploads:2 Thanks: 4]

#347987

Hello Shannon,
Do you know how one will go about setting the background of the site to a while color instead of the colors that come with the template? Thanks in advance for your feedback.
Ramadji

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#348009

We’ll assume we are using the default layout
Remove the main bkg image

templates/ja_opal/images/body-bg.jpg

Then edit the template.css file – I use a editor called Topstyle 4 it has the ability to show the colors used in the template by their hex number and links to their position in the file very easy to find and alter. Download the trial it’s all you’ll need for this kind of thing.

OK find these items at line 25

body {
background: #EBEAE8; *** Change to white – You can use the word white or hex #FFF
color: #000000;
font-family: “Segoe UI”, “Trebuchet MS”, Arial, Helvetica, sans-serif;
line-height: 1.5;
}

body#bd {
background: url(../images/mw-bg.gif) repeat-x left top #EBEAE8; ** Delete image path replace with word none;
(ensure semicolon is there) *** Change hex to white or #FFF
color: #555555;
padding: 0;
margin: 0;
}

There you have it a white background, if you are using another set style you may have to delete the image background in the folder of the style as well, these have various different names such as bg.gif, mainwrap-bg.jpg,bg.png etc

Thus endeth this tutorial
Have fun
Shannon

1 user says Thank You to uniquebiz for this useful post

1. phee

[Author]

Posts