Привет, пока я отсутствовал и не добавлял новые уроки на сайт, в это время я изрядно поработал над главной страницей нашего совместного сайта. Добавил на него переключатели страниц, слайдер и выпадающие окно.

Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать, вот в этой инструкции.

Реклама:

Сегодня в этом уроке я расскажу как настроить переключатели страниц на своём сайте ucoz, и первым делом покажу как их подключить, а вторым как их настроить красиво.

Главная страница:

Есть ещё одна не решённая проблема на сайте, после того как я добавляю игру, она у меня на главной странице выводится последняя, то-есть что-бы посмотреть новые игры которые были добавлены на сайт, приходится идти на третью страницу и самая последняя в списке игра будет самая новая.

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

Так что мы это исправим.

Выводим новые игры в первом ряду:

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

Изображение:

Откроется страница на которой мы сразу настроим количество игр которые будут выводится на главной странице. В моём случае пока что 6 штук на главной, 16 в разделе и 18 в категориях. Но это всё я потом поменяю самостоятельно на то количество которое мне нужно, вам советую сделать то-же самое.

6 штук я сделал что-бы на главной странице можно было подключить переключателе.

Нас интересует больше второй вариант там где сортируются новости, в моём случае я везде поставил сортировку по дата добавления материала D. Это означает что игры которые были добавлены последними будут отображаться на странице в первых рядах.

Изображение:

Сохраните документ, кнопку найдёте внизу страницы и можете посмотреть что получилось на сайте. У меня на сайте всё сработало!

Переключатели страниц настройка

И так второй этап это настройка переключателей страниц. Первым делом их нужно установить на страницу. Для этого откройте страницу управление дизайном.

Изображение:

и главную страницу модуля

Откроется страница с кодом, найди переменный код $BODY$ и после него вставь следующий код.

Пример:

Код:

Всё, на этом работа с этой страницей окончена, не забудь сохранить документ и посмотреть что на сайте получилось. Должно получится вот что - Ты уведешь переключатели страниц, которые ещё не настроены! Пример показать не могу так как у меня они уже настроены.

Теперь для них нужно установить стили, для этого шагай в управление дизайном

и в стили css

Промотай страницу до самого низа и в конце вставь следующие стили -

Пример:

Код:

Разберём немного стили.

Выше мы вставляли блок с кнопками после системного кода $BODY$. У этого блока есть название pagenator, как раз мы и обращаемся в стилях к этому блоку через его имя .pagenator, и говорим что выравни своё содержимое по центру text-align:center; по этому наши кнопки сейчас находятся по центру. Далее мы говорим блоку что отступи сверху на 10 пикселей от картинок, в этом нам помогло правило margin-top:10px; ну и последний код говорит блоку что нужно отступить снизу 8 пикселей.

Всё вставим следующий блок стилей.

Пример:

Код:

Разберём стили:

В следующих правилах мы обращаемся к кнопкам которые мы вставили при помощи системного кода $PAGE_SELECTOR$. В данном случае мы обращаемся к активированной кнопке, то есть если кнопка была нажата, тогда эти стили подключатся. Здесь мы задаём задний фон для кнопки background:#3FBC3F; - это тёмно зелёный цвет. Задаём у кнопке внутренние отступы, для того чтобы она у нас была как бы квадратная при помощи правила paddung:4px 10px; то есть это значение задаёт отступ в 4 пикселя с верху и снизу, и 10 пикселей с лева и справа. color:#fff; задаёт белый цвет для цифры.

Следующий код.

Пример:

Код:

Задаёт стили для не активированных кнопок, то-есть для тех кнопок что небыли нажаты. Первый код похож на предыдущий, в нём только у background меняется цвет на синий. А второй код с именем .swchItem span {} имеет одно только правило, для ссылок у которых есть тег спам, оно делает цвет цифр белым.

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

Важно! Если вдруг у вас получилось настроить сайт с помощью моих уроков, и вам уже не в первый раз он помогает разобраться с разными задачами, тогда не забудьте поблагодарить Автора в комментариях! После благодарности Автор знает что труд был ценен и полезен, а то время которое было затрачено на урок, не потрачено в пустую и пригодилось хорошим людям.
Спасибо за внимание и понимание.
Реклама:

1. Благодарность бывает разная, поддержка проекта в денежном выражении.
2. Поделится ссылкой, на пример на своём сайте или в соц сетях.
3. Оставить комментарий на сайте.

Есть много разных вариантов как отблагодарить Автора.