Studio AD : Выбор дизайна

Хотелось бы сделать на сайте сменный дизайн. Чтобы каждый юзер мог выбрать один из 3-4 вариантов, чтобы после входа/выхода выбранный диз сохранялся ну и тд и тп, всё "как у людей". Кто-нибудь пробовал подобное? Может кто-то даже реализовал?

BeSinLi

Дата: Воскресенье, 20.09.2009, 15:50 | Сообщение # 2

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Карма: 57

Замечания: 60%

http://javascript.internet.com/css/change-style.html - мб это подойдет?

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

UnderShot

Дата: Воскресенье, 20.09.2009, 16:38 | Сообщение # 3

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

Sigma, пишешь отдельные css для каждого стиля. Прописываешь скриптик в джава скрипте. Позже дам подробный код

tomas686

Дата: Воскресенье, 20.09.2009, 19:58 | Сообщение # 4

шептун

Группа: Проверенные

Пользователь №: 18

Сообщений: 90

Получено оценок: 1

Карма: 9

UnderShot, Ждем ^_^

Sigma

Дата: Воскресенье, 20.09.2009, 20:58 | Сообщение # 5

молчун

Группа: Проверенные

Пользователь №: 30

Сообщений: 15

Получено оценок: 1

BeSinLi, мудрено, но я попробую.
UnderShot, ок, жду. бтв, без css никак?

UnderShot

Дата: Воскресенье, 20.09.2009, 21:07 | Сообщение # 6

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

Sigma, без css незнаю способов

UnderShot

Дата: Воскресенье, 20.09.2009, 21:14 | Сообщение # 7

оратор

Группа: Модераторы

Пользователь №: 45

Сообщений: 923

Получено оценок: 85

Карма: 152

Очень важная тема!
Filmzona — онлайн фильмы.

Sigma, вот есть один, но это без куков: http://www.jstoolbox.com/2008/04/05/sozdanie-pereklyuchatelya-stilej/

Сейчас поищу другой

BeSinLi

Дата: Воскресенье, 20.09.2009, 22:43 | Сообщение # 8

спикер

Группа: Проверенные

Пользователь №: 216

Сообщений: 500

Получено оценок: 112

Карма: 57

Замечания: 60%

Цитата (Sigma)

BeSinLi, мудрено, но я попробую.

Почему мудрено? O_o

Все просто. И как можно поменять дизайн без CSS...

Вобщем вот:

1. Создаем файл с JS, к примеру change_css.js.

В файл вставляем следующий код:

Code

1
2	// Ниже меняем значения по вкусу
3	var expDays = 9999; // Сколько дней будут сохранятся настройки стиля
4	var standardStyle = '2'; // Номер стандартного стиля(по умолчанию)
5	var nameOfCookie = 'switchstyle'; // Имя печеньки
6	var urlToCSSDirectory = 'http://www.my.my/styles/'; // Папка в которой хранятся стили
7
8	// Имена ваших файлов стилей, цифры в названиях соответствуют номеру стиля
9	var ScreenCSS_1 = 'screen_1.css';
10	var ScreenCSS_2 = 'screen_2.css';
11	var ScreenCSS_3 = 'screen_3.css';
12	var ScreenCSS_4 = 'screen_4.css';
13	var ScreenCSS_5 = 'screen_5.css';
14
15	// Если вы используете отдельные стили для печати то поменяйте эти для того что бы стили для печати менялись тоже. Если нет то пропишите все точно так же как и выше
16	// Например ваш первый стиль называется blahblah_1.css то вместо print_1.css вставьте blahblah_1.css
17	var PrintCSS_1 = 'print_1.css';
18	var PrintCSS_2 = 'print_2.css';
19	var PrintCSS_3 = 'print_3.css';
20	var PrintCSS_4 = 'print_4.css';
21	var PrintCSS_5 = 'print_5.css';
22
23	/*********************************************************************
24	НИЖЕ НИЧЕГО НЕ МЕНЯЕМ БЕЗ ЗНАНИЯ JS
25	*********************************************************************/
26
27	// This is the main function that does all the work
28	function switchStyleOfUser(){
29	var fontSize = GetCookie(nameOfCookie);
30	if (fontSize == null) {
31	fontSize = standardStyle;
32	}
33
34	if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
35	if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
36	if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
37	if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
38	if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }
39
40	if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
41	if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
42	if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
43	if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
44	if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }
45
46	var fontSize = "";
47	return fontSize;
48	}
49
50	var exp = new Date();
51	exp.setTime(exp.getTime() + (expDays2460601000));
52
53	// Function to get the settings of the user
54	function getCookieVal (offset) {
55	var endstr = document.cookie.indexOf (";", offset);
56	if (endstr == -1)
57	endstr = document.cookie.length;
58	return unescape(document.cookie.substring(offset, endstr));
59	}
60
61	// Function to get the settings of the user
62	function GetCookie (name) {
63	var arg = name + "=";
64	var alen = arg.length;
65	var clen = document.cookie.length;
66	var i = 0;
67	while (i < clen) {
68	var j = i + alen;
69	if (document.cookie.substring(i, j) == arg)
70	return getCookieVal (j);
71	i = document.cookie.indexOf(" ", i) + 1;
72	if (i == 0) break;
73	}
74	return null;
75	}
76
77	// Function to remember the settings
78	function SetCookie (name, value) {
79	var argv = SetCookie.arguments;
80	var argc = SetCookie.arguments.length;
81	var expires = (argc > 2) ? argv[2] : null;
82	var path = (argc > 3) ? argv[3] : null;
83	var domain = (argc > 4) ? argv[4] : null;
84	var secure = (argc > 5) ? argv[5] : false;
85	document.cookie = name + "=" + escape (value) +
86	((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
87	((path == null) ? "" : ("; path=" + path)) +
88	((domain == null) ? "" : ("; domain=" + domain)) +
89	((secure == true) ? "; secure" : "");
90	}
91
92	// Function to remove the settings
93	function DeleteCookie (name) {
94	var exp = new Date();
95	exp.setTime (exp.getTime() - 1);
96	var cval = GetCookie (name);
97	document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
98	}
99
100	// This function is used when the user gives his selection
101	function doRefresh(){
102	location.reload();
103	}
104
105	// This will call the main function. Do not remove this, because otherwise this script will do nothing...
106	document.write(switchStyleOfUser());
107

2. В этой строке - var urlToCSSDirectory = 'http://www.my.my/styles/'; меняем http://www.my.my/styles/ на путь квашим стилям.

3. В этих строках
var ScreenCSS_1 = 'screen_1.css';
var ScreenCSS_2 = 'screen_2.css';
var ScreenCSS_3 = 'screen_3.css';
var ScreenCSS_4 = 'screen_4.css';
var ScreenCSS_5 = 'screen_5.css';
меняем screen_х.css на имена ваших файлов стилей, цифра в имени соответствует номеру стиля.

4. Эти строчки
var PrintCSS_1 = 'print_1.css';
var PrintCSS_2 = 'print_2.css';
var PrintCSS_3 = 'print_3.css';
var PrintCSS_4 = 'print_4.css';
var PrintCSS_5 = 'print_5.css';
меняем на
var ScreenCSS_1 = 'screen_1.css';
var ScreenCSS_2 = 'screen_2.css';
var ScreenCSS_3 = 'screen_3.css';
var ScreenCSS_4 = 'screen_4.css';
var ScreenCSS_5 = 'screen_5.css';
с именами ваших файлов стилей и в каждойстроке ScreenCSS заменяем на PrintCSS.

5. Сохраняем скрипт.

6. Заливаем скрипт на сайт.

7. В <head> вставляем <script type="text/javascript" src="changeStyle.js"></script>, changeStyle.js меняем на путь к вашему скрипту залитому на сайт.

8. Заливаем ваши файлы стилей на сайт в указаную вами дерикторию в строке var urlToCSSDirectory = 'http://www.my.my/styles/';.

9. В <body> вставляем этот код, там где мы хотим что бы отображалось "меню" переключения стилей:

Code

1
2	<div>
3	<input type="radio" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
4	<input type="radio" name="grootte" value="2" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
5	<input type="radio" name="grootte" value="3" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
6	<input type="radio" name="grootte" value="4" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"><input type="radio" name="grootte" value="5" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
7	</div>
8

10. Готово.

Ну и мне кажется что "радио" кнопки нужно поменять на какие то картинки...

——————————--„Tempora mutantur, et nos mutamur in illis“
———————————————„Si felix esse vis, este!“

———————————————————————————————————————————————————————старая аватарка

dfsdfsdfs

Дата: Воскресенье, 20.09.2009, 22:52 | Сообщение # 9

Группа: Удаленные

BeSinLi, большой код..
Sigma, писал раньше на юкозе там еще jquery встроенный так сам код мне обошелся.. встрок на 10 небольше.. делал на куках сменный css. Подругому там нормально несделаешь. если у тебя пхп хостинг то вопрос в раздел чуть повыше

Sigma

Дата: Воскресенье, 20.09.2009, 23:00 | Сообщение # 10

молчун

Группа: Проверенные

Пользователь №: 30

Сообщений: 15

Получено оценок: 1

UnderShot, ну без сохранения стиля смысл теряется, сам понимаешь.
BeSinLi, ок, кое-как разобрался, буду пробовать.

Цитата (dfsdfsdfs)

строк на 10 небольше.. делал на куках сменный css. Подругому там нормально несделаешь.

Уже понял, да. Если есть код - пиши, лишним не будет. Глядишь, самый оптимальный вариант найдем.

MrOizo

Дата: Понедельник, 21.09.2009, 16:14 | Сообщение # 11

говорун

Группа: Проверенные

Пользователь №: 42

Сообщений: 188

Получено оценок: 6

Карма: 16

Можно при помощи styleswith менять, как на моём сайте сейчас.

DSC

Дата: Понедельник, 21.09.2009, 16:16 | Сообщение # 12

спикер

Группа: Проверенные

Пользователь №: 127

Сообщений: 516

Получено оценок: 41

Карма: 51

А ссылочку напишешь?

aka Latro

MrOizo

Дата: Понедельник, 21.09.2009, 20:23 | Сообщение # 13

говорун

Группа: Проверенные

Пользователь №: 42

Сообщений: 188

Получено оценок: 6

Карма: 16

Это в шапку

Code

1
2	<link type="text/css" rel="StyleSheet" title="dark" href="/styles1.css">
3	<link type="text/css" rel="alternate stylesheet" title="light" media="screen" href="/styles2.css">
4	<script src="http://buttersstoch.ru/js/styleswitch.js" type="text/javascript"></script>
5

Это в код шаблона

Code

1
2	<a href="javascript:chooseStyle('dark', 160)" checked="checked" class="mButton"><IMG src="http://buttersstoch.ru/images/dark.png" border="0" alt="Темный"></a>
3	<a href="javascript:chooseStyle('light', 60)" class="mButton"><IMG src="http://buttersstoch.ru/images/light.png" border="0" alt="Светлый"></a>
4

Примеры работы:

buttersstoch.ru (в шапке нажми на каплю)
или
http://www.kelvinluck.com/assets/jquery/styleswitch/ (понажимай styles1
styles2
styles3)

Сообщение отредактировал butters - Понедельник, 21.09.2009, 20:23

Aleko

Дата: Среда, 09.12.2009, 12:29 | Сообщение # 14

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

Господи же боже мой! Вы ненормальные тут все? Это в одну строку пишется (для тупых с комментариями - в три). Файлик js в аттаче - после редактирования - вешать в шапку страницы вместо линка на стили.

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

Кука вешается совершенно спокойно до 3000 года, плевать когда она сдохнет. Если кука не найдена и не указан стиль вручную (тоесть не происходит переключение стиля) линкуется дефолтный стиль.

Переключение стилей на сайте осуществляется простым проходом по ссылке вида:

адрес сайта?название стиля без .css

например http://mysite.ru?second

Вот листинг скрипта, там всё понятно вроде бы, но я всё равно прокомментировал кое что.

Code

1	<script type='text/javascript'>
2	/* cssswitch by Aleko, created on www.studioad.ru */
3
4	(function(){var pt = 'www.site.ru/', /* css files path */
5	st = ['first','second','third'] /* css files names */
6	.join('"').match(document.location.search.substr(1)\|\|(document.cookie?document.cookie.match(/cssswitch=(\w+)/)[1]:0))\|\|'default';document.write("<link type='text/css' rel='stylesheet' href='"+pt+st+".css'>");document.cookie='cssswitch='+st+';expires=Mon, 1 Jan 3000 00:00:00 UTC'})();
7	</script>

Прикрепления: cssswitch.js (0.4 Kb)

Бесплатные обои.

Carbon_fiber

Дата: Четверг, 10.12.2009, 10:43 | Сообщение # 15

шептун

Группа: Проверенные

Пользователь №: 545

Сообщений: 94

Получено оценок: 4

Замечания: 40%

используйте юкоз-куки...
на хелпере есть тема http://helper.ucoz.ru/forum/3-1715-1

мне пофиг что думают обо мне, мне важно что думаю я.

Aleko

Дата: Четверг, 10.12.2009, 17:43 | Сообщение # 16

Watching you

Группа: Администраторы

Пользователь №: 2

Сообщений: 1621

Получено оценок: 167

Карма: 193

Carbon_fiber, тоже вариант.

Бесплатные обои.

Lesay

Дата: Суббота, 27.02.2010, 03:08 | Сообщение # 17

молчун

Группа: Пользователи

Пользователь №: 1691

Сообщений: 2

Карма: 0

MrOizo, вы не могли бы перезалить файлы или выложить листинги

Сообщение отредактировал Lesay - Суббота, 27.02.2010, 16:04

MrOizo

Дата: Суббота, 27.02.2010, 09:49 | Сообщение # 18

говорун

Группа: Проверенные

Пользователь №: 42

Сообщений: 188

Получено оценок: 6

Карма: 16

Цитата (Lesay)

вы не могла

Я МОГ бы только какие именно файлы.

Lesay

Дата: Суббота, 27.02.2010, 16:03 | Сообщение # 19

молчун

Группа: Пользователи

Пользователь №: 1691

Сообщений: 2

Карма: 0