Оформление шаблона сайта для Joomla с использованием CSS. Урок 5

На этом уроке мы будем приводить наш шаблон Trip в порядок при помощи каскадных таблиц стилей CSS. Первым делом, хочу показать к чему мы придем в конце урока. Вот скриншот уже готового шаблона, глядя на него, вам будет проще понять, что за код мы создаем.

Я уже писала, что шаблон, который мы делаем, хорошо устанавливается, как на Joomla 2.5, так и на Joomla 3.0. Это скриншот шаблона, установленного на Joomla 3.0.

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

Итак открываем файл template.css и начнем работать. Зададим начальные отступы между элементами шаблона и значение полей вокруг содержимого элементов.

* {margin:0;

padding:0;}

Общие значения для заголовков всех уровней на сайте

h1, h2, h3, h4, h5, h6,

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited

{ font-weight: normal;

font-style: normal;

text-decoration: none;}

Оформление всех ссылок на сайте

a { text-decoration: underline;

color:#004f64;}

Непосещенные ссылки

a:link { color: #004f64;}

Посещенные ссылки

a:visited{ color:#3b98b0;}

Ссылка при наведении

a:hover{ text-decoration: none;

color: #fe1919;}

 Оформление заголовков 1 уровня

h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{

font-size:22px;

color: #3b98b0;

text-align:left;

margin-bottom:5px;}

Оформление заголовков 2 уровня

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover{

font-size:20px;

color: #004f64;

text-align:left;

border-bottom:1px solid #a7a6aa;

margin-bottom:5px;}

Оформление заголовков 3 уровня

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{

font-size: 18px;

color: #30b2cf;

text-align:left;}

Оформление заголовков 4-6 уровня. Заголовки этих уровней используются редко, но если вы хотите, то можете расписать оформление каждого уровня отдельно.

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover,h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover,h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover{

font-size:16px;

color: #3b98b0;

text-align:left;}

 Оформление изображений на сайте. Картинка как ссылка.

a img {border: none;}

Картинка в тексте. Далее, в статьях мы зададим один отступ, а в модулях другой.

p img {margin:0;}

Оформление абзацев в тексте.

p {margin: 0 0 10px 0;}

Теперь можно приступать к оформлению блоков. Чтобы сделать задний план нашей веб-странички, я нарисовала в Фотошопе градиент, вырезала из него сверху вниз полоску шириной 2px и сохранила в файле body_bg.png . Файл положила в папку images нашего шаблона.

В коде прописала повтор изображения по оси Х. Все это, делается для того, чтобы уменьшить графические файлы и оптимизировать шаблон. В результате страницы сайта будут быстрее загружаться. Градиент помещается на фон обязательно. Задаем также параметры рабочего шрифта контента сайта.

body {

margin:0 auto;

padding:0;

font:14px Arial, Helvetica, sans-serif ;

line-height:1.3;

color:#000;

text-align:left;

background-color:#e7e5e5;

background-image: url('../images/body_bg.png');

background-repeat:repeat-x;}

Определяем размер и цвет фона странички

#page {

width:950px;

margin:auto;

background-color:#fff;

overflow:hidden;}

 Размер блока top , где размещается логотип и поиск по сайту

#top{

height:60px;

width:100%;

margin:0;}

Для оформления блока logo я сделала картинку logo.jpg с логотипом размером 600х60 и сделала ее фоном. Файл положила в папку images нашего шаблона.

#logo {

height:60px;

width: 600px;

float: left;

background-image: url('../images/logo.jpg'); }

В блоке logo у нас еще выводиться название сайта. В файле index.php мы поставили название в теги H1, это важно для оптимизации. У нас выше было прописано оформление заголовков первого уровня, но для блока logo сделаем свое, особое оформление. Тем более, что надо еще правильно сориентировать название сайта в блоке.

#logo h1{

font:bold 24px Arial, Helvetica, sans-serif small-caps;

font-style:italic;

text-align:left;

color:#004f64;

padding:15px 0 0 100px;

border:none;}

/*div id="user1" */

Оформление блока поиска по сайту user1

#user1 {

height:60px;

