Joomla Templates Club 406,261 posts

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#169178

Since I’m almost done with my site, I hope this is one of my last questions (all of you can have some well deserved rest then! 😉

Can I customize the color in the JA Rave template (if yes, how?)? I’m using the default/dark red color now, but like it to be bright red or bright blue (so to match with the logo). I had a search through the forum and the userguide but didn’t find anything about it.

Greetings!

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#416091

Hi

You can customize the relative theme css

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#416093

In your /templates/Ja_rave/core/themes/ you have the css and images for the themes
You can customize that files

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

#416106

<em>@arckoo 271973 wrote:</em><blockquote>Since I’m almost done with my site, I hope this is one of my last questions (all of you can have some well deserved rest then! 😉

Can I customize the color in the JA Rave template (if yes, how?)? I’m using the default/dark red color now, but like it to be bright red or bright blue (so to match with the logo). I had a search through the forum and the userguide but didn’t find anything about it.

Greetings!</blockquote>

You could create your own color theme from scratch – along with all of the relative css files and such.

HOWEVER, I think the EASIEST way to go about this would be to simply modify one of the existing color themes itself by going through each line and changing the current color code to whatever you want.

It WILL take some trial-and-error, but it’s certainly a bit more easy than trying to re-invent the wheel.

Make sense?

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#416111

Thanks Tom and pavit. If you help me more I might have to consider a special thank-you page on my site 😛

I’m with the both of you: modifying an existing color theme is easiest and will do the trick just fine. I see now that I haven’t been quite specific in my question though. The only color I want to change is the (now) dark red color in the menu (which changes to white when you move the cursor over it). The white is fine, but the dark red I want to change into the blue which I used in my logo.

Could you tell me in which file I have to do this?

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

#416113

<em>@arckoo 271994 wrote:</em><blockquote>
Could you tell me in which file I have to do this?</blockquote>
Absolutely . . . but will need the url to your site – as well as need you to temporarily set “Optimize CSS” to “No” within your Template Manager.

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#416119

the url is: http://www.dierenbevrijding.nl/3dayz
I just set ‘Optimize CSS’ to ‘No’

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

#416127

Within file path templates/ja_rave/css/menu . . . open mega.css

starting at line 54, you will see the following:


.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 right top;
color: #fff;
padding: 0px 20px 0px 15px;
}

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


If you look at the “background” parameter, you will see the reference to the images that are being called upon for both the active and hover state for the menu items. You simply modify those images (with whatever image program you use (e.g. Photoshop)) and either overwrite the original images or name them something unique and modify the image path for the background parameter accordingly.

Incidentally … not to push you off of asking further questions, but here are a couple of resources a pretty cool dude put together that can assist you in identifying (and even real-time testing of various modifications) as you continue to work with your site . . .

WEB DEVELOPMENT TOO ESSENTIALS – Design Like A Pro[/url]

[URL=http://www.joomlart.com/forums/topic/using-firebug-to-customize-your-site/

1 user says Thank You to TomC for this useful post

1. arckoo

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#416139

Thanks a lot man! And nicely done with the menu. I thought I just had to change some color codes. Pretty cool how the image isn’t transparent, but the text seems to come through anyway. And most of the times when changing colors on an image like that it doesn’t look good at all (e.g. most of the times you can see an amateur has been busy with it), but I’m happy to say: not in this case!

I’m gonna save the original images – which can always come in handy again – so I will just rename the news ones I make.

Thanks also for the two links… pretty cool dude haha I had a quick look through it and already saw some interesting stuff (notepad++ for example). Since it’s almost 1.30am and I have to work tomorrow (starting at 7am) I’m gonna call it a day, but thanks again for helping me out Tom… especially with this one!

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

#416141

<em>@arckoo 272024 wrote:</em><blockquote>
Thanks also for the two links… pretty cool dude haha I had a quick look through it and already saw some interesting stuff (notepad++ for example). Since it’s almost 1.30am and I have to work tomorrow (starting at 7am) I’m gonna call it a day, but thanks again for helping me out Tom… especially with this one!</blockquote>
As always … my pleasure.

Sleep well !!!

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#416142

Since it didn’t seem as too much work I thought I’d just finish it 😉

It works very well, except that I can’t manage to change the color of the dark red line under the menu. I figured that would be ‘mainnav-bg.png’ which I then had to change in template.css (since I’m working with new image-names) but that didn’t do the trick. Any suggestions?

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

#416143

<em>@arckoo 272027 wrote:</em><blockquote>Since it didn’t seem as too much work I thought I’d just finish it 😉

It works very well, except that I can’t manage to change the color of the dark red line under the menu. I figured that would be ‘mainnav-bg.png’ which I then had to change in template.css (since I’m working with new image-names) but that didn’t do the trick. Any suggestions?</blockquote>
Seems you just put a username/password block on your site.
If you send me the access via private message, I’ll take a further look.

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#416144

Sorry… you should be able to have full access again now

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

#416145

<em>@arckoo 272027 wrote:</em><blockquote>
It works very well, except that I can’t manage to change the color of the dark red line under the menu. I figured that would be ‘mainnav-bg.png’ which I then had to change in template.css (since I’m working with new image-names) but that didn’t do the trick. Any suggestions?</blockquote>
Actually, you are correct about that being the image … but how did you try to change it?


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


1 user says Thank You to TomC for this useful post

1. arckoo

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#416148

In the same way I changed the other images from the menu. I adjust the image to my needs in photoshop elements 8, save it as ‘mainnav-bgtest.png’. Then I go to template.css and change ‘../images/mainnav-bg.png’ to ‘../images/mainnav-bgtest.png’. Then I refresh my files in Filezilla, upload the image to ‘../templates/ja_rave/images’ and template.css to ‘../templates/ja_rave/css’ and last but not least I refresh the frontend of my site.

Could it have something to do with the fact that there’s also an image with the name ‘mainnav-bg.gif‘?

[Author]

Posts