Joomla Templates Club 406,261 posts

[kristenannevans Friend kristenannevansJoin date: August 2011Posts: 20Downloads:0Uploads:0 Thanks: 11]

#169038

How do I change the background colors on the top three headers on the template (Hot News, Search, and Main Menu?)

Thanks!

Kristen

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#415423

Hi Kristen:

To change the background of the “Hot News” area . . .

In template.css, at line 1932


/* ja-hot-news */
#ja-hot-news {
background-color: #151515;
border-bottom: 1px solid #000;
padding-top: 5px;
}


Change the background color to what you want.

To change the background of the area with the logo/search . . .

In template.css, at line 1196


#ja-header {
background-color: #202020;
border-bottom: 1px solid #151515;
}


Change the background color to what you want.

To change the background for the Main Navigation area . . .

In template.css, at line 1246


/* Main Nav ---*/
#ja-mainnav {
line-height: 1;
position: relative;
z-index: 1000;
float: right;
background: url(../images/mainnav-bg.gif) left top repeat-x;
border-bottom: 1px solid #000;
}


You can remove/replace the background image with your own, or designate a color for the background

Hope that helps

1 user says Thank You to TomC for this useful post

1. kristenannevans

[kristenannevans Friend kristenannevansJoin date: August 2011Posts: 20Downloads:0Uploads:0 Thanks: 11]

#415425

Thank you! What if I have selected one of the color options (like light-green, which changes the background colors)? Where would I find the information to change it then (do I go to the style sheet for that color)?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#415427

<em>@kristenannevans 271086 wrote:</em><blockquote>Thank you! What if I have selected one of the color options (like light-green, which changes the background colors)? Where would I find the information to change it then (do I go to the style sheet for that color)?</blockquote>
Each color theme may have it’s own specialized css for various elements – the principle remains the same.

You would simply find the similar css lines within the various color theme css files.

1 user says Thank You to TomC for this useful post

1. kristenannevans

[kristenannevans Friend kristenannevansJoin date: August 2011Posts: 20Downloads:0Uploads:0 Thanks: 11]

#415429

Hi Tom,

Thank you so much for your help!

I’ve tried to find it and no luck….If I could ask for your help again: here is the style sheet for the color variation…

/*
# ————————————————————————
# JA Ores template for Joomla 1.5.x
# ————————————————————————
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license – PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com – http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ————————————————————————
*/
@import url(“light-theme.css”);
/* Commont style —*/
a { color: #809a04; }

/* Joomla style —*/
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus,
a.readon:hover,
a.readon:active,
a.readon:focus {
color: #809a04;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #809a04;
border: 1px solid #809a04;
}

.counter span {
background: #809a04;
border: 1px solid #809a04;
}

#system-message dd.message ul { background: #809a04; }

#system-message dd.error ul { background: #809a04; }

div.moduletable_hilite h3 { color: #809a04; }

div.moduletable_hilite h3 span { border-color: #809a04; }

#ja-login form fieldset .button:hover,
#ja-login form fieldset .button:focus {
color: #809a04;
}

div.logo-text h1 a { color: #809a04; }

h1.logo a { background: url(../../images/light-green/logo.png) no-repeat left; }

.ja-navhelper a { color: #809a04; }
.ja-navhelper a:hover,
.ja-navhelper a:active,
.ja-navhelper a:focus {
background-color: #809a04;
}

.ja-links li.top a:hover { background-color: #809a04;}

.ja-links li.layout-switcher a { background: #809a04;}

.ja-links li.user-reset a { background: #809a04; }

#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus {
background: url(../../images/light-green/arrow-2.gif) 5px 13px no-repeat;
color: #809a04;
}

#ja-container ul.menu li.active a {
background: url(../../images/light-green/arrow-2.gif) 5px 13px no-repeat;
color: #809a04;
}

#ja-container ul.menu li.active li a:hover { background: url(../../images/light-green/arrow-2.gif) 5px 10px no-repeat; }

#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:active,
#ja-container ul.menu li li a:focus { color: #809a04 !important; }

#ja-container ul.menu li.active li.active a {
background: url(../../images/light-green/arrow-2.gif) 5px 10px no-repeat;
color: #809a04 !important;
}

#ja-container ul.menu li.active li.active li a:hover,
#ja-container ul.menu li.active li.active li.active a {
background: url(../../images/light-green/arrow-2.gif) 5px 10px no-repeat;
color: #809a04 !important;
}

/* footer */
#ja-footer small a { color: #809a04; }
.ja-footnav li a:hover, .ja-footnav li a:active, .ja-footnav li a:focus { color: #809a04; }
/* */
.show {
background-image: url(../../images/light-green/cpanel-show.png);
}

#ja-slideshow {
background-color: #809a04;
}

.ja-slidenews-item .ja-title:hover,
.ja-slidenews-item .ja-title:focus,
.ja-slidenews-item .ja-title:active {
color: #809a04;
}

.ja-vertical_right .active {
background:transparent url(../../images/light-green/arrow-bg.png) no-repeat scroll left 35px;
}

/**/
div.moduletable_havecolor h3 {
background-image: url(../../images/light-green/icon-line-color.gif);
}

/* pathway */
.pathway {
color: #809a04;
}

/*
—————————————————-JA COMMENT */
#jac-sort a, #jac-sort a:link {
color: #809a04 !important;
}

#jac-wrapper .comment-heading a.comment-user, #jac-wrapper .comment-heading span.comment-user {
color: #809a04;
}

#jac-wrapper .rank-high .comment-rankingresult {
color: #809a04;
}

