Joomla Templates Club 406,261 posts

[nmoyal Friend nmoyalJoin date: July 2008Posts: 1Downloads:0Uploads:0 Thanks: 2]

#131859

Please help,
I’ve tried to search all the forum today and didn’t find any answer for that.
Where do I change the blue color for the top menu. I need as different blue one.

Thank you in advance.

###this is the template css file (modifed to rtl)

/*————————————————————————
# JA Edentite 1.0 – Mar, 2008
# ————————————————————————
# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license – Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com – http://www.joomlancers.com
————————————————————————-*/

/* COMMON STYLE
——————————————————— */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
background: #FFFFFF;
color: #000000;
font-family: “Lucida Grande”, Arial, sans-serif;
line-height: 1.6;
direction:rtl;
}

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

body.contentpane {
color: #000000;
font-size: 12px;
line-height: 1.3em;
margin: 0;
margin: 1em 2em;
width: auto; /* Printable Page */
}

body.fs1 {font-size: 10px;}
body.fs2 {font-size: 11px;}
body.fs3 {font-size: 12px;}
body.fs4 {font-size: 13px;}
body.fs5 {font-size: 14px;}
body.fs6 {font-size: 15px;}

/* Normal link */
a {
color: #2C79B3;
text-decoration: none;
}

a:hover, a:active, a:focus {
color: #2C79B3;
text-decoration: underline;
}

a img {
border: none;
}

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
}

/* Small text */
small, .small, .smalldark, .createby, .createdate, .modifydate, .img_caption,
p.site-slogan, a.readon, #ja-pathway, #ja-headlinewrap, #ja-col1, #ja-col2, #ja-botsl, #ja-footer {
font-size: 92%;
}

small, .small {
color: #858783;
}

img {
margin: 0;
padding: 0;
}

img.caption {
margin-top: 15px;
}

/* Heading */
h1 {font-size: 180%;}
h2 {font-size: 150%;}
h3 {font-size: 125%;}
h4 {font-size: 100%;text-transform: uppercase;}

p, pre, blockquote, ul, h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
padding: 0;
}

ol {
margin:0;
}

ul {
list-style: none;
}

ul li {
background: url(../images/bullet.gif) no-repeat 98% 7px;
line-height: 160%;
padding-right: 30px;
}

ol li {
line-height: 180%;
margin-right:0;
}

th {
font-weight: bold;
padding: 5px;
text-align: right;
}

fieldset {
border: none;
padding: 10px 5px;
}

fieldset a {
font-weight: bold;
}

fieldset.input {
padding: 0;
}

hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid #cccccc;
height: 1px;
}

td, div {
font-size: 100%;
}

/* FORM
——————————————————— */
form {
margin: 0;
padding: 0;
}

form label {
cursor: pointer;
}

input, select, textarea, .inputbox {
font-family: Arial, sans-serif;
font-size: 100%;
}

.inputbox {
border: 1px solid #CCCCCC;
padding: 3px;
color: #515756;
background: #FFFFFF;
}

.button {
font-family: Arial, sans-serif;
padding: 2px 8px;
border: 1px outset #A8A8A8;
background: url(../images/grad4.gif) repeat-x;
font-size: 100%;
color: #515756;
font-weight: bold;
}

* html .button { /*IE 6*/
padding: 1px 5px !important;
}

*+html .button { /*IE 7*/
padding: 1px 5px !important;
}

/* JOOMLA STYLE
——————————————————— */
table.blog {
}

.article_separator {
clear: both;
display: block;
height: 30px;
background: url(../images/dot.gif) repeat-x center;
}

.article_column {
}

.column_separator {
padding: 0 25px;
}

/* content tables */
td.sectiontableheader {
background: url(../images/grad3.gif) repeat-x bottom #A8A8A8;
border: 1px solid #E7E8E6;
padding: 4px;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
background: url(../images/dot.gif) repeat-x bottom;
}

table.contentpane {
border: none;
width: 100%;
}

table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}

table.contenttoc {
margin: 0 10px 10px 0;
padding: 0;
width: 35%;
font-size: 92%;
}

table.contenttoc a {
text-decoration: none;
}

table.contenttoc td {
background: url(../images/bullet.gif) no-repeat 10px 9px;
padding: 1px 20px 1px 5px;
}

table.contenttoc th {
border-bottom: 1px solid #E7E8E6;
padding: 0 0 3px;
text-indent: 5px;
}

