» »

Переключатели страниц 2 формата для uCoz

Переключатели страниц 2 формата для uCoz

Представлено 2 формата переключателей на одном и том же стили, только здесь один был немного переделан и они полностью на CSS состоят. Смотрятся по стилистике красиво, можно сделать тени на них, что на нервом варианте как раз представлено. Идут они сразу на верхнее и нижнее переключатели, что если кому только нужны одни в низу, то им придется немного отредактировать стиль. Что делается просто, если вы имеете хоть немного задатка, как вообще работают стили на сайте.

Если говорить об установке, то сейчас даже системные шаблоны идут со своим дизайн, да он не очень, но его нужно убирать и ставить уже свои CSS3. Убираем так, чтоб только одни цифры остались и потом на их место ставим уже свои. Вы можете их формировать как вам нужно и видите их на своем интернет ресурсе. Здесь оно всего на 10 и 30 пикселей закруглены, если сделать немного больше, то они получатся круглыми. И есть еще стили по ширине и длине кнопки, что отлично для веб мастера, который может выстроить кнопку, ту которую он хочет.

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

Первый переключатель:

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

CSS:

Код
.pagesBlockuz1 b,.pagesBlockuz2 b,#pagesBlock1 b,#pagesBlock2 b {margin: 0 3px;display:inline-block;padding:0 10px;line-height:30px;min-width: 30px;border-radius: 10px; font-weight:normal;background: #465294;color: #FFF;font-size:11px;font-weight: normal;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.19);} .pagesBlockuz1 a,.pagesBlockuz2 a,#pagesBlock1 a,#pagesBlock2 a {margin: 0 3px;display:inline-block;padding:0 10px;line-height:30px;min-width: 30px;border-radius: 10px; text-decoration:none;background:#B0BEC5;color:#fff;font-size:11px;font-weight: normal;transition: 0.3s;box-shadow: 0px 4px 4px rgba(0,0,0,0.05);} .pagesBlockuz1 a:hover,.pagesBlockuz2 a:hover,#pagesBlock1 a:hover,#pagesBlock2 a:hover {background: #6599B3;color:#fff;transition: 0.3s;}


Второй переключатель:

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

CSS:

Код
.pagesBlockuz1 b,.pagesBlockuz2 b,#pagesBlock1 b,#pagesBlock2 b {margin: 0 3px;display:inline-block;padding:0 10px;line-height:30px;min-width:30px;border-radius:30px; font-weight:normal;background:#4CAF50;color:#fff;font-size:11px;font-weight: normal;box-shadow: 0px 4px 4px rgba(0,0,0,0.05);} .pagesBlockuz1 a,.pagesBlockuz2 a,#pagesBlock1 a,#pagesBlock2 a {margin: 0 3px;display:inline-block;padding:0 10px;line-height:30px;min-width:30px;border-radius:30px; text-decoration:none;background:#B0BEC5;color:#fff;font-size:11px;font-weight: normal;transition: 0.3s;box-shadow: 0px 4px 4px rgba(0,0,0,0.05);} .pagesBlockuz1 a:hover,.pagesBlockuz2 a:hover,#pagesBlock1 a:hover,#pagesBlock2 a:hover {background:#90A4AE;color:#fff;transition: 0.3s;}


Прежде чем ставить какой то код и скрипт, то всегда нужно поставить на сохранение, чтоб потом можно вернуть все обратно, это касается всего, что решили устанавливать или менять на портале.

Источник: proucoz.site
24.02.2017 Просмотров: 403 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
FeStemBer
FeStemBer 24.02.2017 01:341
0
Переключателей хватает, этот сейчас быстро поставил и проверил, здесь только под них его хорошо выставлять, на вверху они не нужны.
tsakonter
tsakonter 24.02.2017 01:432
0
Если кому нужно объяснить, как найти стили от сайта, который идут на переключатели, то пишите, постараюсь четко донести. А ток вас нужно найти все что начинается с этого .pagesBlockuz1 стиля, где то 150 -170 и там будет не больше пяти, так вот убираем, и все останутся только голые не прикрытые цифры. 11a
Kosten
Kosten 24.02.2017 01:473
0
Можно по другому найти, просто на браузере наводим клике на тот предмет, в нашем случай переключатель и правый клик "Просмотреть код" и так на стили выйти и увидеть под каким номером они установлены, главное лишнее не убрать.
avatar