How to change colors of the default Sugar theme

[j.mouco]

Hello,

I'm new in Sugar, I wonder how can I change the default colors in the default Sugar theme.

I'm using the last version, Version 6.2.0beta3.

I looked for the answer in the forum but it seems that the answers are based on older versions of Sugar.

My organization theme is white and red. Therefore, I'd like to change the default blue color in the menu to a red.

Thanks for your help.

www.ishr.ch

[sts]

My approach:
I am using Firefox with the firebug extension. With that tool it is relatively easy to find out which css styles should be changed and it is possible to do a change directly in firebug to see if it works fine. If this is ok you should go into the theme's css-file (in most cases themes/<themename>/css/style.css) and do the real change. To get the results to screen you should now delete the cache/themes/<themename> directory and reload the Sugar page.
In my case I have created my own theme first which contains all my changes: I've copied Sugar5 theme, changed themedef.php and afterwards I did all the css changes. (I created it in sugar 6.0.1, later I moved it to 6.2.0beta with success -> therefore I had to create a zip file including my theme plus manifest.php and loaded this module into 6.2.0beta)

[sts]

Here a screenshot from firefox with firebug. A small example with changing blue colors into red and green (just to show the effect):

[j.mouco]

Thanks a lot, it's very interesting.

I found something interesting when I tried to modify the main menu colors. Actually, the background is an image located in themes\xxx\images.

There, you'll find already different style like otherTabBlue.gif for the blue theme or otherTabRed.gif for the red theme. The question is, how can I activate the red template?

[sts]

There are several files with different colors used for background available in the theme directory, at least these::
currentTab<Color>.gif
otherTab<Color>.gif
tabRow<Color>Bg.gif
In all cases there exist files with <Color> empty (these files are used for default) or set to 'Blue', 'Grey', 'Green', etc.

If you want to change the color I would do the following: copy the colored-file of your choice to the filename without <Color> set, e.g. "copy otherTabRed.gif otherTab.gif". I didn't try this but if you do this with all Background files you should get what you want. The alternative would be to change the entries in style.css from e.g.

#moduleList > ul > li
{
    background-image:url(../../../../index.php?entryPoint=getImage&themeName=Sugar55&imageName=otherTab.gif);
}

to

#moduleList > ul > li
{
    background-image:url(../../../../index.php?entryPoint=getImage&themeName=Sugar55&imageName=otherTabRed.gif);
}

[GekM]

Hi,
can there be any other variants to do this?
In old 5.x versions it was realised. And I think, what it could be done like it was in old version. There was function SUGAR.themes.changeColor('{COLOR_NAME}'), but i can't find it. I think, in old versions that function changed colors in theme.
Have you got any ideas?

[GekM]

Hi,
Are there any other variants?
In old 5.x versions it was realised. And I think i could be done on a similar algorithm. There was function SUGAR.themes.changeColor('{COLOR_NAME}'). I think this function chenged theme color, but i can't find it.
Do you have any ideas?
Thanks.

[GekM]

Hi,
Are there any other ways to do this?

[sts]

As far as I know there is no such function in 6.x .