Meerdere stijlen

Status
Niet open voor verdere reacties.

xLioness

Gebruiker
Lid geworden
11 sep 2011
Berichten
47
Ik wil voor mijn website (gemaakt met HTML voor content en CSS voor vormgeving) meerdere CSS stijlen. Dus dat de gebruiker bijvoorbeeld kan kiezen in welke kleur hij de pagina wilt zien, om het simpel te maken een keuze tussen rood en blauw.

rood is de standaardkleur van de hele website, maar ik wil er dan zegmaar een optie bij waarmee de gebruiker de website (en dus niet slechts 1 pagina) in het blauw kan zien.

hoe moet ik dat doen?
 
Als je website volledig uit losse html pagina's bestaat is dit erg lastig. (moet je alles 2x maken) Normaal gesproken wordt hiervoor php (of asp) of een andere server-side script taal gebruikt, zodat je de keuze kunt bewaren in de sessie, en daarmee vanzelf meekomt naar andere pagina's
 
... maar het kan ook "client-side", met javascript. Dat kan ook gebruikt worden als de site volledig uit losse html pagina's bestaat.
Principe:
  • het script kan de kleur spontaan veranderen,
  • het script plaatst bij een verandering tegelijkertijd een cookie,
  • het script vraagt op elke pagina het cookie op,
  • als er geen cookie is (en ook: als de bezoeker javascript of z'n cookies heeft uitgezet), dan verschijnt de standaardkleur,
  • als het cookie er wel is, dan zet het script automatisch de andere kleur aan.
  • Je kan ook terug-veranderen, dan verwijdert het script het geplaatste cookie.
Een beschrijving van hoe dit in z'n werk gaat staat bv. hier of hier.
In beide artikelen wordt een heel stylesheet tegelijk veranderd, maar het kan ook met alleen een background-kleur veranderen.
Een scriptje voor een losse style-wisselaar (zonder cookies) staat hier, onderaan (met lettergrootte i.p.v. background-color).

Met vriendelijke groet,
CSShunter
__________
PS: Als je de knop voor het wisselen er met javascript inzet, dan zien mensen die zonder javascript browsen de knop niet, en kunnen ze er ook niet vergeefs op klikken.
Als cookies zijn uitgezet, en javascript aan staat, doet de knop het alleen op de pagina die op dat moment aan staat.
 
Laatst bewerkt:
Ha! Daar stond het script ook! :d
  • :eek: niet gezien bij inplakken
  • :eek: niet gecheckt
Merci, gecorrigeerd!

Hier (online ;)) nog een ingewikkelder voorbeeld met wissel-mogelijkheid via javascript en koekjes: tussen 5 verschillende letterformaten, die site-breed ingesteld blijven staan op wat de bezoeker wil.
  • Is php-site, maar hiervoor hadden het net zo goed gewone .htm pagina's kunnen zijn.
  • Opm.: het daar gebruikte script doet tegelijkertijd allerlei andere dingen, is niet direct bruikbaar.
  • Het is wel "unobtrusive javascript", voorgeschreven door de webrichtlijnen: als javascript niet ondersteund wordt, staat de hele letterwissel-optie niet op de pagina's.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan