Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczna zmiana stylów css
Forum PHP.pl > Forum > PHP
paweld89
17.01.2013, 19:48:22
Chciałbym zrobić dynamiczną zmianę stylów css, kolega mi wspominał żebym zrobił to na sesjach, ale nie wiem jak. Pomoże mi ktoś z tym ?
sajegib
17.01.2013, 20:15:17
fajnie jakbyś opisał dokładnie jak to ma wyglądać
paweld89
17.01.2013, 20:31:58
Poprostu mam stronę i styl css do niej:

[HTML] pobierz, plaintext 
  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  4. <head>
  5.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  6.   <meta name="Description" content=" [wstaw tu opis strony] ">
  7.   <meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
  8.   <meta name="Author" content=" [dane autora] ">
  9.   <meta name="Generator" content="kED2">
  10.  
  11.   <title> [tytuł strony] </title>
  12.  
  13.   <link rel="stylesheet" href="style.css " type="text/css">
  14.  
  15.     </head>
  16. <body>
  17.  
  18. <ul>
  19. <li><a id="css-red" href="#red">Red</a></li>
  20. <li><a id="css-blue" href="#blue">Blue</a></li>
  21. <li><a id="css-green" href="#green">Green</a></li>
  22. </ul>
  23. <a href="1.html">wejdź</a>
  24. </body>
  25. </html>
  26.  
  27. body 
  28. {
  29. margin-left  : auto;
  30. margin-right : auto;
  31. padding      : 0;
  32. background-color: black;
  33. height              : auto;
  34. font-family  : verdana;
  35. font-size    : 12px;
  36. color        : white;
  37. }
  38.  
  39.  
  40.  
[HTML] pobierz, plaintext

Po kliknięciu na poszczególne przyciski będzie się zmieniać styl css.
sajegib
17.01.2013, 20:40:19
Ja bym to zrobil w jQuery - zdarzenie click + addclass
paweld89
17.01.2013, 20:52:27
mam to zrobione inaczej ale mam pewien problem zaraz wyślę co mam zrobione i jak i z czym mam problem

Otóż zrobiłem tak:
[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  3. <head>
  4.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  5.   <meta name="Description" content=" [wstaw tu opis strony] ">
  6.   <meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
  7.   <meta name="Author" content=" [dane autora] ">
  8.   <meta name="Generator" content="kED2">
  9.  
  10.   <title> [tytuł strony] </title>
  11.  
  12.   <link rel="stylesheet" href="style.css " type="text/css">
  13.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  14. <script type="text/javascript">
  15. $(document).ready(function() {
  16. // red
  17. $("#css-red").click(function() {
  18. $("link[rel=stylesheet]").attr({href : "red.css"});
  19. });
  20.  
  21. // blue
  22. $("#css-blue").click(function() {
  23. $("link[rel=stylesheet]").attr({href : "blue.css"});
  24. });
  25.  
  26. // green
  27. $("#css-green").click(function() {
  28. $("link[rel=stylesheet]").attr({href : "green.css"});
  29. });
  30. });
  31. </script>
  32.     </head>
  33. <body>
  34.  
  35. <ul>
  36. <li><a id="css-red" href="#red">Red</a></li>
  37. <li><a id="css-blue" href="#blue">Blue</a></li>
  38. <li><a id="css-green" href="#green">Green</a></li>
  39. </ul>
  40. <a href="1.html">wejdź</a>
  41. </body>
  42. </html>
  43.  
[HTML] pobierz, plaintext

i do tego domyślny css:
[HTML] pobierz, plaintext 
  1. body 
  2. {
  3. margin-left  : auto;
  4. margin-right : auto;
  5. padding      : 0;
  6. background-color: black;
  7. height              : auto;
  8. font-family  : verdana;
  9. font-size    : 12px;
  10. color        : white;
  11. }
  12.  
[HTML] pobierz, plaintext


oraz css'y zastępcze oczywiście każdy w innym pliku:
[HTML] pobierz, plaintext 
  1.  
  2. body 
  3. {
  4. margin-left  : auto;
  5. margin-right : auto;
  6. padding      : 0;
  7. background-color: red;
  8. height              : auto;
  9. font-family  : verdana;
  10. font-size    : 12px;
  11. color        : white;
  12. }
  13.  
  14. body 
  15. {
  16. margin-left  : auto;
  17. margin-right : auto;
  18. padding      : 0;
  19. background-color: blue;
  20. height              : auto;
  21. font-family  : verdana;
  22. font-size    : 12px;
  23. color        : white;
  24. }
  25.  
  26. body 
  27. {
  28. margin-left  : auto;
  29. margin-right : auto;
  30. padding      : 0;
  31. background-color: green;
  32. height              : auto;
  33. font-family  : verdana;
  34. font-size    : 12px;
  35. color        : white;
  36. }
  37.  
  38.  
  39.  
[HTML] pobierz, plaintext

oraz plik z linku:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <head>
  3.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  4.   <meta name="Description" content=" [wstaw tu opis strony] ">
  5.   <meta name="Keywords" content=" [wstaw tu slowa kluczowe] ">
  6.   <meta name="Author" content=" [dane autora] ">
  7.   <meta name="Generator" content="kED2">
  8.  
  9.   <title> [tytuł strony] </title>
  10.  
  11.   <link rel="stylesheet" href="style.css " type="text/css">
  12.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  13. <script type="text/javascript">
  14. $(document).ready(function() {
  15. // red
  16. $("#css-red").click(function() {
  17. $("link[rel=stylesheet]").attr({href : "red.css"});
  18. });
  19.  
  20. // blue
  21. $("#css-blue").click(function() {
  22. $("link[rel=stylesheet]").attr({href : "blue.css"});
  23. });
  24.  
  25. // green
  26. $("#css-green").click(function() {
  27. $("link[rel=stylesheet]").attr({href : "green.css"});
  28. });
  29. });
  30. </script>
  31.     </head>
  32. <body>
  33.  
  34. <ul>
  35. <li><a id="css-red" href="#red">Red</a></li>
  36. <li><a id="css-blue" href="#blue">Blue</a></li>
  37. <li><a id="css-green" href="#green">Green</a></li>
  38. </ul>
  39. <a href="index.html">wróć</a>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext


no i wszystko ładnie pięknie działa tło się przełącza, jadnak problem z tym że po przejściu na podstronę ustawia się tło z domyślnego pliku css czyli czarne. Słyszałem że da się jakoś zrobić żeby ustawienie było zapamiętywane. ale nie mam pojęcia jak to zrobić sad.gif
sajegib
17.01.2013, 21:12:58
zapisz do bazy/pliku ostatnio wybrany css, a przy wczytaniu strony sprawdzaj jaki byl wybrany i go wyswietlaj
paweld89
17.01.2013, 21:18:53
a dałbyś radę trochę mnie poinstruować jak to zrobić ? tzn jak zapisać i odczytac to wiem, ale którą cześć kodu mam zapisywać i odczytywać ?
sajegib
17.01.2013, 21:50:28
Na pewno jest lepsze rozwiazanie ale na szybkości przychodzi mi do glowy cos takiego

-tworzysz sobie tyle plikow .css ile potrzebujesz stylow
-do tabeli w bazie dajesz kolumne z nazwa wybranego pliku *.css
-pobierasz z bazy nazwe tego pliku i przypisujesz ją np. zmiennej $styl
-w <head> gdzie dajesz sciezke do pliku ze stylami dorzucasz coś takiego
[PHP] pobierz, plaintext 
  1. <link rel="Stylesheet" type="text/css" href="./<?php echo $styl; ?>.css" />
[PHP] pobierz, plaintext
paweld89
17.01.2013, 21:53:02
No dobra to rozumiem ale skąd mam mieć pewność że wczyta się dobry css ? mam bazować na ostatnio dodanym rekordzie czy jak ?
sajegib
17.01.2013, 21:58:35
no to już od ciebie zależy czy chcesz go wyświetlać dla każdego usera z osobna czy jak tam wolisz
paweld89
17.01.2013, 22:00:22
OK przetestuję ten sposób smile.gif jak bym mial problem to napisze smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.