Joomla Templates Club 406,261 posts

[GaryMoore Friend GaryMooreJoin date: December 2005Posts: 40Downloads:0Uploads:0 Thanks: 6]

#119498

First of all – I love this template (especially with the new version II mod’s) – it almost a perfect solution for what I was looking for in a template for a non-profit org being created. The only nagging differece is the color scheme.

The organazation already has a defined brand around certain colors. How difficult would it be for a Joomla novice (like me) to modify the color pallet of this template.

thanks

-gary

[Hung Dinh Friend Hung DinhJoin date: September 2014Posts: 4408Downloads:11Uploads:189 Thanks: 309 Thanked: 3310 times in 3 posts]

#217122

It is not too difficult to customize the color.
1. The color css files are put seperately and you can just change color codes in the color css file
Below is the css of Utahia II – the dark color (template/ja_utahia_ii/css/colors/dark.css)

/*------------------------------------------------------------------------
# JA Utahia 1.0 - Mar, 2007
# ------------------------------------------------------------------------
# Copyright (C) 2004-2007 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
--------------------------------------------------------- */
body#bd {
color: #F3F5F5;
background: #2C3336;
}

a {
color: #18B8DF;
}

a:hover, a:active, a:focus {
color: #F3F5F5;
}

h1, h2, h3, h4, h5, h6 {
color: #F3F5F5;
}

hr {
border-top: 2px solid #4A575C;
}

select, textarea, .inputbox {
background: #2C3336;
color: #F3F5F5;
}

.button, .button:hover {
background: url(../../images/dark/but-bg.gif) repeat-x center #18B8DF;
border: 1px solid #161A1B;
}

.inputbox {
border: 2px solid #4A575C;
}

.inputbox:hover, .inputbox:focus {
border-color: #71848C;
background: #23292b;
}

div.moduletable h3 {
color: #18B8DF;
}

table.contenttoc th {
background: url(../../images/dark/but-bg.gif) repeat-x center #18B8DF;
}

.blog_more {
background: url(../../images/dark/seperator.gif) no-repeat top left;
}

.blog_more strong {
color: #2C3336;
}

.componentheading {
color: #F3F5F5;
background: url(../../images/dark/seperator.gif) no-repeat bottom left;
}

.contentheading {
color: #F3F5F5;
}

.createdate,
.modifydate,
.mosimage_caption,
.small,
.smalldark {
color: #71848C;
}

.sectiontableheader {
background: url(../../images/dark/but-bg.gif) repeat-x center #18B8DF;
}

tr.sectiontableentry1 td {
background: #2C3336;
border-bottom: 2px solid #3F494E;
}

tr.sectiontableentry2 td {
background: #2C3336;
border-bottom: 2px solid #3F494E;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: #23292B;
}

ul.checklist li {
background: url(../../images/dark/checklist-bg.gif) no-repeat top left;
}

.error {
color: #FF4B63 ;
background: url(../../images/dark/bullet-error.gif) no-repeat center left;
}

.message {
background: url(../../images/dark/bullet-info.gif) no-repeat center left;
}

.tips {
color: #FF9900 !important;
background: url(../../images/dark/bullet-tips.gif) no-repeat center left;
}

div.module-blue a,
div.module-hot a,
div.module-natural a,
div.module-hilite a {
color: #F3F5F5;
}

div.module {
background: url(../../images/dark/box-tl.gif) no-repeat top left;
}

div.module h3 {
color: #18B8DF;
}

div.module-fresh {
background: url(../../images/dark/box-fresh-br.gif) no-repeat bottom right;
}

div.module-fresh div {
background: url(../../images/dark/box-fresh-bl.gif) no-repeat bottom left;
}

div.module-fresh div div {
background: url(../../images/dark/box-fresh-tr.gif) no-repeat top right;
}

div.module-fresh div div div {
background: url(../../images/dark/box-fresh-tl.gif) no-repeat top left;
}

div.module-hot {
background: url(../../images/dark/box-hot-br.gif) no-repeat bottom right #CF3020;
}

div.module-hot div {
background: url(../../images/dark/box-hot-bl.gif) no-repeat bottom left;
}

div.module-hot div div {
background: url(../../images/dark/box-hot-tr.gif) no-repeat top right;
}

