CSS-tiedostojen vaihtoscripta
Teen projektina yhtä sivua, mihin jouduin väliaikaisesti rakentamaan karusellin, mikä mahdollistaa teeman vaihtamisen lennosta. Mielestäni tämä ohje kuinka se tehdään, oli niin yksinkertainen ja helppo, että päätin jakaa sen teidän kanssa.
“Kuinka tehdä PHP:tä hyväksikäyttäen kikkara, joka vaihtaa CSS-tiedoston” -alkuperäinen ja laajempi ohje löytyy A List Apertin artikkkelista: Build a PHP Switcher. Kreditit siis sinne, ei tänne. Mutta niille, jotka eivät jaksa tai osaa lukea englantia, tämä voi hyvinkin auttaa. Kiitoksia tästä linkistä vielä Ismolle.
Tämä PHP-skriptin vaatimuksina on luonnollisesti normaali PHP-tuki serveriltä ja selaimen pitää hyväksyä / ymmärtää keksit.
Aloitetaan.
Kohta 1 - Keksin luominen käyttäjäasetuksia varten
Luo ensin tyhjä tiedosto ja heitä sen sisälle teksti:
<?php
setcookie (’sitestyle’, $set, time()+31536000,
‘/’, ‘yourdomain.com’, ‘0′);
header("Location: $HTTP_REFERER");
?>
Tallenna tämä tiedosto sivun juureen nimellä switcher.php ja korvaa yourdomain.com -kohta omalla. Tämä pätkä luo keksin, mikä muistaa käyttäjän asettamat teema-asetukset. Keksi on määritetty erääntymään vuoden sisälle.
Kohta 2 - Mikä teema vaihdetaan
Tee sivustoon linkki tai pudotusvalikko, josta haluat teeman vaihtuvan:
Linkki:
<a href="./switcher.php?set=red">click here to change to RED style!</a> Tämä määrittää uuden css-tiedoston nimeksi red.css - jos laitat set=red tilalle set=blue, uuden tyylin css-tiedostoksi määrittyy blue.css - Tämä tarkoittaa siis sitä, että tiedostojen nimet pitävät olla samat mitä kohdassa set= ilmoitetaan. Ainut poikkeus tässä on se, että tiedostotyyppiä ei ilmoiteta. Se määritetään erikseen kohdassa kolme.
Pudotusvalikko:
<form action="switcher.php" method="post">
<select name="set">
<option value="default" selected>Default</option>
<option value="red">Crazy Red</option>
<option value="experiment">Experimental Style</option>
</select>
<input type="submit" value="Change Style">
</form>
Kohta value määrittää css-tiedoston alun. Kohdat default, red, experiment päättyvät kaikki loppuun *.css - Tämä tarkoittaa siis sitä, että tiedostojen nimet pitävät olla samat, mitkä kohdassa value ilmoitetaan. Ainut poikkeus tiedoston nimessä value kohdassa on se, ettei siinä ilmoitetan tiedostotyyppiä. Se määritetään erikseen kohdassa kolme.
Kohta 3 - Oletusteeman ja mistä teema vaihdetaan
Jotta tämä toimisi täysin, tarvitsee sinun määrittää ensisijainen tyyli ja muuttuja <head> :ille.
Ensisijainen:
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>.css" />Ensisijaisen tyylin nimi on määritetty tässä kohtaan defaulstyle. Voit korvata sen millä ikinä haluatkin. Malliesimerkin koodi on määritetty siten, että tyylitiedosto haetaan sivun juuresta. Jos haluat pitää teematiedostot eri paikassa, lisäät vain kohdan href="<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>.css" alkuun haluamasi sijainnin tyyliin href="teema/kansion/polku/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>.css".
Voit myös määrittää vaihtoehtoiset tyylit sivulle, milloin käyttäjä voi vaihtaa teemaa suoraan selaimista, jotka tukevat sitä :
<link rel="alternate stylesheet" type="text/css" media="screen" title="Fire Engine Red" href="./redstyle.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Grape" href="./purple.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Scary" href="./blackout.css" />
Kiitos tästä suomennoksesta!
En kuitenkaan saa tätä toimimaan omilla sivuillani. Tyylitiedostot ovat omassa kansiossaan ja samoin muut sivut ovat omissa kansioissaan lajiteltuina alasivuiksi. Kansiorakenne siis:
JUURI:
- tiedosto header.php
- tiedosto footer.php
- tiedosto switcher.php
KANSIO “css” sisältää
- tyyli.css
- tyyli2.css
KANSIO “etusivu” sisältää
- index.php
- tiedosto.php
- tiedosto2.php
jne. (Kansioita on toistakymmentä)
Linkin vaihdoin näin:
href=”../css/.css
Ideat loppu, oisko sulla?
Paha sanoa tuon perusteella. Olisiko näyttää jotain demosivua tuosta? Se peruskysymys mikä aina tulee kysyttyä: onko polut varmasti kohillaan?
Latasin demon tänne: http://www.neitokakadu.net/testi/ETUSIVU/
Vihreä oletuksena, punaiselle koitan vaihtaa. Mozilla antaa ilmoituksen: “ÿþ….” IE näyttää blankoa.
Kokeile korvata kohdasta -> rel=”alternate stylesheet” type=”text/css” href=”../css/puna.css” title=”Punainen” tuo title “puna” ja katso auttaako?
Jos tuo ei itsessään auta, niin yrittäisin kokeilla linkittää noita css-tiedostoja kokeksii aivan kokonaisella urlilla tai siirtää tuon switcher.php -tiedoston sivun juureen. Jos sekään ei vaikuttaisi, tarkistaisin, onko php-tiedostolla mitkä Chmodit eli oikeudet.
Siinä muutama ajatus, mikä tuli mieleen nopsaan.
Kerro jos nämä auttaa / ei auta. :)
Luulisin siis itse näin alustavasti tuon johtuvan switcher.php sijainnista tai tuosta titlestä. Kokeile siirtää switcher.php suoraan tuohon ETUSIVU kansioon ja katso miten käyttäytyy.
Kiitokset avustasi myös mesen kautta. Ei saatu tuota toimimaan kunnolla, mutta sen vanhemman versioni sain pelittämään ilman että piti liittää tyylitiedostoja joka kansioon. Se “vanhempi” versio löytyy täältä: http://minimaldesign.net/downloads/projects/minimal-switch