table.poll {
border-collapse: collapse;
padding: 0;
width: 100%;
}

table.pollstableborder {
border: none;
padding: 0;
text-align: right;
width: 100%;
}

table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
border-collapse: collapse;
border-spacing: 0;
padding: 4px !important;
background: none;
}

table.pollstableborder tr.sectiontableentry1 td {
background: #F8F8F7;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}

table.searchintro td {
padding: 5px!important;
}

table.adminform {
}

.adminform .inputbox {
}

.blog_more {
}

.blog_more strong {
display: block;
font-size: 125%;
margin: 0 0 5px;
}

.blog_more ul {
margin: 0;
padding: 0;
}

.blog_more ul li {
background: url(../images/bullet.gif) no-repeat 99% 10px;
margin: 0;
padding: 0 17px 0 0;
}

.category {
font-size: 125%;
font-weight: bold;
}

a.category {
float: right;
}

h1.componentheading, .componentheading {
margin: 0 0 10px;
padding: 0 0 5px;
}

.componentheading {
font-size: 160%;
font-weight: normal;
border-bottom: 1px solid #E7E8E6;
}

.contentdescription {
padding-bottom: 30px;
}

h2.contentheading, .contentheading {
font-weight: normal;
margin: 0;
padding: 0;
line-height: normal;
}

.contentheading {
font-size: 150%;
line-height: normal;
color: #2C79B3;
}

table.blog .contentheading {
font-size: 150%;
line-height: normal;
}

#ja-current-content table.contentpaneopen a {
text-decoration: underline;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
}

a.readon {
display: block;
float: right;
text-align: center;
clear: both;
padding: 0 5px;
background: url(../images/grad2-2.gif) repeat-x center #8BAB32;
color: #FFFFFF;
margin-top: 5px;
text-transform: lowercase;
}

a.readon:hover, a.readon:active, a.readon:focus {
background: url(../images/grad2-1.gif) repeat-x center #2C79B3;
color: #FFFFFF;
text-decoration: none;
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}

.moduletable {
padding: 0;
}

ul.pagination {
margin: 15px auto 0;
padding: 0;
}

ul.pagination li {
background: none;
display: inline;
margin: 0;
padding: 0;
}

ul.pagination li span{
padding: 2px 5px;
}

ul.pagination a {
padding: 2px 3px;
text-decoration: none;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
}

.pagenavbar {
background: url(../images/icon-pages.gif) no-repeat center left;
font-weight: bold;
padding-right: 14px;
}

.pagenavcounter {
background: url(../images/icon-pages.gif) no-repeat 0 11px;
font-weight: bold;
padding: 8px 14px 0 14px;
}

.sectiontableheader {
color: #FFFFFF;
font-weight: bold;
padding: 8px 5px;
}

.sectiontableheader a {
color: #FFFFFF;
}

tr.sectiontableentry1 td {
padding: 8px 5px;
}

tr.sectiontableentry2 td {
padding: 8px 5px;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
}

.smalldark {
text-align: right;
}

div.syndicate div {
text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}

/* META
——————————————————— */
.createdate {
color: #858783;
}

.modifydate {
float: right;
width: 100%;
color: #858783;
margin-bottom: 10px;
display: block;
}

div.buttonheading {
float: left;
width: 20%;
}

.buttonheading img {
border: 0;
float: left;
margin: 7px 5px 0 0;
}

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper {
padding: 0 0 40px;
width: 950px;
margin: 0 auto;
}

.narrow #ja-wrapper {
width: 750px;
}

#ja-header,
#ja-mainnav,
#ja-subnav,
#ja-pathway,
#ja-container,
#ja-topsl,
#ja-botsl,
#ja-footer {
clear: both;
}

#ja-container {
border-top: 1px solid #E7E8E6;
border-bottom: 1px solid #E7E8E6;
background: url(../images/main-bg2.gif) repeat-y right;
}

.narrow #ja-container {
background: url(../images/main-bg1-n.gif) repeat-y left;
}

#ja-container2 {
border-bottom: 1px solid #E7E8E6;
background: url(../images/main-bg1.gif) repeat-y left;
}

.narrow #ja-container2 {
background: url(../images/main-bg2-n.gif) repeat-y right;
}

#ja-mainbody {
width: 80%;
float: left;
}

