Синие переключатели страниц для сайта Ucoz - Форум

Понедельник, 07 Мая 2012, 10:13 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

Описание переключателей:
Синие переключатели страниц для сайта Ucoz, да в первые вижу такие кнопки переключатели, видать создатель вложил в них все, при наведении курсора они меняют цвет , к любой тематики сайта подойдут также к дизайн сайта.
Приступаем к установке
Заходим в CSS И ТАМ ПРОПИСЫВАЕМ ( ВСТАВЛЯЕМ ) СТИЛЬ.

Code

/* PageSelector Start csomsk.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://zornet.ru/zornet_ru1/switch.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch.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://zornet.ru/zornet_ru1/switch-hover.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://zornet.ru/zornet_ru1/switch-hover.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 */

Страна: (RU)

Пятница, 22 Февраля 2013, 15:27 | Сообщение 2

Пользователи

Сообщений:9

Награды: 0

Kosten, поставил, все нормально, но почему нет тени от кнопок?

Страна: (RU)

Пятница, 22 Февраля 2013, 15:53 | Сообщение 3

Администраторы

Сообщений:44490

Награды: 70

Сергеев, это картинка с тенями так они без теней!

Страна: (RU)

Пятница, 22 Февраля 2013, 16:24 | Сообщение 4

Пользователи

Сообщений:9

Награды: 0

Kosten, понятно. Как взять эти картинки с тенями? Их всего две, так я понял.
Попробовал их скопировать, но почему-то сохранился вот этот конкретный ряд.

Сообщение отредактировал
Сергеев - Пятница, 22 Февраля 2013, 16:25

Страна: (RU)

Пятница, 22 Февраля 2013, 18:46 | Сообщение 5

Администраторы

Сообщений:44490

Награды: 70

Сергеев, проверял этот код, не помню но у меня был и нижний и верхний ряд.

Страна: (RU)

Пятница, 22 Февраля 2013, 19:08 | Сообщение 6

Пользователи

Сообщений:9

Награды: 0

Kosten, наверное я не так объяснил. С рядами порядок, оба отображаются картинками.
Я постом выше сказал что попробовал скопировать рисунок кнопки, но в итоге скопировался весь ряд вот этот:

Если взять две кнокпи с тенями и вставить их в код, тогда и у меня будет точно так же как и у Вас здесь. Я правильно понял?

....................
Блин, затупил, это ж не страницы, это пример показан! )))

Вобщем нужно поискать пару картинок с чуть разными оттенками.

Сообщение отредактировал
Сергеев - Пятница, 22 Февраля 2013, 19:11

Страна: (RU)

Пятница, 22 Февраля 2013, 19:10 | Сообщение 7

Администраторы

Сообщений:44490

Награды: 70

Сергеев, Смотри вот на скрине

Это низ новостей, у файлов так же. Как заметил по бокам кнопок затемнение. Это просто не убрал старые переключатели и наложил новые на них. Тебе надо убрать если есть чтоб были только цифры. Тогда и прописывай этот стили в CSS и все будит красиво!

Прикрепления: 5813929.jpg (9.4 Kb)

Страна: (RU)

Пятница, 22 Февраля 2013, 19:20 | Сообщение 8

Пользователи

Сообщений:9

Награды: 0

Да, Kosten, всё в порядке, и низ, и верх работают.

Спасибо. Ок!

Страна: (RU)

Пятница, 22 Февраля 2013, 19:23 | Сообщение 9

Администраторы

Сообщений:44490

Награды: 70

Сергеев, видно чистые стили стоят! То есть не было старых переключателей!

Страна: (RU)

Пятница, 22 Февраля 2013, 19:44 | Сообщение 10

Пользователи

Сообщений:9

Награды: 0

Kosten, да, не ставил ещё кнопки

Страна: (RU)

Delete

Суббота, 23 Февраля 2013, 01:22 | Сообщение 11

Проверенные

Сообщений:1079

Награды: 7

« 65 »

Kosten, ты думаеш что там все четко стоит ? О_о

На случай если буду нужен, то я там же, где и был, когда был не нужен...

Страна: (RU)

Суббота, 23 Февраля 2013, 10:11 | Сообщение 12

Администраторы

Сообщений:44490

Награды: 70

N_O_O_B, думают пускай в думе! А йа знаю, как ставил их. В верхний переключатели будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!

Страна: (RU)

Суббота, 23 Февраля 2013, 23:18 | Сообщение 13

Пользователи

Сообщений:9

Награды: 0

Цитата (Kosten)

будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!

Kosten, озадачил. Какая такая полоса? Зачем полоса? То есть фигня, не стоило меня обычные цифры на эти кнопки?

Страна: (RU)