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

Сегодня в этом уроке я расскажу как настроить переключатели страниц на своём сайте 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 {} имеет одно только правило, для ссылок у которых есть тег спам, оно делает цвет цифр белым.

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