/* PRIMARY COLUMN
——————————————————— */
#ja-content {
clear: both;
display: block;
float: right;
width: 75%;
}

#ja-current-content {
padding: 10px 15px;
}

/* COLUMNS
——————————————————— */
#ja-col1 {
float: right;
overflow: hidden;
width: 20%;
color: #626A69;
}

#ja-col2 {
float: left;
overflow: hidden;
width: 25%;
color: #626A69;
}

/*common style for column*/
#ja-colwrap a {
}

#ja-colwrap a:hover, #ja-colwrap a:active, #ja-colwrap a:focus {
}

#ja-colwrap table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-colwrap .article_separator {
display: none;
}

/* COLLAPSIBLE LAYOUT
——————————————————— */
#ja-containerwrap,
#ja-containerwrap-f,
#ja-containerwrap-fr,
#ja-containerwrap-fl {
padding: 0;
margin: 25px 0;
background: url(../images/grad1.gif) repeat-x bottom #FFFFFF;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
width: 100%;
}

#ja-containerwrap-f #ja-content {
width: 100%;
}

#ja-containerwrap-f #ja-container,
#ja-containerwrap-f #ja-container2 {
background: none;
}

#ja-containerwrap-f #ja-container {
border: 1px solid #E7E8E6;
}

/*content + left*/
#ja-containerwrap-fr #ja-content {
width: 100%;
}

#ja-containerwrap-fr #ja-container2 {
background: none;
}

#ja-containerwrap-fr #ja-container2 {
border-left: 1px solid #E7E8E6;
}

/*content + right*/
#ja-containerwrap-fl #ja-mainbody {
width: 100%;
}

#ja-containerwrap-fl #ja-content {
width: 79.9%;
}

#ja-containerwrap-fl #ja-col2 {
width: 20%;
}

#ja-containerwrap-fl #ja-container {
background: none;
border-right: 1px solid #E7E8E6;
}

/* MODULE
——————————————————— */
div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3,
div.moduletable_hilite h3 {
font-size: 110%;
margin: 0 -10px 5px;
padding: 5px 10px;
background: url(../images/grad3.gif) repeat-x bottom #A8A8A8;
border-bottom: 1px solid #E7E8E6;
color: #FFFFFF;
text-align:right;
}

div.moduletable div.moduletable h3 {
font-size: 110%;
margin: 0 -20px 5px;
padding: 5px 10px;
background: url(../images/grad3.gif) repeat-x bottom #A8A8A8;
border-bottom: 1px solid #E7E8E6;
color: #FFFFFF;
text-align:right;
}

div.moduletable,
div.moduletable_menu,
div.moduletable_text,
div.moduletable_hilite {
margin: 0;
padding: 0 10px 10px;
}

#ja-botsl div.moduletable,
#ja-botsl div.moduletable_menu,
#ja-botsl div.moduletable_text {
border-bottom: none;
}

/* mis */
div.banneritem_text {
padding: 5px 0 !important;
}

div.advs {
clear: both;
display: block;
float: right;
width: 100%;
}

div.moduletable ul,
div.moduletable_text ul,
div.moduletable_menu ul,
div.moduletable_hilte ul {
margin: 0;
padding: 0;
}

div.moduletable li,
div.moduletable_text li,
div.moduletable_menu li,
div.moduletable_hilite li {
background: url(../images/bullet.gif) no-repeat 98% 8px;
margin: 0;
padding-right: 16px;
}

/* Hilite */
div.moduletable_hilite h3 {
background: url(../images/grad2.gif) repeat-x bottom #2C79B3;
}

/* HEADER
——————————————————— */
#ja-header {
height: 80px;
line-height: normal;
position: relative;
}

#ja-header a {
}

h1.logo, h1.logo-text {
margin: 0;
padding: 0;
font-size: 200%;
}

h1.logo a {
width: 435px;
display: block;
background: url(../images/logo.gif) no-repeat;
position: absolute;
height: 42px;
bottom: 10px;
right: 0;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
text-decoration: none;
outline: none;
position: absolute;
bottom: 35px;
right: 15px;
}

p.site-slogan {
margin: 0;
padding: 0;
color: #858783;
position: absolute;
bottom: 20px;
right: 15px;
}

/* MAIN NAVIGATION
——————————————————— */
#ja-mainnavwrap {
background: url(../images/shadow.gif) repeat-x bottom;
height: 37px;
position: relative;
z-index: 999;
}

#ja-mainnav {
background: url(../images/grad2.gif) repeat-x top #2C79B3;
height: 32px;
}

#ja-mainnav a, #ja-subnav a {
outline: none;
}

#ja-cssmenu li.havesubchild,
#ja-cssmenu li.havesubchild-active {
background: url(../images_rtl/arrow3.png) no-repeat 5% 50%;
}

#ja-subnav {
display: block;
font-size: 92%;
border-bottom: 1px solid #E7E8E6;
height: 28px;
}

#ja-subnav ul {
margin: 0;
padding: 0;
}

#ja-subnav li {
background: none;
display: inline;
margin: 0;
padding: 0;
}

#ja-subnav li a {
display: block;
float: right;
padding: 0 15px;
line-height: 28px;
background: url(../images/vline.gif) no-repeat center right;
}

#ja-subnav li.active a,
#ja-subnav li.active a:hover,
#ja-subnav li.active a:active,
#ja-subnav li.active a:focus {
font-weight: bold;
color: #8BAB32;
}

#ja-subnav li a.first-item {
background: none;
}

/* breadcrumbs */
#ja-pathway {
border: 1px solid #E7E8E6;
padding: 5px 15px;
color: #626A69;
font-weight: bold;
background: #F8F8F7;
margin-top: 25px;
}

#ja-pathway strong {
margin-left: 5px;
}

#ja-pathway a {
color: #626A69;
font-weight: normal;
}

#ja-pathway img {
margin: 1px 5px;
}

/* Default Joomla! Menu */
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}

ul.menu li {
background: none;
margin: 0;
padding: 0;
}

ul.menu li a {
display: block;
outline: none;
padding: 6px 4px;
color: #626A69;
border-bottom: 1px solid #E7E8E6;
background: url(../images_rtl/arrow.png) no-repeat 0 center;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
color: #2C79B3;
background: url(../images_rtl/arrow2.png) no-repeat 0 center;
}

ul.menu li.active a {
color: #2C79B3;
font-weight: bold;
}

ul.menu li ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.menu li li a {
background: url(../images/bullet.gif) no-repeat 96% 13px !important;
border: none;
font-weight: normal !important;
padding-right: 20px !important;
width: 75%; /*need for ie6 transparent*/
}

ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
background: none;
}

/* SPOTLIGHT
——————————————————— */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: right;
overflow: hidden;
}

.ja-box-left, .ja-box-center {
background: url(../images/vline2.gif) repeat-y top left;
}

/* Top spotlight */
#ja-topsl {
height: 240px;
margin: 0 0 10px;
}

* html #ja-topsl { /*IE 6*/
margin: 0 1px 10px 0 !important;
width: 568px;
overflow: hidden;
float:right;
}

*+html #ja-topsl { /*IE 7*/
margin: 0 0 10px !important;
}

/* Bot spotlight */
#ja-botsl {
border: 1px solid #E7E8E6;
border-top: none;
background: url(../images/grad1.gif) repeat-x top #F8F8F7;
color: #626A69;
padding: 10px 0;
}

#ja-botsl h3 {
color: #626A69;
font-size: 100%;
background: none;
border: none;
margin-bottom: 0;
}

#ja-botsl div.moduletable {
padding: 0 15px;
}

#ja-botsl ul, #ja-botsl ol {
margin: 0;
padding: 0;
}

#ja-botsl ol li {
margin: 0 20px 0 0;
padding: 0;
}

#ja-botsl ul li {
margin: 0;
padding: 0 15px 0 0;
background: url(../images/bullet.gif) no-repeat right 7px;
}

#ja-botsl a {
color: #626A69;
}

#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
}

/* FOOTER
——————————————————— */
#ja-footer {
color: #626A69;
padding: 20px 0 0;
position: relative;
text-align: center;
border-top: 1px solid #E7E8E6;
}

#ja-footer small {
color: #858783;
font-size: 100%;
}

#ja-footer ul {
margin: 0 0 8px;
padding: 0;
line-height: normal;
}

#ja-footer li {
display: inline;
margin: 0;
padding: 0;
background: url(../images/vline.gif) no-repeat center left;
}

#ja-footer li a {
display: inline;
line-height: normal;
padding: 0 15px;
}

li.ja-firstitem {
background: none !important;
}

.ja-footurl {
float: none;
clear: both;
}