div.module-hot div div div {
background: url(../../images/dark/box-hot-tl.gif) no-repeat top left;
}

div.module-natural {
background: url(../../images/dark/box-natural-br.gif) no-repeat bottom right;
}

div.module-natural div {
background: url(../../images/dark/box-natural-bl.gif) no-repeat bottom left;
}

div.module-natural div div {
background: url(../../images/dark/box-natural-tr.gif) no-repeat top right;
}

div.module-natural div div div {
background: url(../../images/dark/box-natural-tl.gif) no-repeat top left;
}

#ja-containerwrap {
background: url(../../images/dark/containerwrap-bg.gif) repeat-x #2C3336;
}

div.module-hilite {
background: url(../../images/dark/box-hilite-br.gif) no-repeat bottom right #18B8DF;
}

div.module-hilite div {
background: url(../../images/dark/box-hilite-bl.gif) no-repeat bottom left;
}

div.module-hilite div div {
background: url(../../images/dark/box-hilite-tr.gif) no-repeat top right;
}

div.module-hilite div div div {
background: url(../../images/dark/box-hilite-tl.gif) no-repeat top left;
}

#ja-container, #ja-container-fr {
background: url(../../images/dark/container-bg.gif) no-repeat 20% 0% #2C3336;
}

#ja-container-f {
background: #2C3336;
}

#ja-headerwrap {
background: url(../../images/dark/header-bg.gif) repeat-x bottom #161A1B;
}

#ja-mainnavwrap {
background: url(../../images/dark/mainnavwrap-bg.gif) repeat-x top #18B8DF;
border-top: 1px solid #009DCB;
border-bottom: 1px solid #161A1B;
}

#ja-mainnav {
background: url(../../images/dark/mainnav-bg.gif) no-repeat 20% 0% #18B8DF;
}

a.mainlevel {
color: #F3F5F5;
}

a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus {
color: #F3F5F5;
border: 2px solid #4A575C;
background: #23292B;
}

a.mainlevel#active_menu {
background: #18B8DF;
border: 2px solid #18B8DF;
}

a.sublevel {
background: url(../../images/dark/bullet-list.gif) no-repeat 3% 55%;
}

#active_menu {
color: #18B8DF;
}

#ja-topslwrap {
background: #18B8DF;
}

#ja-topsl {
background: url(../../images/dark/topsl-bg.gif) repeat-y 20% 0% #18B8DF;
}

#ja-botslwrap2 {
background: url(../../images/dark/botsl-right-bg.gif) no-repeat top right;
}

#ja-botsl {
background: url(../../images/dark/botsl-left-bg.gif) no-repeat top left;
}

#ja-botsl div.ja-box-left,
#ja-botsl div.ja-box-center {
background: url(../../images/dark/botsl-vseperator.gif) no-repeat center right;
}

#ja-botsl div.moduletable {
color: #71848C;
}

#ja-botsl h3 {
color: #71848C;
}

#ja-pathwaywrap {
background: url(../../images/dark/pathwayleft-bg.gif) no-repeat bottom left;
}

#ja-pathway {
background: url(../../images/dark/pathwayright-bg.gif) no-repeat bottom right #2C3336;
}

#ja-footerwrap {
border-top: 2px solid #18B8DF;
background: #161A1B;
}

#ja-footer {
color: #71848C;
background-image: url(../../images/dark/sublogo.gif)
}

#ja-footer a {
color: #71848C;
}

#ja-footer a:hover,
#ja-footer a:active,
#ja-footer a:focus {
color: #F3F5F5;
}

div.gradline {
background: url(../../images/dark/grad-line.gif) repeat-y 80% 0% #4A575C;
border-top: 1px solid #23292B;
border-bottom: 1px solid #23292B;
}

/* BONUS TYPO
--------------------------------------------------------- */
pre, .code {
background: url(../../images/dark/tp-code.gif) no-repeat top left #3F494E;
}

/* Quote */
blockquote {
background: url(../../images/dark/quote.gif) 15px 5px no-repeat;
}

div.blockquote {
background: url(../../images/dark/quote-right.gif) no-repeat bottom right;
}

.dropcap,
.message,
.tips {
color: #18B8DF;
}

