• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по Ucoz » Выбор дизайна
Выбор дизайна
Sigma
Дата: Воскресенье, 20.09.2009, 15:31 | Сообщение # 1
молчун
Группа: Проверенные
Пользователь №: 30
Сообщений: 15
Получено оценок: 1
Хотелось бы сделать на сайте сменный дизайн. Чтобы каждый юзер мог выбрать один из 3-4 вариантов, чтобы после входа/выхода выбранный диз сохранялся ну и тд и тп, всё "как у людей". Кто-нибудь пробовал подобное? Может кто-то даже реализовал?

  
BeSinLi
Дата: Воскресенье, 20.09.2009, 15:50 | Сообщение # 2
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
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
Sigma, пишешь отдельные css для каждого стиля. Прописываешь скриптик в джава скрипте. Позже дам подробный код

Очень важная тема!
Filmzona — онлайн фильмы.
  
tomas686
Дата: Воскресенье, 20.09.2009, 19:58 | Сообщение # 4
шептун
Группа: Проверенные
Пользователь №: 18
Сообщений: 90
Получено оценок: 1
UnderShot, Ждем ^_^
  
Sigma
Дата: Воскресенье, 20.09.2009, 20:58 | Сообщение # 5
молчун
Группа: Проверенные
Пользователь №: 30
Сообщений: 15
Получено оценок: 1
BeSinLi, мудрено, но я попробую.
UnderShot, ок, жду. бтв, без css никак?


  
UnderShot
Дата: Воскресенье, 20.09.2009, 21:07 | Сообщение # 6
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Sigma, без css незнаю способов

Очень важная тема!
Filmzona — онлайн фильмы.
  
UnderShot
Дата: Воскресенье, 20.09.2009, 21:14 | Сообщение # 7
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Sigma, вот есть один, но это без куков: http://www.jstoolbox.com/2008/04/05/sozdanie-pereklyuchatelya-stilej/

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


Очень важная тема!
Filmzona — онлайн фильмы.
  
BeSinLi
Дата: Воскресенье, 20.09.2009, 22:43 | Сообщение # 8
спикер
Группа: Проверенные
Пользователь №: 216
Сообщений: 500
Получено оценок: 112
Quote (Sigma)
BeSinLi, мудрено, но я попробую.

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

Вобщем вот:

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

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

Code

// Ниже меняем значения по вкусу
var expDays = 9999;  // Сколько дней будут сохранятся настройки стиля  
var standardStyle = '2'; // Номер стандартного стиля(по умолчанию)
var nameOfCookie = 'switchstyle'; // Имя печеньки  
var urlToCSSDirectory = 'http://www.my.my/styles/'; // Папка в которой хранятся стили

// Имена ваших файлов стилей, цифры в названиях соответствуют номеру стиля
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';

// Если вы используете отдельные стили для печати то поменяйте эти для того что бы стили для печати менялись тоже. Если нет то пропишите все точно так же как и выше
// Например ваш первый стиль называется blahblah_1.css то вместо print_1.css вставьте blahblah_1.css
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';

/*********************************************************************
   НИЖЕ НИЧЕГО НЕ МЕНЯЕМ БЕЗ ЗНАНИЯ JS
*********************************************************************/

// This is the main function that does all the work
function switchStyleOfUser(){
  var fontSize = GetCookie(nameOfCookie);
  if (fontSize == null) {
   fontSize = standardStyle;
  }

  if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
  if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
  if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
  if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
  if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }

  if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
  if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
  if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
  if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
  if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }

  var fontSize = "";
  return fontSize;
}

var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

// Function to get the settings of the user
function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
  endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}

// Function to get the settings of the user
function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
   var j = i + alen;
   if (document.cookie.substring(i, j) == arg)
   return getCookieVal (j);
   i = document.cookie.indexOf(" ", i) + 1;
   if (i == 0) break;
  }
  return null;
}

