Templateerstellung - Farben per Click ändern

Hallo zusammen,

diese Frage ist eher generell und bezieht sich nicht auf ein bestimmtes Theme oder eine bestimmte Seite.

Wenn ich mit einem Premium-Theme arbeite, dann habe ich ja ,eistens die Möglichkeit, da noch reichlich Einstellungen mit wenigen Klicks vorzunehmen. So kann man beispielsweise bei vielen Themes das Farbschema ändern, die Linkfarbe ändern, ganze Headerbereich austauschen etc.

Wie man so etwas gewissermaßen "zu Fuß" macht, weiß ich. Wenn ich die Farben im Theme ändern will, ändere ich sie im Stylesheet.

Aber wie geht das auf Knopfdruck?

Dabei ist die erste Frage, die ich mir stelle: Wie lege ich in ein und demselben Stylesheet 3 oder 4 verschiedene Farbschmata an auf die ich dann, bei Bedarf, zurückgreifen kann?

Und wie erzeuge ich im Admin-Bereich einen Link mit einem Einstellbereich meines Themes?

Und wie lege ich mehrere Header-Templates an?

Danke und Grüße
Holger

Danke, SirEctor.
Ich nehme an, das betrifft nicht nur body, sondern auch alle anderen Elemente. Denn gerade body will ich nicht ändern.

Okay ein konkretes Beispiel: Ich habe beispielsweise die widgets der Sidebar farbig gestaltet. Die Widget-Köpfe sind hellblau (bzw. haben eigentlich einen Farbverlauf, der momentan nur überall auf gleiche Farbe gesetzt ist.

Das Ganze sieht so aus:

in der functions:

register_sidebar( array(
'name' => 'Haupt-Sidebar',
'id' => 'haupt-sidebar',
'description' => 'Haupt-Sidebar',
'before_widget' => '<div id="widgetkomplett" class="widget %2$s">',
  'after_widget'  => '</div>',
  'before_title'  => '<div id="widgetkopf" class="widget %2$s">',
  'after_title'   => '</div>',
) );

in der style.css:

#widgetkopf {
    margin-bottom: 10px;
    font-family: arial;
    font-size: 1.3em;
    padding: 10px;
    background: #30b3b3;
    background: -moz-linear-gradient(left, #96cff6 0%, #96cff6 51%, #96cff6 100%);
    background: -webkit-linear-gradient(left, #96cff6 0%,#96cff6 51%,#96cff6 100%);
    background: linear-gradient(to right, #96cff6 0%,#96cff6 51%,#96cff6 100%);
    #filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5d5d5', endColorstr='#d5d5d5',GradientType=1 );
}

Wie und wo definiere ich denn da jetzt mehrere Klassen und wie setze ich eine Umschaltfunktion in die Optionen?

Okay, den ersten Teil kann ich mir selber beantworten. Ich könnte in der functions

'before_widget' => '<div id="widgetkopf" class="blau rot gelb gruen">',

definieren und in der style.css

#widgetkopf.blau {
background: blue;
}


#widgetkopf.rot {
background: red;
}

u.s.w.

Aber icgh habe das mit den Optionen noch nicht verstanden