width: 350px;

float: left;

background-color:#FFFFFF}

В блоке user1 предусмотрена позиция user1 для вывода модуля поиска сайту.

Небольшое отступление. За оформление модулей в шаблонах Joomla отвечает класс .moduletable. Можно создавать различные стили оформления модулей, добавляя к классу суффикс класса модуля. Не забудьте при создании модуля в админпанели прописать в параметре «Суффикс CSS-класса модуля» нужный вам суффикс, в противном случае модуль будет иметь оформление, которое прописано для класса .moduletable в файле template.css.

При создании модуля «поиск по сайту» задайте ему суффикс _poisk .

Оформление модуля

.moduletable_poisk {

background-color:#fff;}

Чтобы окно поиска было совсем симпатичным, я сделала картинку с изображением лупы search.png. Файл положила в папку images нашего шаблона. В коде вставила картинку в блок user1. Далее необходимо ее позиционировать и задать стиль шрифта в окошке.

#user1 input {

background:url('../images/search.png') no-repeat;

height:20px;

width:245px;

font:12px Arial, Helvetica, sans-serif;

margin:15px 0 0 80px;

font-style:italic;

border:3px double #3b98b0;}

Еще один нюанс, который стоит отметить при создании модуля поиска. Системный PHP-код Joomla 2.5 и 3.0 как-то коряво выводит поиск по сайту, поэтому мы воспользуется возможностью переопределить ядро Joomla и сделать красивый поиск. Для этого создаем в корневой папке шаблона папку html и помещаем в нее папку mod_search, которая содержит файл default.php для переопределения вывода модуля поиска. Я взяла папку mod_search из шаблона atomic.

ВНИМАНИЕ:В файле templateDetails.xml обязательно пропишите созданную папку html вот такой строкой кода <folder>html</folder>

Оформление блока вывода горизонтального меню «user2». 

#user2 {

width: 100%;

clear:both;}

Оформление горизонтального меню мы разберем на следующем уроке. Чтобы проще было работать с кодом, я решила сделать таблицы стилей для меню в отдельном файле menu.css. А пока продолжим работать с файлом template.css.

Изначально я решила блок «header» сделать универсальным и предусмотрела в нем позицию для вывода модулей «header». В этой позиции можно вывести какой-нибудь ротатор изображений или с помощью модуля с произвольным HTML кодом просто вывести изображение, любой высоты, при этом ширина должна быть всегда 950рх (ширина страницы). Это изображение можно сделать кликабельным, а также с легкостью его менять.

#header { width:100%;}

Если вы решили выводить шапку сайта в модуле «HTML-код», то при создании модуля задайте ему суффикс _header.

Оформление модуля с суффиксом _header , выводимым в позиции header.

.moduletable_header {margin-bottom:0px;}

Позиционирование изображений в модуле.

.moduletable_header img {margin:0;}

.moduletable_header p {margin:0;}

В блоке user3 предусмотрена позиция для вывода модулей user3.

#user3 {width: 100%;}

У самого блока нет оформления как такового, а вот модули выводимые в нем могут иметь даже очень оригинальный вид.

Изначально я предполагала вывод в этой позиции замечательного модуля представления контента News Show Pro GK4. Но для Joomla 3.0 этого расширения еще нет, поэтому я решила вывести в позиции user3 модуль «Навигатор сайта».

Однако с этим модулем повторяется та же история, что и с поиском: системный PHP-код Joomla 2.5 и 3.0 некорректно выводит навигацию. Поэтому переопределяем ядро Joomla и в  папку html нашего шаблона, копируем папку mod_breadcrumbs  с файлом default.php ( все прочие файлы из этой папки надо удалить) из шаблона beez.

Создаем модуль навигации и задаем ему суффикс _nav .

.moduletable_nav {

font-style:italic;

padding:5px;

margin:0;

background-color:#e7e5e5;}

Если вы будете создавать шаблон для Joomla 2.5, то в позиции user3 можно вывести модуль представления контента News Show Pro GK4. Тогда стоит прописать в файле template.css, код отвечающий за оформление этого модуля, но это мы сделаем на следующих уроках.

Оформление левой и правой колонок сайта. В предыдущем уроке, для наглядности мы прописывали им фон, теперь его надо убрать.

#left {

float:left;

width:200px;}

