Продолжая тему кастомизации внешнего вида одного отдельно взятого веб-проекта на движке bigstreet, хочу поделиться с вами способом, благодаря которому можно реализовать в пользовательской части селектор стилей оформления вашего сайта в пределах всего одного шаблона.
Это значит, что изменив всего десяток строк во вновь добавляемых стилях и используя всего одну(!) тему оформления, можно повысить привлекательность своего сайта если уж не частым обновлением контента (о, это как раз мой случай =) ), то, хотя бы расширенными возможностями в плане юзабилити для посетителей, которые, вместо скучного листинга в пределах трех страниц постов годовалой давности, смогут выбрать индивидуально подходящий цвет ссылок, кнопок, бэкграунда и прочие мелочи… помедитировать несколько минут, глядя на результат своих действий… или же просто тупо пощелкать разноцветными кнопочками.

Идея возникла, когда увидел в очередном обновлении bigstreet несколько шаблонов, отличающихся лишь цветовой палитрой. Вот тогда и подумалось, что для смены цветовой гаммы не обязательно клонировать шаблон целиком. Гораздо проще использовать импорт нескольких css файлов в пределах одного единственного шаблона. И цветовых решений в этом случае может быть множество…

Это конечно не Бог весть что. Если изменять только цвет текста, ссылок и бэкграунда, то различия между вариантами оформления будут минимальны (пример для наглядности ниже).

Стиль 1 — красный


Стиль 2 — зеленый


Однако, используя подобный метод, можно сделать изменения при переходе от одного оформления к другому кардинальными, если вся графика и характеристики элементов верстки описаны у вас в css файле.

Вобщем схема реализации идеи следующая.
Нужно вынести в отдельные css файлы часть кода (основного base.css) который отвечает за оформление ссылок, кнопок, цвета фона, фоновых изображений и прочего.
Что для этого нужно сделать:


1. Создать в каталоге вашей темы оформления (предположим, что используется шаблон default) дополнительный каталог (например newcss).


2. Открыть в редакторе основной стилевой файл base.css, затем создать его копию, из которой удалить все, кроме следующих классов (набор лишь примерный, зависит от конкретного используемого файла стилей).
В моем случае в дополнительный css файл было вынесено:

1.  
2. body {  }
3.  
4. div#page-body { }
5.  
6. body#page {  }
7.  

все подклассы

1.  
2. #user_menu
3.  

все подклассы

1.  
2. #blogs_menu
3.  

а также, все классы для ссылок, облака тегов и пагинации

1.  
2. a:hover { }
3.  
4. a:active, a.active { }
5.  
6. .red, a.red {  }
7. a.red:hover  {  }
8.  
9. .blue, a {  }
10. .pale_blue {  }
11.  
12. .brown, a.brown {  }
13. a.brown:hover {  }
14.  
15. .pale, a.pale {  }
16. a.pale:hover {  }
17.  
18. div.tags_cloud {  }
19. div.tags_cloud a.tag {  }
20. div.tags_cloud a.tag:hover {  }
21.  
22. .pager span.curr {  }
23.  

Из шаблона default достаточно будет вынести в новый файл цвет фона страницы, цвет ссылок, цвет ссылок в облаке тегов, оформление пагинации, цвет текста, заголовков… возможно еще что-нибудь на ваше усмотрение.
Так вот выносим все это добро в новый файл (назовем его base2.css, к примеру).
Меняем ту часть кода, которая отвечает за цвет и бэкграунд нужного элемента.
Это всего пара значений —

1.  
2. background: #000000; color: #FFFFFF;
3.  

если у вас к фону прицеплена картинка, то еще и

1.  
2. background: #000000 url('../images/моя картинка.gif') repeat;
3.  

3. Выбираем цветовую гамму для фона, ссылок, текста и сохраняем наш файл base2.css в недавно созданную папку newcss. Теперь у нас есть два стиля, и нужно сделать так, чтобы была возможность между ними переключаться.
Для этого в самое начало файла base2.css дописываем код:

1.  
2. @import url("../base.css");
3.  

Таким образом происходит следующее: при переключении на новый стиль (base2.css), шаблон импортирует все содержимое файла base.css и сразу после этого все классы оформления фона, ссылок и кнопок заменяет на те, что присутствуют ниже, в самом файле base2.css. Таким образом, меняется лишь цвет фона, ссылок и кнопок.

