How to get rid of the Javascript hack with the color

remove the following in the page.tpl.php

  <?php print fourseasons_adminwidget($scripts); ?>

I changed mine so the font size picker stayed but the color picker was switched off. I did this by splitting the adminwidget function into two functions inside template.php then calling the one I wanted from page.tpl.php

Here is how to do it:

Open template.php and replace the code for adminwidget with this code instead:

function fourseasons_adminwidget() {

  print '
    <script type="text/javascript" src="'.base_path().'misc/jquery.js"></script>
	<script type="text/javascript">
    function toggle_style(color) {
      $("#header-image").css("background-color", color);
      $("#header-image").css("background-image", "img/headerimg.jpg");
      $("h1").css("color", color);
      $("h2").css("color", color);
      $("h3").css("color", color);
      $("#headline a").css("color", color);
    }
    </script>
 
    <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>
	';
	}

function fourseasons_adminwidget_1() {

  print '

    <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>
	
  ';

}

Now open page.tpl.php and change the code so both pickers are shown:

    <!-- [ Print the color picker ] -->
  <?php print fourseasons_adminwidget(); ?>

    <!-- [ Print the text picker ] -->
  <?php print fourseasons_adminwidget_1(); ?>

Now you can delete whichever one you do not want or delete both of them.

Here is another trick to make the top toolbar a bit nicer.

in page.tpl.php find the following code:

    <!-- [ Print the color picker ] -->
  <?php print fourseasons_adminwidget(); ?>

    <!-- [ Print the text picker ] -->
  <?php print fourseasons_adminwidget_1(); ?>

Now wrap a style around them:

<div id="hdrtools">
    <!-- [ Print the color picker ] -->
  <?php print fourseasons_adminwidget(); ?>

    <!-- [ Print the text picker ] -->
  <?php print fourseasons_adminwidget_1(); ?>
</div>

Now open style.css and add the hdrtools style to the stylesheet:

#hdrtools {
	
	padding: 0 4px 0 4px;
	float: right;
	display: block;
	background: url(img/hdrtools-bg.gif);
	background-position: top right;
	background-repeat: no-repeat;
}

Design a nice background image to site behind your top color and text picker tools and upload it to your fourseasons img folder

This should give you a nice background behind your tools.

Hi, is there anybody to can say how to toggle the image also?

like
<a href="#" style="background-color:#000000;" onclick="toggle_style(\'#000000\');"></a>

how can we pass the image to javascript to chane the header image on every click on "farben" div.

thanx

Could it be possible to select a color and/or size from the admin widget and make it persistent for a specific user? (that means that whenever a page is reloaded colors won't be reseted like now)

Did you find a solution for this c-c-m?

Unfortunately, not, Konse.