Joomla Templates Club 406,261 posts

[bista98 Friend bista98Join date: November 2010Posts: 12Downloads:0Uploads:1 Thanks: 7]

#163061

How can I change Top menu and footer background from black to blue?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#387501

There are a number of plaves where you need to edit css. Let’s start with the footer, edit the codes I have highlighted in red to your chosen colour.

Template.css line 471


#ja-botsl {
background: none repeat scroll 0 0 #252525;
border-top: 4px solid #9A2016;

}

Template.css line 475


#ja-botsl .main {
background: none repeat scroll 0 0 #252525;

}

Template.css line 483


#ja-footer {
background: none repeat scroll 0 0 #252525;
padding: 0;

}

Template.css line 488


#ja-footer .main {
background: none repeat scroll 0 0 #252525;
color: #666666;
padding: 10px 0 25px;
position: relative;
text-align: center;

}

and possibly template.css line 497 for that grey line between the modules and the footer


#ja-footer .ja-copyright {
border-top: 5px solid #333333;
margin: 0 15px;
padding: 15px 0 0;
position: relative;

}

1 user says Thank You to Phill for this useful post

1. bista98

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#387503

The megamenu element you have to edit some image in photoshop or similar to your needs. For instance look at template.css line 350 and you will see


#ja-mainnav .main .main-inner1 {
background: url("../images/mainnav-bg.png") repeat-x scroll left top transparent !important;

}

You will need to edit that image to change the colour. Same with the images you can see in mega.css


.ja-megamenu ul.level0 li.mega.active a.mega.active span.menu-title, .ja-megamenu ul.level0 li.active.haschild a.active.haschild span.menu-title {
background: url("../../images/navtab-r.png") no-repeat scroll right top transparent;
color: #FFFFFF;
padding: 0 20px 0 15px;

}

&


.ja-megamenu ul.level0 li.mega.active a.active, .ja-megamenu ul.level0 li.active.haschild a.active.haschild {
background: url("../../images/navtab-l.png") no-repeat scroll left top transparent;
padding-left: 5px;

}

1 user says Thank You to Phill for this useful post

1. bista98

[bista98 Friend bista98Join date: November 2010Posts: 12Downloads:0Uploads:1 Thanks: 7]

#387538

Thank You. Menu back ground worked perfectly with the help of photoshop. I made the change for ja-botsl and ja-footer as mentioned above. Looks like it worked on IE browser but not on Firefox and safari. Its still dark on those two browsers. I have alreday clearded the cache.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#387543

Please could you post a link to your site so I can take a look. I used Firefox to work out the adjustments so it should work fine.

2 users say Thank You to Phill for this useful post

1. bista98
2. edmguate

[bista98 Friend bista98Join date: November 2010Posts: 12Downloads:0Uploads:1 Thanks: 7]

#387554

Thank You. Looks like its working now.

[Author]

Posts