/* MISCELLANOUS
———————————————————– */
ul.accessibility {
position: absolute;
top: -100%;
}

/* Search */
#ja-search {
bottom: 12px;
left: 10px;
position: absolute;
font-size: 11px;
}

#ja-search .inputbox {
padding: 2px 22px 2px 0;
background: url(../images/icon-search.gif) no-repeat 98% center #FFFFFF;
border: 1px solid #E7E8E6;
}

/* Login Form */
#ja-login {
position: absolute;
top: 15px;
left: 0;
background: url(../images/grad4.gif) repeat-x bottom #F8F8F7;
padding: 4px 8px;
border: 1px solid #E7E8E6;
border-bottom: 1px solid #CCCCCC;
width:360px;
}

#ja-login form {
float: left;
width:360px;
}

#ja-login form label {
clear:none;
width:145px;
}

label.ja-login-user span {
display: block;
float: right;
text-indent: -450px;
background: url(../images/icon-user.gif) no-repeat center left;
width: 20px;
height: 20px;
color:#FFFFFF;
margin-left:5px;
}

label.ja-login-password span {
display: block;
float: right;
text-indent: -600px;
background: url(../images/icon-key.gif) no-repeat center left;
width: 20px;
height: 20px;
color:#FFFFFF;
margin-left:5px;
}

#ja-login form input.button {
font-size: 11px !important;
/*float: left;*/
}

#ja-login form #mod_login_username,
#ja-login form #mod_login_password {
width: 110px;
margin: 1px 0 0 8px;
font-size: 11px !important;
padding: 2px;
float: right;
}

#ja-login form a {
color: #858783;
padding: 0 5px;
text-decoration: none;
font-size: 10px;
}

#ja-login form a:hover,
#ja-login form a:active,
#ja-login form a:focus {
color: #858783;
text-decoration: underline;
}

.ja-login-links {
padding-top: 2px;
clear: both;
}

/*others*/
.mostread, .latestnews {
text-decoration: none;
}

#ja-banner {
margin: 0 0 15px;
text-align: center;
overflow: hidden;
width: 100%;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
background: none!important;
display: block;
margin: 10px 0;
text-decoration: none!important;
}

.clr {
clear: both;
}

.hasTip img {
border: none;
margin: 10px 0 0 5px;
}

div.ja-innerdiv {
clear: both;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #E7E8E6;
}

div.ja-innerdiv img {
padding: 2px;
border: 1px solid #E7E8E6;
margin: 2px 0 0 8px;
}

/* Tooltips */
.tool-tip {
background: #FFFFFF;
border: 1px solid #cccccc;
float: right;
max-width: 200px;
padding: 5px;
}

.tool-title {
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
margin: 0;
margin-top: -15px;
padding: 0;
padding-bottom: 5px;
padding-top: 15px;
}

.tool-text {
font-size: 100%;
margin: 0;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
margin: 0;
padding: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
color: #FFFFFF;
margin: 0;
padding: 5px;
}

/* System Standard Messages */
#system-message dd.message ul {
background: #626A69;
border: none;
}

/* System Error Messages */
#system-message dd.error ul {
background: #626A69;
border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
background: #626A69;
border: none;
}

/* Clearfix */
.clearfix:after {
clear: both;
content: “.”;
display: block;
height: 0;
visibility: hidden;
}

* html > body .clearfix {
display: block;
width: 100%;
}

* html .clearfix {
height: 1%;
}

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#264115

Hi….

Actually there are two things you need to do as :

1. Change your CSS Code, and
2. Change a gradient image file.

These two combine create the sweet rollover effect.
Here’s the area you are needing to work in:

template.css line 751


#ja-mainnav {
background:#2C99B3 url(../images/grad2.gif) repeat-x scroll center top;
height:32px;
}


Basically you want to first create the gradient image to your liking as this is what is seen when not in rollover state. Then, set the #xxxxxx code to that of the darkest shade of your gradient…and that’s it.

The above code is applicable to the DEFAULT color setting of the template (the blue one). If you have set either the RED or ORANGE as your default color…then your “/images/gradX.gif” file will be different. So if you make the above changes, save them…and then don’t notice a difference…it’s probably because your template has another color set as it’s default.

Have fun!
John.

3 users say Thank You to John Wesley Brett for this useful post

1. nmoyal
2. kroc
3. nilsson69

[Author]

Posts