Emerald in blue?

Is there a simple way to change the overall color scheme of the emerald template from green to blue? Its a great template but clashes with my blue-themed site!

Also can someone point me to a way in CSS to expand the read and list columns...they are a bit compact and I want to 'widen' it a bit....

Step one:

Read over css.tpl and settings.tpl, in the emerald templates dir., what you want for colors is probably in settings.tpl

Then save copies and change a few things that look right to you.

This might also help you. Get firefox and install colorzilla or firebug addon, use them to find out the class, id, name etc of the elements that need changing, then go to the above .tpls and change them. You can also see the hex representation of the colors with colorzilla and then find the matches in the settings.tpl, then change to what you want. it is simple.



Edited 2 time(s). Last edit at 12/13/2007 05:56PM by fmon.

Additionally, you might want to start from the lightweight template, which is emerald without the graphics. Otherwise you could change some color but not see it because a background image is used. If you want icons, then go over the css and find cases where url(...) is used as a background. Make those elements use only a color or replace the related images to be in blue.

---

Maurice Makaay
Phorum Development Team
my blog linkedin profile secret sauce

The color scheme module works wonders for this, even builds gradient images quite nicely.
[www.phorum.org]

I too am running a blue version of emerald, as well as a purple/red one.

Thanks. I can't get the Color Scheme module to work on my phorum, for some reason....

my switch to 5.2 is almost entirely driven by my liking of Emerald. but i needed a blue version too and i want minimal changes from the distribution version of Phorum so...

in templates/emerald/settings.tpl i just swap the G and B colour channels:

diff emerald/settings.tpl blueemerald/settings.tpl
16c16
< {VAR gauge_image "templates/emerald/images/gauge.gif"}
---
> {VAR gauge_image "templates/blueemerald/images/gauge.gif"}
35c35
< {! -- colors -- }
---
> {! -- colors -- swapped B & G channels over -- Piers -- }
39c39
< {VAR alt_background_color "#edf2ed"} {! -- should compliment default_background_color -- }
---
> {VAR alt_background_color "#ededf2"} {! -- should compliment default_background_color -- }
41c41
< {VAR border_color "#4d894d"}
---
> {VAR border_color "#4d4d89"}
45,47c45,47
< {VAR pre_background_color "#FEFFEC"}
< {VAR link_color "#355F35"}
< {VAR link_hover_color "#709CCC"}
---
> {VAR pre_background_color "#FFFBE7"}
> {VAR link_color "#35355F"}
> {VAR link_hover_color "#70CC9C"}
49c49
< {VAR logo_background_color "#78ad78"}
---
> {VAR logo_background_color "#7878ad"}
51,53c51,53
< {VAR post_moderation_background_color "#fffdf6"}
< {VAR information_border_color "#62a762"}
< {VAR information_background_color "#e6ffe6"}
---
> {VAR post_moderation_background_color "#fff6fd"}
> {VAR information_border_color "#6262a7"}
> {VAR information_background_color "#e6e6ff"}
56c56
< {VAR span_addition_background_color "#CBFFCB"}
---
> {VAR span_addition_background_color "#CBCBFF"}
62,64c62,64
< {VAR header_background_image "templates/emerald/images/header_background.png"}
< {VAR top_background_image "templates/emerald/images/top_background.png"}
< {VAR message_background_image "templates/emerald/images/message_background.png"}
---
> {VAR header_background_image "templates/blueemerald/images/header_background.png"}
> {VAR top_background_image "templates/blueemerald/images/top_background.png"}
> {VAR message_background_image "templates/blueemerald/images/message_background.png"}

note that i also had to fiddle with 3 files there too in order to get everything looking sweet

I had created template both in blue and rustic color just by changing color in settings.tpl which is pretty much all you need to do to change colors if you want to leave everything else like link or username location or div size etc the same.

You can see my Sapphire (blue) Template at [www.lakestockton.com] or in Rustic Template at [www.findmall.com] and both colors and background images was only changed in settings.tpl the rest was change in other templates since I preferred a different locations for links and having a username in a different location etc.

Bill

Heh, if everyone keeps changing the colors, maybe we shouldn't call it "emerald" anymore... how about "gemstone"?

HTML Purifier, standards-compliant HTML filtering

> how about "gemstone"?

alternative emerald colours available here