#rigth {

float:left;

width:200px;}

Далее будем оформлять блок контента. Внимательно разберитесь, из чего складывается ширина страницы. Если вы будете вносить изменения в ширину блоков колонок или контента, то необходимо учитывать, что ширина страницы фиксированная 950 px. Ошибка в подсчетах может привести к тому, что поползет вся разметка. Мне уже писали такие умельцы – поменяли ширину страницы, разметка поползла, а они не знают, что делать. Считать правильно – вот, что делать!

В левой и правой колонках выводятся модули, ширина контента условно 60%. Считаем 950 -200-200 -5-5(отступы от края блока контента до текста слева и справа)=540рх.

#content60 {

float:left;

width:540px;

padding: 0 5px 0 5px;}

Модули выводятся или в левой или правой колонке , ширина контента условно 80%. Считаем 950 -200 -5-5(отступы от края блока контента до текста слева и справа)=740рх.

#content80 {

float:left;

width:740px;

padding: 0 5px 0 5px;}

Обе колонки отключены, ширина контента условно 100%. Считаем 950 -5-5 (отступы от края блока контента до текста слева и справа)=940рх.

#content100 {

float:left;

width:940px;

padding: 0 5px 0 5px;}

Оформление текста статей.

#content60, #content80, #content100 {

text-align:justify;

margin-top:5px;}

Оформление списков в тексте статей. Я сделала картинку блоков blok.gif. Файл положила в папку images нашего шаблона.

#content60 ul li,#content80 ul li,#content100 ul li{

background: url('../images/blok.gif') no-repeat;

padding: 0 0 0 12px;

margin:5px;

list-style:none;}

Оформление отступов у картинок при размещении их в текстах статей.

#content60 p img,#content80 p img ,#content100 p img {

padding:5px;}

 Оформление различных кнопок на сайте.

.button,input.button,button.validate {

background:#fe1919;

color:#fff;

margin:2px;

padding:2px 10px 2px 10px;

cursor:pointer;}

Зададим общий стиль оформления модулей. Если суффикс модуля не определен, то оформление будет задаваться классом .moduletable

