Стиль переключателей страниц для uCoz
 | |
| Красивый стиль на переключатели страниц на светлый и на темный дизайн сайта. Который полностью создан на стилях и редактируется. Давайте разберемся как их поставить, ведь иногда стили идут как вверх так и вниз. Здесь представлен материал на большие кнопки и вверху они как то не корректно будет смотреться, что пришлось убрать и оставить только на переключатели внизу. И уже при установке вы можете производить формирование их стилистике, а точнее просто подогнать под ваш интернет ресурс. Не каждый формат может подойти по своей стилистике, и здесь вы можете выстроить как фигуру кнопки и ее высоту и ширину. Не нужно забывать, что если вы на какой-то странице находитесь, то одна кнопка меняется в своей гамме, так что можно сказать идет 2 стиля, на общее и на ту, которая работает. Для начало вам нужно сайта убрать все стили, что есть на старые, и только после этого ставим новые. Так как если не уберете, то получиться конфликт с предыдущими, и из этого визуально не корректно видеться. Как пример на тестовом сайте и его проверка на работоспособность:  Приступаем к установке: Идем в админ панель, и заходим в CSS и ставим там где ранее у вас идут по умолчанию, но до этого нужно просто их заменить. Код .pagesBlockuz2 b,#pagesBlock2 b {margin: 0 3px;display:inline-block;padding:0 10px;line-height: 40px;min-width: 40px;border-radius: 5px; font-weight:normal;background: #475676;color:#fff;font-size: 14px;font-weight: normal;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.31);} .pagesBlockuz2 a,#pagesBlock2 a {margin: 0 3px;display:inline-block;padding:0 10px;line-height: 40px;min-width: 40px;border-radius: 5px; text-decoration:none;background: #487890;color:#fff;font-size: 14px;font-weight: normal;transition: 0.3s;box-shadow: 0px 4px 4px rgba(0,0,0,0.05);} .pagesBlockuz2 a:hover,#pagesBlock2 a:hover {background:#90A4AE;color:#fff;transition: 0.3s;} PS - когда что то меняете или производите в дизайн замену, обязательно перед работой все сохраните, чтоб в любой момент откатить можно. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
