Жизнь Гигабайта — Развлекательно-информативный портал

Чёрный переключатель новостей

GraF — Mon, 12 Aug 2013 06:30:21 GMT

[spoiler="Скрин"][/spoiler]

В самый низ CSS вставляем это:

Код

catPages2 {color:#000000;border:0px;margin-bottom:10px;margin-top:10px;}
  .catPages2 a:link,
  .catPages2 a:visited,
  .catPages2 a:hover,
  .catPages2 a:active {text-decoration:none;color: #FFFFFF;background:#BEBEBE;padding:3px 10px;font-size:11px;font-weight:bold;}
  .catPages2 a:hover {background:#000000;color:#000000;font-weight:bold;}

  .catPages2 b {text-decoration:none;background:#000000;padding:3px 10px;color:#000000;font-size:11px;}
  .catPages1 {color:#607080;border:0px;margin-bottom:10px;margin-top:10px;}
  .catPages1 a:link,
  .catPages1 a:visited,
  .catPages1 a:hover,
  .catPages1 a:active {text-decoration:none;color: #FFFFFF;background:#000000;padding:3px 10px;font-size:11px;font-weight:bold;}
  .catPages1 a:hover {background:#FFFFFF;color:#000000;font-weight:bold;}
  .catPages1 b {text-decoration:none;background:#FFFFFF;padding:3px 10px;color:#000000;font-size:11px;}

Переключатель страниц

GraF — Mon, 12 Aug 2013 06:28:22 GMT

[spoiler="Скрин"][/spoiler]

Пишите в CSS:

Код

.catPages1 {
  padding:3px;
  margin:3px;
  text-align:center;
  color:#ffffff;
  }

  .catPages1 a:link {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #2C2C2C;
  text-decoration: none;
  color:#ffffff;
  background: #2C2C2C url(http://xtremes.ru/22.gif);
  }

  .catPages1 a:hover, .catPages1 a:active {
  border:1px solid #AAD83E;
  color: #FFFfff;
  background: #AAD83E url(http://xtremes.ru/22.gif);
  }

  .catPages1 b { border:1px solid #AAD83E;
  padding: 0px 5px 2px 5px;
  margin-right: 2px;
  color: #FFFfff;
  background: #AAD83E url(http://xtremes.ru/22.gif);}

Переключатель страниц от vk

GraF — Mon, 12 Aug 2013 06:22:38 GMT

[spoiler="Скрин"][/spoiler]

Красивый вид переключателя страниц, на этот раз использованы стили от сайта vk com, сейчас они конечно-же там не используются, так как их полностью заменили на элементарную подгруздку страницы при перемотке.
Красивый переключатель страниц для ucoz и сделан под эдакий web портал для web-мастеров:)

В верхнею часть сайта: / оно-же Шапка:

Код

Это CSS код, соответственно в CSS:

Код

.pages_1 {width:1px;height:100px;overflow:hidden;background:#2b587a color: #2b587a;
    background: #597da3;
    border : 1px solid #2b587a; }
    .pages_2 {background:#F0F0F0;height:50px;border : 1px solid #999999; }
    .pagesBlockuz1 {margin-left:10px;margin-right:10px;}
    .swchItemA {color:#2b587a;font-seight:bold;text-desotation:none;border-bottom:3px solid #2b587a;padding:3px;background:none;margin:5px;}
    .swchItem {color:#2b587a;text-desotation:none;padding:0;background:none;margin:5px;}
    .swchItem:hover {color:#999999;text-desotation:none;padding:0;background:none;margin:5px;}
    .swchItemDots {color:#2b587a;text-desotation:none;padding:0;background:none;margin:5px;}

Переключатель страниц для ucoz

GraF — Fri, 05 Apr 2013 13:28:59 GMT

[spoiler="Скрин"][/spoiler]

Светлый переключатель страниц для сайта ucoz. Скрипт переключатель ucoz использует пару картинок. Отличный PageScroller для ucoz.

Установка переключателя страниц для ucoz:

Вставляем код переключателя страниц ucoz в Панель управления ->>Управление дизайном ->>Таблица стилей (CSS) (в самый низ):

Код

.catPages1 a:link,
.catPages1 a:visited,
.catPages1 a:hover,
.catPages1 a:active {text-decoration:none;color: #fff;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;}
.catPages1 a:hover {BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);color:#fff;font-weight:bold;}
.catPages1 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;}
  .catPages2 {color:#ffffff;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-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;}
  .catPages2 a:hover {background:#0094E0;color:#FFFFFF;font-weight:bold;}
  .catPages2 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;}
  .pagesBlockuz1 {color:#ffffff;border:0px;margin-bottom:10px;margin-top:10px;}
  .pagesBlockuz1 a:link,
  .pagesBlockuz1 a:visited,
  .pagesBlockuz1 a:hover,
  .pagesBlockuz1  a:active {text-decoration:none;color: #fff;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;}
  .pagesBlockuz1 a:hover {BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);color:#fff;font-weight:bold;}
  .pagesBlockuz1 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;}

  .pagesBlockuz2 {color:#ffffff;border:0px;margin-bottom:10px;margin-top:10px;}
  .pagesBlockuz2 a:link,
  .pagesBlockuz2 a:visited,
  .pagesBlockuz2 a:hover,
  .pagesBlockuz2 a:active {text-decoration:none;color: #fff;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;} .pagesBlockuz2 a:hover {background:#0094E0;color:#FFFFFF;font-weight:bold;}
  .pagesBlockuz2 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;}
  .pagesBlock1 {color:#ffffff;border:0px;margin-bottom:10px;margin-top:10px;}
  .pagesBlock1 a:link,
  .pagesBlock1 a:visited,
  .pagesBlock1 a:hover,
  .pagesBlock1 a:active {text-decoration:none;color: #fff;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;}
  .pagesBlock1 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
  .pagesBlock1 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;} .pagesBlock2 {color:#ffffff;border:0px;margin-bottom:10px;margin-top:10px;}

  .pagesBlock2 a:link,
  .pagesBlock2 a:visited,
  .pagesBlock2 a:hover,
  .pagesBlock2 a:active {text-decoration:none;color: #fff;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;}
  .pagesBlock2 a:hover {background:#2c2c2c;color:#FFFFFF;font-weight:bold;}
  .pagesBlock2 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://wallaby.ucoz.ru/Images_template/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;}

Черный переключатель для uCoz

GraF — Fri, 05 Apr 2013 13:26:05 GMT

[spoiler="Скрин"][/spoiler]

Этот черный переключатель подойдёт под тёмные дизайны. Код переключателя состоит из CSS кода, без использования изображений. Переключатель uCoz работает почти во всех модулях, таких как: Каталог файлов, Каталог статей, Новости сайта.

Установка CSS

Заходим в Панель Управления - Дизайн - Управление дизайном(CSS), этот код вставляете в самый низ:

Код

/* Pages wallaby.ucoz.ru */
  .catPages2, .pagesBlockuz2, .pagesBlock2 {color:#000000;border:0px;margin-bottom:10px;margin-top:10px;}
  .catPages2 a:link, .pagesBlockuz2 a:link, .pagesBlock2 a:link
  .catPages2 a:visited, .pagesBlockuz2 a:visited,
  .catPages2 a:hover, .pagesBlockuz2 a:hover,
  .catPages2 a:active, .pagesBlockuz2 a:active {text-decoration:none;color: #FFFFFF;background:#BEBEBE;padding:3px 10px;font-size:11px;font-weight:bold;}
  .catPages2 a:hover, .pagesBlockuz2 a:hover {background:#000000;color:#000000;font-weight:bold;}
  .catPages2 b, .pagesBlockuz2 b {text-decoration:none;background:#000000;padding:3px 10px;color:#000000;font-size:11px;}
  .catPages1, .pagesBlockuz1 {color:#607080;border:0px;margin-bottom:10px;margin-top:10px;}
  .catPages1 a:link, .pagesBlockuz1 a:link,
  .catPages1 a:visited, .pagesBlockuz1 a:visited,
  .catPages1 a:hover, .pagesBlockuz1 a:hover,
  .catPages1 a:active, .pagesBlockuz1 a:active {text-decoration:none;color: #FFFFFF;background:#000000;padding:3px 10px;font-size:11px;font-weight:bold;}
  .catPages1 a:hover, .pagesBlockuz1 a:hover {background:#FFFFFF;color:#000000;font-weight:bold;}
  .catPages1 b, .pagesBlockuz1 b {text-decoration:none;background:#FFFFFF;padding:3px 10px;color:#000000;font-size:11px;}
/*----------------------------------*/

Серый переключатель страниц для uCoz

GraF — Fri, 05 Apr 2013 13:23:49 GMT

[spoiler="Скрин"][/spoiler]

Установка CSS

Заходим в П.У - Дизайн - Управление дизайном(CSS) и в самый низ вставляем код переключателя страниц ucoz:

Код

/* PageSelector Start wallaby.ucoz.ru */
  .pagesBlockuz1 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;text-shadow:0 1px 0 #000;}
  .pagesBlockuz1 a:link,
  .pagesBlockuz1 a:visited,
  .pagesBlockuz1 a:hover,
  .pagesBlockuz1 a:active {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch_grey.png') #0082a8;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlockuz1 a:hover {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;text-decoration:none;color:#fff;}
  .pagesBlockuz1 b {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .catPages1 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;text-shadow:0 1px 0 #000;}
  .catPages1 a:link,
  .catPages1 a:visited,
  .catPages1 a:hover,
  .catPages1 a:active {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch_grey.png') #0082a8;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .catPages1 a:hover {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;text-decoration:none;color:#fff;}
  .catPages1 b {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlock1 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;text-shadow:0 1px 0 #000;}
  .pagesBlock1 a:link,
  .pagesBlock1 a:visited,
  .pagesBlock1 a:hover,
  .pagesBlock1 a:active {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch_grey.png') #0082a8;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlock1 a:hover {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;text-decoration:none;color:#fff;}
  .pagesBlock1 b {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .catPages2 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;text-shadow:0 1px 0 #000;}
  .catPages2 a:link,
  .catPages2 a:visited,
  .catPages2 a:hover,
  .catPages2 a:active {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch_grey.png') #0082a8;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .catPages2 a:hover {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;text-decoration:none;color:#fff;}
  .catPages2 b {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlockuz2 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;text-shadow:0 1px 0 #000;}
  .pagesBlockuz2 a:link,
  .pagesBlockuz2 a:visited,
  .pagesBlockuz2 a:hover,
  .pagesBlockuz2 a:active {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch_grey.png') #0082a8;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlockuz2 a:hover {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;text-decoration:none;color:#fff;}
  .pagesBlockuz2 b {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlock2 {color:#ffffff;border:1px;margin-bottom:10px;margin-top:10px;text-shadow:0 1px 0 #000;}
  .pagesBlock2 a:link,
  .pagesBlock2 a:visited,
  .pagesBlock2 a:hover,
  .pagesBlock2 a:active {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch_grey.png') #0082a8;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  .pagesBlock2 a:hover {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;text-decoration:none;color:#fff;}
  .pagesBlock2 b {display:inline-block;height:16px;background:url('http://wallaby.ucoz.ru/page/switch-hover_grey.png') #00a8c3;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-weight:600;margin:0 2px;padding-top:3px;padding-right:9px;padding-left:9px;color:#fff;}
  /* PageSelector end */

Переключатель страниц каталога файлов для ucoz

GraF — Fri, 05 Apr 2013 13:21:30 GMT

[spoiler="Скрин"][/spoiler]

Отличная замена стандартным переключателем страниц для ucoz. Скрипт сделан на css3 и jQuery для Каталога Файлов. Главной особенностью данного переключателя страниц помимо красивой стилизации, является возможность разворачивания полного списка страниц и возвращение к компактному виду в один клик.

Установка:

На страницах Каталога файлов, где есть переключатели, замените $PAGE_SELECTOR$ на:

Код