• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Синие переключатели страниц для сайта Ucoz
Синие переключатели страниц для сайта Ucoz
Kosten
 		Понедельник, 07 Мая 2012 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »

Описание переключателей:
Синие переключатели страниц для сайта 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 | Сообщение 2
Оффлайн
Пользователи
Сообщений:9
Награды: 0
« 0 »
Kosten, поставил, все нормально, но почему нет тени от кнопок?
Страна: (RU)
Kosten
 		Пятница, 22 Февраля 2013 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Сергеев, это картинка с тенями так они без теней!
Страна: (RU)
Сергеев
 		Пятница, 22 Февраля 2013 | Сообщение 4
Оффлайн
Пользователи
Сообщений:9
Награды: 0
« 0 »
Kosten, понятно. Как взять эти картинки с тенями? Их всего две, так я понял.
Попробовал их скопировать, но почему-то сохранился вот этот конкретный ряд.

Сообщение отредактировал
Сергеев - Пятница, 22 Февраля 2013, 16:25
Страна: (RU)
Kosten
 		Пятница, 22 Февраля 2013 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Сергеев, проверял этот код, не помню но у меня был и нижний и верхний ряд.
Страна: (RU)
Сергеев
 		Пятница, 22 Февраля 2013 | Сообщение 6
Оффлайн
Пользователи
Сообщений:9
Награды: 0
« 0 »
Kosten, наверное я не так объяснил. С рядами порядок, оба отображаются картинками.
Я постом выше сказал что попробовал скопировать рисунок кнопки, но в итоге скопировался весь ряд вот этот:



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

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

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

Сообщение отредактировал
Сергеев - Пятница, 22 Февраля 2013, 19:11
Страна: (RU)
Kosten
 		Пятница, 22 Февраля 2013 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Сергеев, Смотри вот на скрине


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



Спасибо. Ок!
Страна: (RU)
Kosten
 		Пятница, 22 Февраля 2013 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Сергеев, видно чистые стили стоят! То есть не было старых переключателей!
Страна: (RU)
Сергеев
 		Пятница, 22 Февраля 2013 | Сообщение 10
Оффлайн
Пользователи
Сообщений:9
Награды: 0
« 0 »
Kosten, да, не ставил ещё кнопки
Страна: (RU)
Delete
 		Суббота, 23 Февраля 2013 | Сообщение 11
Оффлайн
Проверенные
Сообщений:1079
Награды: 7
« 65 »
Kosten, ты думаеш что там все четко стоит ? О_о
На случай если буду нужен, то я там же, где и был, когда был не нужен...
Страна: (RU)
Kosten
 		Суббота, 23 Февраля 2013 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
N_O_O_B, думают пускай в думе! А йа знаю, как ставил их. В верхний переключатели будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!
Страна: (RU)
Сергеев
 		Суббота, 23 Февраля 2013 | Сообщение 13
Оффлайн
Пользователи
Сообщений:9
Награды: 0
« 0 »
Цитата (Kosten)
будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!

Kosten, озадачил. Какая такая полоса? Зачем полоса? То есть фигня, не стоило меня обычные цифры на эти кнопки?
Страна: (RU)
Kosten
 		Суббота, 23 Февраля 2013 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
« 555 »
Сергеев, ты поменяй и посмотришь, стоило или нет!
У всех свое мнение и взгляды!
Страна: (RU)
Сергеев
 		Суббота, 23 Февраля 2013 | Сообщение 15
Оффлайн
Пользователи
Сообщений:9
Награды: 0
« 0 »
Kosten, так уже стоит. Так-то нормально.
Просто вот эта фраза заставила задуматься:
Цитата (Kosten)
будут стоять ровно, нижний так же ровно но когда дойдет до сотни там будит полоса!

Что там будет за сотней страниц?
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Синие переключатели страниц для сайта Ucoz
  • Страница 1 из 1
  • 1
Поиск: