Автор Тема: как може да се направят теми на сайт чрез css  (Прочетена 882 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

thecruiser

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 4
Здравейте!
Искам да направя две или три теми(кожи) на моят сайт, които потребителят да може да избира.
Изгледах всичките уроци тук, потърсих здраво в интернет, но не мога да се ориентирам как да се случи това.
Как при избор на тема да се зарежда един style.css или друг и той да важи след това за съответният потребител.
Или пък в един style.css да има променливи с оказани стойности за съответните класове.
body {
   background-color: #000,FFF, ...;
}
Може ли да ми помогнете за едно оптимално решение.
Благодаря предварително.
С уважение Радо.

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: как може да се направят теми на сайт чрез css
« Отговор #1 -: 17 Септември 2014, 19:49:59 »
Здрасти радо и добре дошъл в нашия форум,

всичко е въпрос на имплементация и предпочитания в твоя случай. Може да стане и с отделни файлове с различен CSS (примерно: style-green.css, style-blue.css, etc), може и директно с променливи.

Сега мисля че е по-интересно къде да запазваш информацията за това каква тема ще ползва човека. Ако имаш потребителска система, където потребителя се записва в база данни, много лесно може просто да записваш информация за това каква тема ползва, с информацията за самия потребител. Ако ли пък нямаш, може да използваш бисквитки и така да записваш каква тема се ползва от потребителя на неговата машина. Разбира се има и други варианти, примерно в база данни да записваш темата по IP за конректения човек, но ми се струва че не е чак толкова практично.
Сега вече като си записал някъде данните за предпочитаната тема от потребителя, много лесно може да се реализира зареждането им. С отделните файлове мисля че ти стана ясно как ще стане, просто зареждаш различния файл. Може да го направиш с променливи в PHP, примерно вместо да имаш *.css файл, ще имаш *.php файл и в него ще echo-ваш CSS код. Например:
Код: PHP
  1. $data .= "body { background-color: " . $_SESSION['theme-colour'] . "; color: " . $_SESSION['colour'] . " } ";
  2.  
  3. echo $data;
И след това зареждаш PHP файла директно в link тага: <link rel="stylesheet" type="text/css" href="style.php" />

Сигурен съм че има и готови решения в интернет ако не ти се занимава да ги реализираш сам, наистина нещата опират до въображение :)

Ако все още имаш неяснотии, не се колебай да питаш.
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: как може да се направят теми на сайт чрез css
« Отговор #2 -: 23 Септември 2014, 20:46:28 »
Ето ти и реализация на много елементарно ниво по два различни начина, скалъпено на бързо. И за двата примера ползвам променлива, която взимам от GET, по същия начин може да стане както и със сесия, така и с база данни. Също така и един drop down, с който по-нагледно да се извършва смяната.

Метода със зареждането на два отделни файла (with-different-css-files.rar):
index.php
Код: PHP
  1. <?php
  2.  
  3. $theme = isset($_GET['theme']) ? $_GET['theme'] : null;
  4.  
  5. switch ($theme) {
  6.     case 'green':
  7.         $theme = 'green';
  8.         break;
  9.     case 'blue':
  10.         $theme = 'blue';
  11.         break;
  12.     default:
  13.         $theme = 'green';
  14.         break;
  15. }
  16.  
  17. var_dump($theme);
  18.  
  19. ?>
  20. <!DOCTYPE html>
  21. <html>
  22. <head>
  23.     <title></title>
  24.     <link rel="stylesheet" type="text/css" href="<?php echo $theme ?>.css">
  25. </head>
  26. <body>
  27. <select onchange="window.location.href='?theme='+this.value">
  28.     <option>моля изберете тема</option>
  29.     <option value="green">зелено</option>
  30.     <option value="blue">синьо</option>
  31. </select>
  32. <p>
  33.     Моята прекрасна тема.
  34. </p>
  35. </body>
  36. </html>

green.css
Код: CSS
  1. body { background-color: green }
  2. p { color: yellow }

blue.css
Код: CSS
  1. body { background: blue }
  2. p { color: white }





Метода с писането в един файл php файл, който да ползваме като css (with-one-css-file.rar):
index.php
Код: HTML
  1. <!DOCTYPE html>
  2.     <title></title>
  3.     <link rel="stylesheet" type="text/css" href="style.php?theme=<?php echo $_GET['theme'] ?>">
  4. </head>
  5. <select onchange="window.location.href='?theme='+this.value">
  6.     <option>моля изберете тема</option>
  7.     <option value="green">зелено</option>
  8.     <option value="blue">синьо</option>
  9. <p>
  10.     Моята прекрасна тема.
  11. </p>
  12. </body>
  13. </html>

style.php
Код: PHP
  1. <?php
  2.  
  3. $theme = isset($_GET['theme']) ? $_GET['theme'] : null;
  4.  
  5. switch ($theme) {
  6.     case 'green':
  7.         $theme = 'green';
  8.         $bg_colour = 'green';
  9.         $colour = 'yellow';
  10.         break;
  11.     case 'blue':
  12.         $theme = 'blue';
  13.         $bg_colour = 'blue';
  14.         $colour = 'white';
  15.         break;
  16.     default:
  17.         $theme = 'green';
  18.         $bg_colour = 'green';
  19.         $colour = 'yellow';
  20.         break;
  21. }
  22.  
  23. $data = 'body { background-color: ' . $bg_colour . '; }';
  24. $data .= 'p { color: ' . $colour . '; }';
  25.  
  26. header("Content-type: text/css");
  27. echo $data;


