Привет, пока я отсутствовал и не добавлял новые уроки на сайт, в это время я изрядно поработал над главной страницей нашего совместного сайта. Добавил на него переключатели страниц, слайдер и выпадающие окно.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается
от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую.
Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Сегодня в этом уроке я расскажу как настроить переключатели страниц на своём сайте ucoz, и первым делом покажу как их подключить, а вторым как их настроить красиво.
Есть ещё одна не решённая проблема на сайте, после того как я добавляю игру, она у меня на главной странице выводится последняя, то-есть что-бы посмотреть новые игры которые были добавлены на сайт, приходится идти на третью страницу и самая последняя в списке игра будет самая новая.
Это очень не удобно, так как человек который захочет посмотреть новые игры, должен будет постоянно заходить на последнею страницу сайта и смотреть что там новенького, а некоторые посетители будут думать что сайт вообще не обновляется, так как на главной странице постоянно весят старые игры.
Так что мы это исправим.
Выводим новые игры в первом ряду:
В системе ucoz модули которые подключены к сайту, можно настраивать под себя. Для этого есть специальный раздел, который можно отыскать если зайти в панель управления. В панели управления нажмите на модуль онлайн игры и настройка модуля.
Откроется страница на которой мы сразу настроим количество игр которые будут выводится на главной странице. В моём случае пока что 6 штук на главной, 16 в разделе и 18 в категориях. Но это всё я потом поменяю самостоятельно на то количество которое мне нужно, вам советую сделать то-же самое.
6 штук я сделал что-бы на главной странице можно было подключить переключателе.
Нас интересует больше второй вариант там где сортируются новости, в моём случае я везде поставил сортировку по дата добавления материала D. Это означает что игры которые были добавлены последними будут отображаться на странице в первых рядах.
Сохраните документ, кнопку найдёте внизу страницы и можете посмотреть что получилось на сайте. У меня на сайте всё сработало!
Переключатели страниц настройка
И так второй этап это настройка переключателей страниц. Первым делом их нужно установить на страницу. Для этого откройте страницу управление дизайном.
и главную страницу модуля
Откроется страница с кодом, найди переменный код $BODY$ и после него вставь следующий код.
Код:
Всё, на этом работа с этой страницей окончена, не забудь сохранить документ и посмотреть что на сайте получилось. Должно получится вот что - Ты уведешь переключатели страниц, которые ещё не настроены! Пример показать не могу так как у меня они уже настроены.
Теперь для них нужно установить стили, для этого шагай в управление дизайном
и в стили css
Промотай страницу до самого низа и в конце вставь следующие стили -
Пример:
Код:
text-align:center;
margin-top:10px;
margin-bottom:8px;
}
Разберём немного стили.
Выше мы вставляли блок с кнопками после системного кода $BODY$. У этого блока есть название pagenator, как раз мы и обращаемся в стилях к этому блоку через его имя .pagenator, и говорим что выравни своё содержимое по центру text-align:center; по этому наши кнопки сейчас находятся по центру. Далее мы говорим блоку что отступи сверху на 10 пикселей от картинок, в этом нам помогло правило margin-top:10px; ну и последний код говорит блоку что нужно отступить снизу 8 пикселей.
Всё вставим следующий блок стилей.
Пример:
Код:
background:#3FBC3F;
padding:4px 10px;
color:#fff;
}
Разберём стили:
В следующих правилах мы обращаемся к кнопкам которые мы вставили при помощи системного кода $PAGE_SELECTOR$. В данном случае мы обращаемся к активированной кнопке, то есть если кнопка была нажата, тогда эти стили подключатся. Здесь мы задаём задний фон для кнопки background:#3FBC3F; - это тёмно зелёный цвет. Задаём у кнопке внутренние отступы, для того чтобы она у нас была как бы квадратная при помощи правила paddung:4px 10px; то есть это значение задаёт отступ в 4 пикселя с верху и снизу, и 10 пикселей с лева и справа. color:#fff; задаёт белый цвет для цифры.
Следующий код.
Код:
background:#009FE7;
padding:4px 10px;
color:#fff;
}
color:#fff;
}
Задаёт стили для не активированных кнопок, то-есть для тех кнопок что небыли нажаты. Первый код похож на предыдущий, в нём только у background меняется цвет на синий. А второй код с именем .swchItem span {} имеет одно только правило, для ссылок у которых есть тег спам, оно делает цвет цифр белым.
Сохраним посмотрим что получилось, хотя вы уже видели что получилось, на первом скриншоте. Думаю на этом сегодня всё, спасибо за внимание.