#jac-wrapper .comment-contentholder:hover .comment-reply a, #jac-wrapper .comment-contentholder:hover .comment-reply a:hover {
background-color: #809a04;
}

#jac-wrapper button.link {
color: #809a04;
}

#jac-wrapper .comment-heading a.comment-user span {
color: #809a04;
}

#jac-wrapper a.comment-quotefrom{
color: #809a04;
}

#jac-wrapper a.comment-quotefrom strong {
color: #809a04;
}

#jac-wrapper .status-isapproved span.status-btn{
color: #809a04;
}

#jac-msg-succesfull {
background: #809a04;
}

a.jac-links:hover span, a.jac-links:focus span, a.jac-links:active span {
color: #809a04;
}
/*****/

#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus,
#ja-container ul.menu li.active a,
#ja-container ul.menu li.active li a:hover,
#ja-container ul.menu li.active li.active a,
#ja-container ul.menu li.active li.active li a:hover {
background-image: url(../../images/light-green/arrow-2.gif);
}

/* K2 */
a.subCategoryMore:hover,
a.subCategoryMore:focus,
a.subCategoryMore:active {
color: #809a04;
}

span.itemHits b {
color: #809a04;
}

div.itemComments ul.itemCommentsList li span.commentLink a:hover {
color: #809a04;
}

div.itemBackToTop a:hover {
color: #809a04;
}

span.catItemHits b {
color: #809a04;
}

h2.latestItemTitleList a:hover,
h2.latestItemTitleList a:focus,
h2.latestItemTitleList a:active {
color: #809a04;
}

div.k2ItemsBlock ul li a.moduleItemComments:hover {
color: #809a04;
}

div.k2CategoriesListBlock ul li.activeCategory a {
color: #809a04;
}

.k2CategoriesListBlock ul.level0 li a:hover {
color: #809a04;
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#415437

Kristen:

Let’s try this . . . with the color-theme you want enabled, post the url for the site you’re working on. I will then be able to tell you the correct CSS file/lines you will need to modify.

😎

1 user says Thank You to TomC for this useful post

1. kristenannevans

[kristenannevans Friend kristenannevansJoin date: August 2011Posts: 20Downloads:0Uploads:0 Thanks: 11]

#415506

Thank you so much!

Here it is: http://66.147.244.224/~nofringe/

Very best,

Kristen

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#415511

<em>@kristenannevans 271208 wrote:</em><blockquote>Thank you so much!

Here it is: http://66.147.244.224/~nofringe/

</blockquote>

Okee dokee . . . for the theme you have enabled/displaying . . .

To change the background of the “Hot News” area . . .

In light-theme.css, starting at line 52


#ja-hot-news {
background-color: #353535;
color: #757575;
}

#ja-hot-news a {
color: #757575;
font-size: 92%;
}


Change the background color to what you want.

To change the background of the area with the logo/search . . .

In light-theme css, at line 72


/* header */
#ja-header {
background-color:#F8F8F8;
border-bottom:1px solid #bbb;
}

Change the background color to what you want.

To change the background for the Main Navigation area . . .

In light-theme.css, at line 78


/* mainnav */
#ja-mainnav {
background-image: url(../../images/light-theme/mainnav-bg.gif);
border-bottom: 1px solid #fff;
}


You can remove/replace the background image with your own, or designate a color for the background

Hope that helps

🙂

1 user says Thank You to TomC for this useful post

1. kristenannevans

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#415834

Were you able to work out the modifications you wanted?

Incidentally, I utilized [URL=http://www.joomlart.com/forums/topic/using-firebug-to-customize-your-site/”WEB DEVELOPMENT TOOLS . . . ” in my signature box below.

😎

[Author]

Posts