.highlight {
border: 1px dotted #18B8DF;
background: #3F494E;
}

p.stickynote {
background: url(../../images/dark/sticky-bg.gif) no-repeat top right #3F494E;
}

p.pinnote {
background: url(../../images/dark/pin-bg.gif) no-repeat top right #3F494E;
}

p.clipnote {
background: url(../../images/dark/clip-bg.gif) no-repeat top right #3F494E;
}

ul.checklist li {
background: url(../../images/dark/checklist-bg.gif) no-repeat top left;
}

.bignumber {
background: url(../../images/dark/ol-bg.gif) no-repeat top left;
}

div.bubble1 div {
background: url(../../images/dark/bub-br-bg.gif) no-repeat bottom right;
}

div.bubble1 div div {
background: url(../../images/dark/bub-bl-bg.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../../images/dark/bub-tr-bg.gif) no-repeat top right;
}

div.bubble1 div div div div {
background: url(../../images/dark/bub-tl-bg.gif) no-repeat top left;
}

div.bubble2 {
background: url(../../images/dark/bub-arrow-bg.gif) no-repeat bottom left;
}

div.bubble2 div {
border-color: #5C6B71;
background-color: #3F494E;
}

div.bubble3 div {
background: url(../../images/dark/bub2-br-bg.gif) no-repeat bottom right;
}

div.bubble3 div div {
background: url(../../images/dark/bub2-bl-bg.gif) no-repeat bottom left;
}

div.bubble3 div div div {
background: url(../../images/dark/bub2-tr-bg.gif) no-repeat top right;
}

div.bubble3 div div div div {
background: url(../../images/dark/bub2-tl-bg.gif) no-repeat top left;
}

div.bubble4 {
background: url(../../images/dark/bub2-arrow-bg.gif) no-repeat bottom left;
}

div.bubble4 div {
border-color: #5C6B71;
background-color: #3F494E;
}

a.but-download {
background: url(../../images/dark/download-right-bg.gif) no-repeat top right #18B8DF;
}

span.download {
background: url(../../images/dark/download-left-bg.gif) no-repeat top left;
}

span.download span {
color: #D2D2D2;
}

a.but-signup {
background: url(../../images/dark/signup-right-bg.gif) no-repeat top right #18B8DF;
}

a.but-signup:hover span.signup strong {
color: #FFFF66;
}

span.signup {
background: url(../../images/dark/signup-left-bg.gif) no-repeat top left;
}

span.signup span {
color: #D2D2D2;
}

.cb a {
background: url(../images/dark/mainnav-sep.gif) no-repeat top right;
}

a.ja-ob {
background: url(../../images/dark/ob.gif) no-repeat top right;
}

a.ja-ob:hover, a.ja-ob:active, a.ja-ob:focus {
background: url(../../images/dark/ob-on.gif) no-repeat top right;
}

a.ja-cb {
background: url(../../images/dark/cb.gif) no-repeat top right;
}

a.ja-cb:hover, a.ja-cb:active, a.ja-cb:focus {
background: url(../../images/dark/cb-on.gif) no-repeat top right;
}

#ja-mainnav-left div.search .inputbox {
background: url(../../images/dark/icon-search.gif) no-repeat 95% 50% #009DCB;
width: 90%;
border: 2px solid #1BD1FD;
}

#ja-mainnav-left div.search .inputbox:hover,
#ja-mainnav-left div.search .inputbox:focus {
background-color: #0089AB;
border: 2px solid #1BD1FD;
}

.pagenavbar {
background: url(../../images/dark/pages.gif) no-repeat center left;
}

.pagenavcounter {
background: url(../../images/dark/pages.gif) no-repeat 0 11px;
}

table.contenttoc td {
background: url(../../images/dark/bullet-list.gif) no-repeat 3% 50%;
}

/* SPLIT MENU
--------------------------------------------------------- */
#ja-splitmenu a {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right !important;
}

#ja-splitmenu a:hover,
#ja-splitmenu a:active,
#ja-splitmenu a:focus {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right #18B8DF !important;
}

#ja-splitmenu li.active a,
#ja-splitmenu li.active a:hover,
#ja-splitmenu li.active a:active,
#ja-splitmenu li.active a:focus {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