Чтобы пользователь имел возможность вернуться к первоначальному стилю (вдруг то, что он увидит ему не понравится?) нужно создать все в той же папке newcss еще один файл — base_back.css. А в нем оставить лишь первую строчку

1.  
2. @import url("../base.css");
3.  

и больше ничего.


4. Теперь самое главное. Нужно сделать так, чтобы на стороне пользователя в кукисах хранилась информация о выбранном стиле оформления. Создаем в редакторе файл cssswitch.js следующего содержания (js код не мой — немного погуглил и нашел готовое решение):

1.  
2. function setActiveStyleSheet(title) {
3.   var i, a, main;
4.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
5.     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
6.       a.disabled = true;
7.       if(a.getAttribute("title") == title) a.disabled = false;
8.     }
9.   }
10. }
11.  
12. function getActiveStyleSheet() {
13.   var i, a;
14.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
15.     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
16.   }
17.   return null;
18. }
19.  
20. function getPreferredStyleSheet() {
21.   var i, a;
22.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
23.     if(a.getAttribute("rel").indexOf("style") != -1
24.        && a.getAttribute("rel").indexOf("alt") == -1
25.        && a.getAttribute("title")
26.        ) return a.getAttribute("title");
27.   }
28.   return null;
29. }
30.  
31. function createCookie(name,value,days) {
32.   if (days) {
33.     var date = new Date();
34.     date.setTime(date.getTime()+(days*24*60*60*1000));
35.     var expires = "; expires="+date.toGMTString();
36.   }
37.   else expires = "";
38.   document.cookie = name+"="+value+expires+"; path=/";
39. }
40.  
41. function readCookie(name) {
42.   var nameEQ = name + "=";
43.   var ca = document.cookie.split(';');
44.   for(var i=0;i < ca.length;i++) {
45.     var c = ca[i];
46.     while (c.charAt(0)==' ') c = c.substring(1,c.length);
47.     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
48.   }
49.   return null;
50. }
51.  
52. window.onload = function(e) {
53.   var cookie = readCookie("style");
54.   var title = cookie ? cookie : getPreferredStyleSheet();
55.   setActiveStyleSheet(title);
56. }
57.  
58. window.onunload = function(e) {
59.   var title = getActiveStyleSheet();
60.   createCookie("style", title, 365);
61. }
62.  
63. var cookie = readCookie("style");
64. var title = cookie ? cookie : getPreferredStyleSheet();
65. setActiveStyleSheet(title);
66.  

и этот файл отправляем в папку, где хранятся все js скрипты Большой Улицы (js/)

5. Чтобы js скрипт подключился и работал как нужно, необходимо прописать место его обитания в файл config.php, в то место, где прописаны все js-скрипты Большой Улицы
(это почти самый конец файла config.php)

Туда добавляем:

1.  
2. /* смена стиля */
3. $oSettings->setJs($oSettings->getPathWeb().'/js/cssswitch.js');
4. /* смена стиля */
5.  

6. Осталось вывести наш cssswitch.js в самом шаблоне и добавить собственно кнопки переключения между стилями.
для этого в файл sample.header.tpl добавляем в место подключения стиля сразу после

1.  
2. <link rel="STYLESHEET" href="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/base.css" type="text/css">
3.  

1.  
2. <link rel="ALTERNATE STYLESHEET" type="text/css" href="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/newcss/base2.css" title="base2" /> <!-- к новому стилю -->
3. <link rel="ALTERNATE STYLESHEET" type="text/css" href="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/newcss/base_back.css" title="base_back" /> <!-- обратно к старому стилю -->
4.  

Рисуем и закидываем в themes/default/images/
кнопки-картинки для переключения стилей — base2.gif, base_back.gif.

Затем в тот же файл sample.header.tpl (или в любое другое удобное место страницы), встраиваем код кнопок селектора:

1.  
2. <a href="#" onClick="setActiveStyleSheet('base2'); return false;"><img src="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/images/base2.gif" ></a>
3. <a href="#" onClick="setActiveStyleSheet('base_back'); return false;"><img src="{$oRouter->getPathWeb()}/themes/{$oSettings->getSiteTheme()}/images/base_back.gif" ></a>
4.  

На этом собственно и все… Развить идею во что-то большее пока не получилось, нет свободного времени. Попробовать результат в действии и оценить полезность/бесполезность описанного безобразия можете самостоятельно.

P.S. Можно пойти дальше, и по аналогичной схеме реализовать в пользовательской части смену самих шаблонов… Такой вариант наверное будет даже интереснее.