WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 31.01.2020 10:40:43

florian
Administrator

jquery Stylesheet Switcher

Falls es mal wer braucht (bzw. falls ich es selbst mal wieder brauche). Ist etwas Bastelkram, aber auch keine Raketentechnologie ;-)

Wenn zum Testen nicht das ganze Template, sondern nur das Stylesheet geändert werden soll:
Umsetzung auf der Basis von https://github.com/bloycey/styleSwitcher

1) Code von Github herunterladen (grüner Button Clone or Download)

2) Verzeichnis customstyles aus dem Paket nach /templates/{templatename}/css kopieren

3) Scripte custom.js und styleSwitcher.js aus dem Paket nach /templates/{templatename}/js kopieren

4) In der styleSwitcher.js Zeile 4

 path: "css/customstyles/",

ändern zu

 path: TEMPLATE_DIR+"/css/customstyles/",

(Voraussetzung ist, dass die JS-Variable TEMPLATE_DIR gesetzt wird, was aber i.d.R. der Fall ist, wenn register_frontend_modfiles('jQuery') im Template aufgerufen wird)

5) In den customstyle.css-Dateien im Verzeichnis /templates/{templatename}/css die gewünschten Style-Anpassungen vornehmen, z.B. andere Schrift- oder Farbdefinitionen o.ä.

6) In aus dem Paket nach /templates/{templatename}/index.php am Ende einfügen, Bezeichnungen "Blue Theme" etc. sinnfällig anpassen:

 <select name="colorpick" id="colorpick" class="form-control" style="position:absolute; top:0; right:0">
              <option value="defaultstyles" selected>Default Theme</option>
              <option value="customstyle1">Blue Theme</option>
              <option value="customstyle2">Green Theme</option>
              <option value="customstyle3">Purple Theme</option>
 </select>
<script src="<?php echo TEMPLATE_DIR; ?>/js/styleSwitcher.js"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/js/custom.js"></script>

Die Auswahl wird in der Local Storage gespeichert, d.h. bleibt auch beim Seitenwechsel erhalten, aber eben nur lokal und nicht serverseitig.

Pfade und Dateinamen usw. können angepasst werden, das muss dann aber konsistent in der index.php und styleSwitcher.js bzw. im Aufruf custom.js erfolgen.

Man kann das natürlich noch verfeinern, wenn der Switcher nur auf bestimmten Seiten angezeigt werden soll:

<?php 
$ShowSwitchPages = array(16,22,17,18);
if (in_array(PAGE_ID,$ShowSwitchPages)) { // Stylesheet Switcher ?>
...Code von oben...
<?php } ?>

Online

Liked by:

stefanek

Board footer

Powered by FluxBB

up