// Function to remember the settings
function SetCookie (name, value) {
  var argv = SetCookie.arguments;
  var argc = SetCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  var path = (argc > 3) ? argv[3] : null;
  var domain = (argc > 4) ? argv[4] : null;
  var secure = (argc > 5) ? argv[5] : false;
  document.cookie = name + "=" + escape (value) +
  ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
  ((path == null) ? "" : ("; path=" + path)) +
  ((domain == null) ? "" : ("; domain=" + domain)) +
  ((secure == true) ? "; secure" : "");
}

// Function to remove the settings
function DeleteCookie (name) {
  var exp = new Date();
  exp.setTime (exp.getTime() - 1);
  var cval = GetCookie (name);
  document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

// This function is used when the user gives his selection
function doRefresh(){
  location.reload();
}

// This will call the main function.  Do not remove this, because otherwise this script will do nothing...
document.write(switchStyleOfUser());

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

<div>
<input type="radio" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
<input type="radio" name="grootte" value="2" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
<input type="radio" name="grootte" value="3" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();">
<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();">
</div>

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, ок, кое-как разобрался, буду пробовать.
Quote (dfsdfsdfs)
строк на 10 небольше.. делал на куках сменный css. Подругому там нормально несделаешь.

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


  
MrOizo
Дата: Понедельник, 21.09.2009, 16:14 | Сообщение # 11
говорун
Группа: Проверенные
Пользователь №: 42
Сообщений: 188
Получено оценок: 6
Можно при помощи styleswith менять, как на моём сайте сейчас.

  
DSC
Дата: Понедельник, 21.09.2009, 16:16 | Сообщение # 12
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
А ссылочку напишешь?

aka Latro
  
MrOizo
Дата: Понедельник, 21.09.2009, 20:23 | Сообщение # 13
говорун
Группа: Проверенные
Пользователь №: 42
Сообщений: 188
Получено оценок: 6
Это в шапку
Code

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

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

Code

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

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

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

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

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

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

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

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

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

Code
<script type='text/javascript'>
/* cssswitch by Aleko, created on www.studioad.ru */

(function(){var pt = 'www.site.ru/', /* css files path */
st = ['first','second','third'] /* css files names */
.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'})();
</script>
Прикрепления: cssswitch.js (0.4 Kb)


Бесплатные обои.
  
Carbon_fiber
Дата: Четверг, 10.12.2009, 10:43 | Сообщение # 15
шептун
Группа: Проверенные
Пользователь №: 545
Сообщений: 94
Получено оценок: 4
используйте юкоз-куки...
на хелпере есть тема http://helper.ucoz.ru/forum/3-1715-1


мне пофиг что думают обо мне, мне важно что думаю я.
  
Aleko
Дата: Четверг, 10.12.2009, 17:43 | Сообщение # 16
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Carbon_fiber, тоже вариант.

Бесплатные обои.
  
Lesay
Дата: Суббота, 27.02.2010, 03:08 | Сообщение # 17
молчун
Группа: Пользователи
Пользователь №: 1691
Сообщений: 2
MrOizo, вы не могли бы перезалить файлы или выложить листинги

Сообщение отредактировал Lesay - Суббота, 27.02.2010, 16:04
  
MrOizo
Дата: Суббота, 27.02.2010, 09:49 | Сообщение # 18
говорун
Группа: Проверенные
Пользователь №: 42
Сообщений: 188
Получено оценок: 6
Quote (Lesay)
вы не могла

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


  
Lesay
Дата: Суббота, 27.02.2010, 16:03 | Сообщение # 19
молчун
Группа: Пользователи
Пользователь №: 1691
Сообщений: 2
Quote (MrOizo)
Это в шапку
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
Пoдcвeткa oт АDИсходный код | Переносить строки

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

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
Пoдcвeткa oт АDИсходный код | Переносить строки

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

buttersstoch.ru (в шапке нажми на каплю)

Вот из этого поста...

  
Форум Studio AD » Сайтостроение » Общий форум по Ucoz » Выбор дизайна
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.