Както казах, има много начини, аз досега не съм реализирал такова нещо - това ми дойде като идеи, това поствам. Надявам се да си хванал поне къде е главната идея :)
« Последна редакция: 23 Септември 2014, 21:14:23 от Avalanche »
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

thecruiser

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 4
Re: как може да се направят теми на сайт чрез css
« Отговор #3 -: 23 Септември 2014, 21:13:39 »
Благодаря много!
Ще го пробвам да го доразвия за моят сайт, за да може да ми свърши работа.
Сядам веднага да го пробвам :)!
С уважение Радо.

thecruiser

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 4
Re: как може да се направят теми на сайт чрез css
« Отговор #4 -: 25 Септември 2014, 17:15:36 »
Пробвах за моят сайт и успях да го направя.
Всъщност преди да започна не осъзнавах на колко места статично съм задал цветове и т.н.
Тъй като избрах варианта с два css файла забелязах една досадна грешка.
Избирайки някой от случаите показва следните неща вляво от падащото меню:

string(5) "green" или
string(4) "blue" ,

които не можах да открия в сорс кодовете нито на css, нито на index.php.
Как може да се отстрани това.
При варианта с един css това не се наблюдава.
Избрах варианта с два файла, защото имам вертикално,хоризонтално, падащи менюта, пейджинг и още половин дузина елементи.
Благодаря предварително за помощта.
С уважение Радо.

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: как може да се направят теми на сайт чрез css
« Отговор #5 -: 25 Септември 2014, 21:08:18 »
Имай предвид, че това са много основни и елементарни примери, по които могат да се намерят забележки. Това ти се показва щото дебъгвам избраната тема с var_dump($theme);
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

thecruiser

  • Newbie
  • *
  • Благодарности
  • -Казани: 0
  • -Получени: 0
  • Публикации: 4
Re: как може да се направят теми на сайт чрез css
« Отговор #6 -: 26 Септември 2014, 15:48:15 »
Просто ще използвам варианта с един  css, но как трябва да направя избирайки линк върху страницата с приета тема различна от тази по подразбиране да се зарежда линка пак с вече избраната тема.

HanKrum

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 123
  • -Получени: 73
  • Публикации: 1002
  • Кибик
Re: как може да се направят теми на сайт чрез css
« Отговор #7 -: 26 Септември 2014, 18:39:24 »
Код: HTML
  1. ...
  2.     <link id="css" rel="stylesheet" href="./view/css/index1.css" type="text/css">
  3. </head>
  4. ...
  5. <a href="javascript:tema(1);">Тема 1</a>
  6. <a href="javascript:tema(2);">Тема 2</a>
  7. <a href="javascript:tema(3);">Тема 3</a>
  8. ...
Код: Javascript
  1. //include jquery
  2. var tema = function(t) {
  3.     if (t < 1 || t > 3) {
  4.         t = 1;
  5.     }
  6.     // t = (t < 1 || t > 3) ? 1 : t;
  7.     $('#css').attr('href', './view/css/index' + t + '.css');
  8. };
  9.  
« Последна редакция: 26 Септември 2014, 18:41:49 от HanKrum »
"Силата на правителството се крепи на невежеството на народа, и те знаят това и винаги ще се борят против просвещението." Лев Толстой

Zorko

  • Full Member
  • ***
  • Благодарности
  • -Казани: 33
  • -Получени: 9
  • Публикации: 206
Re: как може да се направят теми на сайт чрез css
« Отговор #8 -: 26 Септември 2014, 23:18:41 »
@thecruiser доколкото разбрах, реши да го направиш само с 1 css файл.
Цитат
Просто ще използвам варианта с един  css
Значи си правиш един файл например style.php и за по-хубаво изглеждащо, може с .htaccess да направиш така, че когато се отваря style.css да ти чете style.php. В сайта си слагаш <link rel="stylesheet" type="text/css" href="style.css">
Моята идея е:
Самите теми да се сменят чрез линкове, например:
- Потребителя си избира тема и натиска върху нея, после е пренасочен например към index.php?theme=1, в index.php си правиш проверка за $_GET['theme'] като нормализираш и после валидираш, и ако всичко е ок записваш в Сесия ($_SESSION) или в бисквитка ($_COOKIE) избраната тема.
- Във файла style.php, ще се взема избраната тема чрез SESSION или COOKIE, взависимост какво се ползва. Може да се зададе и стойност по подразбиране. Самата проверка си я правиш с if или ако имаш много теми, си правиш направо един swith.

Най-лесно да го разбереш ще ти дам пример (, който ще напиша директно тук, и може да има правописни грешки и др.)

--- index.php ---
<?php
// трябва да си направиш и проверката дали съотв. е isset $_GET['theme']
// тук трябва да си направиш съответните нормализации и валидации за $_GET['theme']
$_SESSION['theme']=$_GET['theme']; // ТОВА НИКОГА АМА НИКОГА не го правете така, първо трябва да се направи //ЗАДЪЛЖИТЕЛНО Нормализация и после Валидация и чак тогава , ако всичко е ОК, да се добави в SESSION или COOKIE
?>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <a href="index.php?theme=1">Red theme</a> | <a href="index.php?theme=2">Blue theme</a>  | etc...
    </body>
<html>

--- style.php ---
<?php
header
("Content-type: text/css");
switch (
$_SESSION['theme']) {
    case 
1:
        
$bodyColour 'red';
        break;
    case 
2:
        
$bodyColour 'blue';
        break;
    default:
        
$bodyColour 'red';
        break;
}
echo 
'body { background-color: ' $bodyColour '; }';
?>


Извинете много, чак сега забелязах, че Ава е дал подобен пример. Съжалявам :(