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

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

Итак открываем файл 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