picking a final color scheme

Thanks for the feedback... Im working on a solution for the color picker... At the moment its just a try-out... to finally change the color theme for all users you have to modify the style.css a litte bit...

for now you have to find the folowing entries in the style.css and change them:

Line 30:

#header-image {
  height:80px;
  background-color:#006699;
}

Line 69:

h1, h2, h3, h4, h5, #headline a {
  margin-top:0px;
  color:#006699;
}

Line 93:

a {
  text-decoration:none;
  color:#006699;
}

Change the color (in this example #006699) to the color you like.

Orange: #FF9900
Red: #990000
Grey: #CCCCCC
Blue: #006699
Black: #000000

DONT FORGET A HARD BROWSER RELOAD SINCE STYLE.CSS GETS CACHED (Hit: ctrl + F5, or shift + F5)

edit: solution found

Could you perhaps share the solution if it was not the same as posted above? I have the same issue.

Thanks

Thanks - got it. I discovered you can also change settings in template.php too

I discovered you can also change settings in template.php

drupalfool, it would be nice if you could tell us more about these settings. Thanks !

Sure thing. Here is a quick "How To Recipe" for changing the order of the header "picker" elements so they are aligned right instead of left and so the logo appears on the left instead of the right. I suggest you make a copy of the original files and rename them with the prefix _aligned_right.

The fourseasons theme header has a font and colourpicker aligned left and the logo is aligned right by default. We want the logo to be aligned left and the pickers to be aligned right. Below are notes on what needs to be changed:

Template.php

Change the order of the font selector and the colour picker:

a) Identify the following code: fourseasons_adminwidget

This is the javascript which allows the "picker" to work. Leave this alone.

b) Identify the following code:

div id="farben

This is the code which sets the colours for the colour selector

c) Identify the following code:

<div id="font">

This is the code which sets the font size

Move the entire div named font to below the div named farben by cutting and pasting everything from the opening and closing div tags

<div id="font"> ....</div>

Next change the order of the font size lines so 100% is on top and 10% is at the bottom. Again, cut and paste works fine. Make sure you paste the entire line:

<a href="#" onclick="$(\'body\').css(\'font-size\',\'100%\');">100%</a>
<a href="#" onclick="$(\'body\').css(\'font-size\',\'90%\');">90%</a>

Finally change the span from margin-left to margin-right:

<span style="margin-right:5px;">try another fontsize:</span>

Do the same for the farben div except span needs to be margin-left.

<a href="#" style="background-color:#003366;" onclick="toggle_style(\'#003366\');"></a>
<a href="#" style="background-color:#FF9900;" onclick="toggle_style(\'#FF9900\');"></a>
<span style="margin-left:20px;">try another color: </span>

The two div tags now look like this:

<div id="farben">
<a href="#" style="background-color:#000000;" onclick="toggle_style(\'#000000\');"></a>
<a href="#" style="background-color:#006699;" onclick="toggle_style(\'#006699\');"></a>
<a href="#" style="background-color:#CCCCCC;" onclick="toggle_style(\'#CCCCCC\');"></a>
<a href="#" style="background-color:#990000;" onclick="toggle_style(\'#990000\');"></a>
<a href="#" style="background-color:#003366;" onclick="toggle_style(\'#003366\');"></a>
<a href="#" style="background-color:#FF9900;" onclick="toggle_style(\'#FF9900\');"></a>
<span style="margin-left:20px;">try another color: </span>
</div>

<div id="font">
<a href="#" onclick="$(\'body\').css(\'font-size\',\'100%\');">100%</a>
<a href="#" onclick="$(\'body\').css(\'font-size\',\'90%\');">90%</a>
<a href="#" onclick="$(\'body\').css(\'font-size\',\'80%\');">80%</a>
<a href="#" onclick="$(\'body\').css(\'font-size\',\'70%\');">70%</a>
<a href="#" onclick="$(\'body\').css(\'font-size\',\'60%\');">60%</a>
<span style="margin-right:5px;">try another fontsize:</span>
</div>

 

========

Style.css

========

Change the following tags to text-align:left;

#headline

This changes the logo so it is aligned left

Change the following tags to float:right;

#font span,
#farben span
#farben a
#font a

This changes the "pickers" to align right.

Upload the revised files to the server, do a HARD reload (F5) of the browser to refresh the cache and have a look at the fresh layout.

I am thinking it may be possible to find a way to load a new stylesheet when the color picker is selected. If so it would not only change the font colours but images could also be changed too including the logo and the background image below the logo. Possibly this could also be set using some kind of cookie to preserve the chosen style.

DrupalFool,

Thank you very much for this description. It will really help at getting at this theme. Much appreciated.

Sam