.moduletable {

font:12px Arial, Helvetica, sans-serif;

color:#000;

line-height:1.5;

text-align:left;

padding:0px;

margin:2px;

border:2px solid #e7e5e5;}

Оформление заголовка модуля.

.moduletable h3{

font: bold 12px Arial, Helvetica, sans-serif;

text-transform: uppercase;

text-align:left;

padding:5px 0 5px 5px;

color:#fe1919;

background-color:#e7e5e5;}

Оформление абзацев модуля.

.moduletable p {padding:5px;}

Оформление картинок в тексте модуля.

.moduletable img {margin:2px;}

Оформление списков в модуле.

.moduletable ul li{

background: url('../images/blok.gif') no-repeat;

padding: 0 0 0 12px;

margin:5px;

list-style:none;}

В заключение разберемся с оформлением подвала сайта.

#footer {

width:100%;

clear:both;

background-color:#82b5bf;}

При создании модуля «HTML-код» со сведениями об авторских правах задайте модулю суффикс _foot

.moduletable_foot {

text-align:center;

padding:10px;}

В заключение хочу сказать, что если вы решили сделать форму регистрации на сайте, то для корректного отображения формы необходимо переопределить ядро Joomla и папку html нашего шаблона, скопировать папку mod_login с файлом default.php из шаблона atomic или beez.

Работа над файлом template.css закончена. На следующем уроке займемся оформлением горизонтального и вертикального меню сайта.

Скачать установочный пакет шаблона TRIP 

 

Комментарии 

 
# Александр 02.09.2013 23:16
Подскажите, пожалуйста, что сюда нужно дописать, чтобы выбранный пункт меню постоянно подсвечивался (например, подчеркивание)? Как только не пытался использовать active, никак не работает, а шаблон моего сайта создан на основе этого. Кстати, спасибо огромное, все, что сделал, благодаря Вам!
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 16.09.2013 16:57
Александр, сделать так, чтобы выбранный пункт меню постоянно подсвечивался без скриптов не получится.
Ответить | Ответить с цитатой | Цитировать
 
 
# flashengine 29.01.2014 16:26
В шаблоне trip для подсветки текущего пункта меню в файл “css\menu.css” нужно добавить строчку:
.moduletable_men u li.active a {color: #600000;}
Активный пункт меню будет темно красный.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 27.09.2013 01:36
Подскажите, пожалуйста, как вывести изображение в блок header? Не модуль, а простую картинку 950*210? Кидал рисунок с названием _header в папку images - результат 0.
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Reaper 16.11.2014 14:27
В index.php там хде опередляетсья head, убери определение модуля, и создай див . И в цсс файле уже #header {код картинки}
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 24.01.2014 16:05
Отличные уроки, спасибо.
Картинку с лупой для поиска я бы сделал по другому. Делаем квадратный рисунок 15px*15px с прозрачным фоном и прописываем CSS - background: url('../images/search.png') no-repeat center right 5px;
В этом случае фон может быть любого цвета и никак не зависит от картинки с изображением лупы.
Ответить | Ответить с цитатой | Цитировать
 
 
# Евгений 03.04.2014 01:24
Спасибо за урок, отличная работа!
у Вас опечатака: rigth - right

по теме. не понимаю как считать ширину колонок.
делаю ширину сайта 960. 3 колонки 200-560-200, div съезжает, ему места не хватает. отступы 0 задал. Опытным путем выяснил что при ширене сайта (body) 969 - дивы встают в ряд, но видно что на несколько пикселей зазор. куда копать?
Ответить | Ответить с цитатой | Цитировать
 
 
# Евгений 04.04.2014 15:59
Ко мент можно удалить :) я для нагладности верстки задал обаодку красным блоков в 1 пиксель что на 3 блока в ряд дало 6 пикселей и один "обертка" еще +2)))) :lol:
в общем учиться учиться и учиться))
Ответить | Ответить с цитатой | Цитировать
 
 
# Айнур 03.05.2014 20:18
Все круто, и так все хорошо расписано,больш ое спасибо, очень полезные уроки, а главное все очень понятно!!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Страдалец 12.05.2014 12:50
помогите у меня авторизация на сайте криво встала, как исправить
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 25.05.2014 18:17
Да кто ж его знает, почему у Вас не встает!:)
Ответить | Ответить с цитатой | Цитировать
 
 
# Юрий 18.02.2015 21:46
Подскажите пожалуйста!
Установил шаблон на Joomla 3.3.6, модуль "Поик по сайту" в позиции user1, кнопка поиска устанавливается с той же картинкой search.png хотя в настройках модуля написано, что изображение из файла searchButton.gif (файл я добавил правильно в папку шаблона images).
Ответить | Ответить с цитатой | Цитировать
 
Главная Как сделать шаблон с нуля для Joomla 2.5 и Joomla 3.0 Оформление шаблона сайта для Joomla с использованием CSS. Урок 5

Интересные статьи

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

На горизонте замаячила Joomla 3.0. За разработчиками этого движка трудно угнаться, но мы попытаемся. Будем разбираться как сделать шаблон для Joomla 2.5 и 3.0 с нуля. Для тех кто смутно догадывается ч...

Подробнее

Свой бизнес в Интернете или как заработать на видео уроках

Свой бизнес в Интернете или как заработать на видео уроках

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

Подробнее

Как сделать интернет - магазин

Обсуждая создание собственного бизнеса в Интернете, невозможно обойти тему интернет - магазинов. Собственное дело – мечта, пожалуй, каждого молодого человека в нашей стране, никто не хочет работать на...

Подробнее

Как заработать на Youtube

Как заработать на Youtube

В настоящее время YouTube является самой крутой интернет - площадкой для бизнеса. Изначально сервис YouTube создавался как сайт, на который пользователи могли загружать различные видео-ролики  дл...

Подробнее
Каталог@Mail.ru - каталог ресурсов интернет