Страница 1 из 11
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Синие переключатели страниц для сайта Ucoz
Синие переключатели страниц для сайта Ucoz
Kosten
Дата: Понедельник, 07.05.2012, 10:13 | Сообщение 1
Администраторы
Сообщений:16015
Награды: 51




Описание переключателей:
Синие переключатели страниц для сайта 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.02.2013, 15:27 | Сообщение 2
Пользователи
Сообщений:9
Награды: 0


Kosten, поставил, все нормально, но почему нет тени от кнопок?
Страна: (RU)
Kosten
Дата: Пятница, 22.02.2013, 15:53 | Сообщение 3
Администраторы
Сообщений:16015
Награды: 51


Сергеев, это картинка с тенями так они без теней!
Страна: (RU)
Сергеев
Дата: Пятница, 22.02.2013, 16:24 | Сообщение 4
Пользователи
Сообщений:9
Награды: 0


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


Сообщение отредактировал
Сергеев - Пятница, 22.02.2013, 16:25
Страна: (RU)
Kosten
Дата: Пятница, 22.02.2013, 18:46 | Сообщение 5
Администраторы
Сообщений:16015
Награды: 51


Сергеев, проверял этот код, не помню но у меня был и нижний и верхний ряд.
Страна: (RU)
Сергеев
Дата: Пятница, 22.02.2013, 19:08 | Сообщение 6
Пользователи
Сообщений:9
Награды: 0


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



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

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

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


Сообщение отредактировал
Сергеев - Пятница, 22.02.2013, 19:11
Страна: (RU)
Kosten
Дата: Пятница, 22.02.2013, 19:10 | Сообщение 7
Администраторы
Сообщений:16015
Награды: 51


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


Это низ новостей, у файлов так же. Как заметил по бокам кнопок затемнение. Это просто не убрал старые переключатели и наложил новые на них. Тебе надо убрать если есть чтоб были только цифры. Тогда и прописывай этот стили в CSS и все будит красиво!
Прикрепления: 5813929.jpg(9Kb)
Страна: (RU)
Сергеев
Дата: Пятница, 22.02.2013, 19:20 | Сообщение 8
Пользователи
Сообщений:9
Награды: 0


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



Спасибо. Ок!
Страна: (RU)
Kosten
Дата: Пятница, 22.02.2013, 19:23 | Сообщение 9
Администраторы
Сообщений:16015
Награды: 51


Сергеев, видно чистые стили стоят! То есть не было старых переключателей!
Страна: (RU)
Сергеев
Дата: Пятница, 22.02.2013, 19:44 | Сообщение 10
Пользователи
Сообщений:9
Награды: 0


Kosten, да, не ставил ещё кнопки
Страна: (RU)
Delete
Дата: Суббота, 23.02.2013, 01:22 | Сообщение 11
Проверенные
Сообщений:1076
Награды: 7


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

На случай если буду нужен, то я там же, где и был, когда был не нужен...
Страна: (RU)
Kosten
Дата: Суббота, 23.02.2013, 10:11 | Сообщение 12
Администраторы
Сообщений:16015
Награды: 51


N_O_O_B, думают пускай в думе! А йа знаю, как ставил их. В верхний переключатели будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!
Страна: (RU)
Сергеев
Дата: Суббота, 23.02.2013, 23:18 | Сообщение 13
Пользователи
Сообщений:9
Награды: 0


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

Kosten, озадачил. Какая такая полоса? Зачем полоса? То есть фигня, не стоило меня обычные цифры на эти кнопки?
Страна: (RU)
Kosten
Дата: Суббота, 23.02.2013, 23:29 | Сообщение 14
Администраторы
Сообщений:16015
Награды: 51


Сергеев, ты поменяй и посмотришь, стоило или нет!
У всех свое мнение и взгляды!
Страна: (RU)
Сергеев
Дата: Суббота, 23.02.2013, 23:55 | Сообщение 15
Пользователи
Сообщений:9
Награды: 0


Kosten, так уже стоит. Так-то нормально.
Просто вот эта фраза заставила задуматься:
Цитата (Kosten)
будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!

Что там будет за сотней страниц?
Страна: (RU)
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Синие переключатели страниц для сайта Ucoz
Страница 1 из 11
Поиск: