Pagina 1 din 1
Optiune tema css
Scris: Dum Dec 21, 2014
de adrian_ady
Salut,
stie cineva cum se face corect optiunea (preferinta utilizatorului) de afisare a site-ului in doua teme distincte; sa zicem versiunea1= LIGHT, versiunea2= DARK ? Banuiesc ca trebuie avute doua syle-uri.css distincte (si asta e usor) dar cum se face sa se incarce separat si sa se pastreze optiunea ?
Optiune tema css
Scris: Dum Dec 21, 2014
de andras
Nu stiu daca vorbesc prostii sau nu, eu sint mai nou in acest domeniu, dar ar trebui sa fie la fel ca optiunea Limba de afisare. Eu am salvat in baza de date limba de afisare (implicita) a site-ului ca o proprietate a user-ului. La conectarea la BD preiau in SESSION aceasta proprietate si in functie de valoarea ei setez functia care stabileste in ce limba se deschide.
Optiune tema css
Scris: Dum Dec 21, 2014
de MarPlo
Salut
Se poate face asa, cu html si javascript:
- se adauga un id la tag-ul html <link> care preia fisierul css.
- se creaza un <select> cu optiunile pt teme /fisiere css.
- un cod javascript care preia valoarea aleasa din <select> si o modifica pe cea din tagul <link>, apoi o adauga /salveaza in browser (in localStorage).
- La incarcarea paginii se verifica daca exista localStorage cu adresa fisierului css, daca exista, o adauga in tag-ul <link> pt. preluare css.
Uite si exemplu:
Cod: Selectaţi tot
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/light.css" rel="stylesheet" type="text/css" id="css_id" />
</head>
<body>
<select id="change_css">
<option value="css/light.css">Light</option>
<option value="css/dark.css">Dark</option>
</select>
<script>
// if the css option is saved in browser, use it
if(localStorage.getItem('css_teme')) document.getElementById('css_id').href = localStorage.getItem('css_teme');
// when the select option is changed
document.getElementById('change_css').addEventListener('change', function(e) {
// change the used css file
document.getElementById('css_id').href = this.value;
// stores the value in browser's localstorage
localStorage.setItem('css_teme', this.value);
});
</script>
</body>
</html>
Optiune tema css
Scris: Lun Dec 22, 2014
de adrian_ady
Am incercat insa nu se poate reveni la optiunea precedenta odata ce s-a optat pentru una din ele iar selectul nu afiseaza ultima optiune. Cred ca o versiune radio button ar fi mai potrivita, la refresh sau schimb de pagina ar mentine clar optiunea dorita.
Optiune tema css
Scris: Lun Dec 22, 2014
de MarPlo
In acest exemplu se schimba optiunea din <select> cu cea salvata in browser.
Cod: Selectaţi tot
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/light.css" rel="stylesheet" type="text/css" id="css_id" />
</head>
<body>
<select id="change_css">
<option value="css/light.css">Light</option>
<option value="css/dark.css">Dark</option>
</select>
<script>
// if the css option is saved in browser, use it
if(localStorage.getItem('css_teme')) {
document.getElementById('css_id').href = localStorage.getItem('css_teme');
// change the selected option in select
var sel_op = document.getElementById('change_css').querySelectorAll('option');
for(var i=0; i<sel_op.length; i++) {
if(sel_op[i].value == localStorage.getItem('css_teme')) {
sel_op[i].setAttribute('selected', 'selected');
break;
}
}
}
// when the select option is changed
document.getElementById('change_css').addEventListener('change', function(e) {
// change the used css file
document.getElementById('css_id').href = this.value;
// stores the value in browser's localstorage
localStorage.setItem('css_teme', this.value);
});
</script>
</body>
</html>
- Daca vrei cu radio buton sau altfel, incearca sa faci, ca un exercitiu de invatare.
Optiune tema css
Scris: Lun Dec 22, 2014
de adrian_ady
Eh, asa mai merge, functioneaza 100%.
Toate cele bune si Sarbatori Fericite!
Edit:
Off, am doua imagini .gif pe care nu pot sa le fac cu background transparent sa fie compatibile cu ambele css-uri. Ar trebui sa le pot afisa cu un conditional PHP care sa aleaga ce imagine sa se descarce in functie de optiunile Dark si Light si nu stiu.
Optiune tema css
Scris: Lun Dec 22, 2014
de MarPlo
Datele salvate in browser in localStorage nu pot fi preluate in php.
Mai simplu ar fi sa adaugi imaginile ca background in fisierele css, cu proprietatea:
Cod: Selectaţi tot
#idul { background-image:url('cale/imagine.png'); }
Sau, mai complex, pe partea de client side poti lucra cu javascript. Asa cum se modifica adresa fisierului css se poate schimba si o imagine, te poti folosi de un id adaugat in tagul html, si metoda JS getElementById().
Daca nu stii javascript, poti incerca sa inveti.