Меню сайта
АКЦИЯ!!!
Категории раздела
Сервис
Translate my page
Выбрать язык / Select language:
Бесплатное отправление смс сообщений!
Поиск
Календарь
« Май 2024 » Пн Вт Ср Чт Пт Сб Вс 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Архив записей
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
Главная » Переключатели
Отличная юзабельность. Не использует НИ ОДНОЙ КАРТИНКИ. Одинаково работает и выглядит в браузерах IE5.5, IE6, IE7, IE8, Mozilla FF, Safari, Google Chrome, Opera 9. Адаптирован под использование в uCoz.
Этот код размещаем сразу под условным кодом $BODY$
Код:
<style>
#content {white-space:nowrap}
#content a{display:inline-block;font:12px Tahoma;width:38px;padding:2px 0;margin:1px;color:#88aa00;text-align:center;text-decoration:none;}
#content a:hover, .curPage{background:#88aa00;color:#fff !important;}
#pageScroll {margin:0 auto;overflow:hidden;position:relative;top:-3px;cursor:default}
.scrollWrap {background:#dfdfdf;font:0;position:relative}
.scrollBar {background:#777;cursor:pointer;cursor:hand;font:0px;position:relative;z-index:400}
.scrollPage {background:#88aa00;font:0;position:absolute;z-index:300;}
.pagesTotal {font:12px Tahoma;color:#bbb}
#pagesBlock1, .pagesBlock1, .pagesBlockuz1 {display:none !important;}
</style>
<div id="pageScroll"><span id="content"></span></div>
<script type="text/javascript" src="http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/perekliu4ateli/dsaPageScroller.js"></script>
<script>initScrolls(10)</script>
Вот собственно и всё. Второй параметр отвечает за количество отображенных страниц в ряд. CSS можно изменять, как угодно.
Добавлена возможность пользоваться колесиком мыши. Исправлено много багов. Код сжат и оптимизирован.
Данный переключатель подойдет для светлых дизайнов.
Код в css
Код:
..catPages1 {
padding: 3px;
margin: 3px;
text-align:center;
color:#ff6500;
font-size:80%;
}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:active{
border: 1px solid #ff9600;
margin-right:3px;
padding:5px 7px;
background-image:url(http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/perekliu4ateli/1.jpg);
background-position:bottom;
text-decoration: none;
color: #ff6500; }
.catPages1 b {margin-right:3px;
padding:5px 7px;
border: 1px solid #ff6500;
font-weight: bold;
background-color: #ffbe94;
color: #ff6500;}
catPages1 a:hover {border: 1px solid #ff9600;
background-image:none;
background-color:#ffc794;
color: #ff6500;}
В css:
Код:
/* PageSelector Start */
.catPages1 {color:#ffffff; border:1px;margin-bottom:10px;margin-top:10px;}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:hover,
.catPages1 a:active {text-decoration:none;color: #57caff;background:#f9f9f9;padding:3px 6px;font-size:11px;font-weight:bold;border:1px solid #57caff;}
.catPages1 a:hover {background:#63ceff;color:#FFFFFF;font-weight:bold;border:1px solid #57caff;}
.catPages1 b {text-decoration:none;background:#ffffff;padding:3px 6px;color:#c2efff;font-size:11px;border:1px solid #c2efff;}
.pagesBlockuz1 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz1 a:link,
.pagesBlockuz1 a:visited,
.pagesBlockuz1 a:hover,
.pagesBlockuz1 a:active {text-decoration:none;color: #57caff;background:#f9f9f9;padding:3px 6px;font-size:11px;font-weight:bold;border:1px solid #57caff;}
.pagesBlockuz1 a:hover {background:#63ceff;color:#FFFFFF;font-weight:bold;border:1px solid #57caff;}
.pagesBlockuz1 b {text-decoration:none;background:#ffffff;padding:3px 6px;color:#ccc;font-size:11px;border:1px solid #e6e6e6;}
.pagesBlock1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlock1 a:link,
.pagesBlock1 a:visited,
.pagesBlock1 a:hover,
.pagesBlock1 a:active {text-decoration:none;color: #57caff;background:#ffffff;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlock1 a:hover {background:#63ceff;color:#FFFFFF;font-weight:bold;}
.pagesBlock1 b {text-decoration:none;background:#ffffff;padding:3px 10px;color:#ccc;font-size:11px;}
.catPages2 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;}
.catPages2 a:link,
.catPages2 a:visited,
.catPages2 a:hover,
.catPages2 a:active {text-decoration:none;color: #57caff;background:#f9f9f9;padding:3px 6px;font-size:11px;font-weight:bold;border:1px solid #57caff;}
.catPages2 a:hover {background:#63ceff;color:#FFFFFF;font-weight:bold;border:1px solid #57caff;}
.catPages2 b {text-decoration:none;background:#ffffff;padding:3px 6px;color:#ccc;font-size:11px;border:1px solid #e6e6e6;}
.pagesBlockuz2 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz2 a:link,
.pagesBlockuz2 a:visited,
.pagesBlockuz2 a:hover,
.pagesBlockuz2 a:active {text-decoration:none;color: #57caff;background:#f9f9f9;padding:3px 6px;font-size:11px;font-weight:bold;border:1px solid #57caff;}
.pagesBlockuz2 a:hover {background:#63ceff;color:#FFFFFF;font-weight:bold;border:1px solid #57caff;}
.pagesBlockuz2 b {text-decoration:none;background:#ffffff;padding:3px 6px;color:#ccc;font-size:11px;border:1px solid #e6e6e6;}
.pagesBlock2 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlock2 a:link,
.pagesBlock2 a:visited,
.pagesBlock2 a:hover,
.pagesBlock2 a:active {text-decoration:none;color: #57caff;background:#ffffff;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlock2 a:hover {background:#63ceff;color:#FFFFFF;font-weight:bold;}
.pagesBlock2 b {text-decoration:none;background:#ffffff;padding:3px 10px;color:#ccc;font-size:11px;}
/* PageSelector end */
Для светлых дизайнов
В CSS:
Код:
.catPages1 {color:#AED6FF;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:hover,
.catPages1 a:active {text-decoration:none;color: #fff;background:#4888BE;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages1 a:hover {background:#3B6F9B;color:#AED6FF;font-weight:bold;}
.catPages1 b {text-decoration:none;background:#4888BE;padding:3px 10px;color:#AED6FF;font-size:11px;}
.catPages2 {color:#AED6FF;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages2 a:link,
.catPages2 a:visited,
.catPages2 a:hover,
.catPages2 a:active {text-decoration:none;color: #fff;background:#4888BE;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages2 a:hover {background:#3B6F9B;color:#AED6FF;font-weight:bold;}
.catPages2 b {text-decoration:none;background:#4888BE;padding:3px 10px;color:#AED6FF;font-size:11px;}
Этот код вставляем в CSS:
Код:
.catPages1 {color:#AED6FF;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:hover,
.catPages1 a:active {text-decoration:none;color: #fff;background:#9933ff;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages1 a:hover {background:#cc00ff;color:#fff;font-weight:bold;}
.catPages1 b {text-decoration:none;background:#9933ff;padding:3px 10px;color:#fff;font-size:11px;}
.catPages2 {color:#AED6FF;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages2 a:link,
.catPages2 a:visited,
.catPages2 a:hover,
.catPages2 a:active {text-decoration:none;color: #fff;background:#9933ff;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages2 a:hover {background:#cc00ff;color:#fff;font-weight:bold;}
.catPages2 b {text-decoration:none;background:#9933ff;padding:3px 10px;color:#fff;font-size:11px;}
Красивый зелёный переключатель для светлых дизайнов.
Это в css:
Код:
.pagesBlockuz1 {color:#2c8a3a;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz1 a:link,
.pagesBlockuz1 a:visited,
.pagesBlockuz1 a:hover,
.pagesBlockuz1 a:active {text-decoration:none;color: #2c8a3a;background:#CDEDA5;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlockuz1 a:hover {background:#30963F;color:#75C954;font-weight:bold;}
.pagesBlockuz1 b {text-decoration:none;background:#37B63A;padding:3px 10px;color:#ABDD71;font-size:11px;}
.pagesBlockuz2 {color:#2c8a3a;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz2 a:link,
.pagesBlockuz2 a:visited,
.pagesBlockuz2 a:hover,
.pagesBlockuz2 a:active {text-decoration:none;color: #2c8a3a;background:#CDEDA5;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlockuz2 a:hover {background:#30963F;color:#75C954;font-weight:bold;}
.pagesBlockuz2 b {text-decoration:none;background:#37B63A;padding:3px 10px;color:#ABDD71;font-size:11px;}
Новый,стильный,красивый переключатель для ваших сайтов uCoz.Дизайн переключателя отличный!
Код переключателя кидаем в css. Для светлых дизайнов.
Код:
.catPages1 {font-size:12px;}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:active{
padding:5 10 5 10;
background-color: #fafafa;
text-decoration: none;
border:1px solid#e5e5e5;
color: #00c0ff;
}
.swchItemA {
padding:5 10 5 10;
background-color: #ffffff;
text-decoration: none;
border:1px solid#e2e2e2;
color: #e2e2e2; }
.catPages1 {padding:5 10 5 10;
background-color: #ffffff;
color: #00c0ff;}
.catPages1 a:hover {
padding:5 10 5 10;
background-color: #9d9d9d;
color: #fff;
}
Установка:
В CSS вставляем:
Код:
.catPages1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:hover,
.catPages1 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.catPages1 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.pagesBlockuz1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz1 a:link,
.pagesBlockuz1 a:visited,
.pagesBlockuz1 a:hover,
.pagesBlockuz1 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlockuz1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.pagesBlockuz1 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.pagesBlock1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlock1 a:link,
.pagesBlock1 a:visited,
.pagesBlock1 a:hover,
.pagesBlock1 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlock1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.pagesBlock1 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.catPages2 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.catPages2 a:link,
.catPages2 a:visited,
.catPages2 a:hover,
.catPages2 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.catPages2 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.catPages2 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.pagesBlockuz2 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlockuz2 a:link,
.pagesBlockuz2 a:visited,
.pagesBlockuz2 a:hover,
.pagesBlockuz2 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlockuz2 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.pagesBlockuz2 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
.pagesBlock2 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
.pagesBlock2 a:link,
.pagesBlock2 a:visited,
.pagesBlock2a:hover,
.pagesBlock2 a:active {text-decoration:none;color: #636363;background:#353535;padding:3px 10px;font-size:11px;font-weight:bold;}
.pagesBlock2 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
.pagesBlock2 b {text-decoration:none;background:#2c2c2c;padding:3px 10px;color:#ccc;font-size:11px;}
Переключать страниц форума (черно-синий)
ПУ--Управление дизайном--CSS. Ищем там:
/* forum Page switches */
и сразу после него - это:
/* ------------------- */
Все, что между ними, заменяем на это:
Код:
.switches {background:#FFF}
.pagesInfo {display:none}
.switch {background:#474747;font-size:7.6pt;height:22px;width:22px;font-family:Verdana}
.switch:hover {background:#c43737}
.switchActive {background:#21b1ff;font-weight:bold;color:#FFF;font-size:7pt;height:22px;width:22px}
a.switchDigit:link,a.switchBack:link,a.switchNext:link {text-decoration:none;color:#FFF}
a.switchDigit:visited,a.switchBack:visited,a.switchNext:visited {text-decoration:none;color:#FFF}
a.switchDigit:hover,a.switchBack:hover,a.switchNext:hover {text-decoration:underline}
a.switchDigit:active,a.switchBack:active,a.switchNext:active {text-decoration:underline}