#ja-subnav a {
background: url(../../images/dark/submenu-bg.gif) repeat-x center left #51BFD9 !important;
border: 1px solid #23292B !important;
}

#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
background: url(../../images/dark/submenu-hover-bg.gif) repeat-x center left #66BD64 !important;
}

#ja-subnav li.active a,
#ja-subnav li.active a:hover,
#ja-subnav li.active a:active,
#ja-subnav li.active a:focus {
background: url(../../images/dark/submenu-active-bg.gif) repeat-x center left #CF3020 !important;
}

/* SOSD MENU
--------------------------------------------------------- */
#ja-cssmenu li ul {
border-top: 1px solid #4A575C !important;
border-right: 1px solid #161A1B !important;
border-bottom: 1px solid #161A1B !important;
border-left: 1px solid #4A575C !important;
background: #18B8DF !important;
}

#ja-cssmenu li ul li {
border-top: 1px solid #009DCB !important;
}

#ja-cssmenu li a {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right !important;
}

#ja-cssmenu li li a {
background: none !important;
}

#ja-cssmenu li li a.active {
background: none !important;
}

#ja-cssmenu li a.active {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

#ja-cssmenu ul li:hover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #1BD1FD !important;
}

#ja-cssmenu li:hover,
#ja-cssmenu li.sfhover,
#ja-cssmenu li.havechildsfhover,
#ja-cssmenu li.havechild-activesfhover,
#ja-cssmenu li:hover a.first-item,
#ja-cssmenu li.sfhover a.first-item,
#ja-cssmenu li.havechildsfhover a.first-item,
#ja-cssmenu li.havechild-activesfhover a.first-item {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right #18B8DF !important;
}

#ja-cssmenu li a.active-first-item {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

/* TRANSMENU
---------------------------------------------------------*/
.transMenu .background {
background-color: #18B8DF !important;
}

.transMenu .item.hover {
background: #18B8DF !important;
}

.transMenu .item#active,
.transMenu .item#active:hover {
background: #18B8DF !important;
}

#ja-transmenu li a {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right !important;
}

#ja-transmenu a.havechild-mainlevel-active-trans,
#ja-transmenu a.havechild-mainlevel-active-trans:hover,
#ja-transmenu a.havechild-mainlevel-active-trans:active,
#ja-transmenu a.havechild-mainlevel-active-trans:focus {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

#ja-transmenu a.jahover {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right #18B8DF !important;
}

#ja-transmenu a.jahover-active {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

#ja-transmenu a.mainlevel-trans:hover,
#ja-transmenu a.mainlevel-trans:active,
#ja-transmenu a.mainlevel-trans:focus {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right #18B8DF !important;
}

#ja-transmenu a.mainlevel-active-trans,
#ja-transmenu a.mainlevel-active-trans:hover,
#ja-transmenu a.mainlevel-active-trans:active,
#ja-transmenu a.mainlevel-active-trans:focus {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

/* First item */
#ja-transmenu a.havechild-mainlevel-active-trans-first,
#ja-transmenu a.havechild-mainlevel-active-trans-first:hover,
#ja-transmenu a.havechild-mainlevel-active-trans-first:active,
#ja-transmenu a.havechild-mainlevel-active-trans-first:focus,
#ja-transmenu a.mainlevel-active-trans-first,
#ja-transmenu a.mainlevel-active-trans-first:hover,
#ja-transmenu a.mainlevel-active-trans-first:active,
#ja-transmenu a.mainlevel-active-trans-first:focus {
background: url(../../images/dark/mainnav-active-bg.gif) no-repeat top right #18B8DF !important;
}

#ja-transmenu a.havechild-mainlevel-trans-first:hover,
#ja-transmenu a.havechild-mainlevel-trans-first:active,
#ja-transmenu a.havechild-mainlevel-trans-first:focus,
#ja-transmenu a.mainlevel-trans-first:hover,
#ja-transmenu a.mainlevel-trans-first:active,
#ja-transmenu a.mainlevel-trans-first:focus {
background: url(../../images/dark/mainnav-sep.gif) no-repeat top right #18B8DF !important;
}

2. Changing some background images/logos to match your colors. The sliced PSD is provided in the download area.

[Author]

Posts