“—
Лётчик?
— Иногда. Вообще-то, я эндокринолог.” – Мимино
— Иногда. Вообще-то, я эндокринолог.” – Мимино
Итак у нас есть joomla (уж извините но назвать jirbis-ом язык не поворачивается),у нас есть задание
быстро-быстро “запилить” сайт библиотеки.
Ну что-ж , мы выбрали шаблон и начинаем его упорно мучать. Мой выбор
остановился на шаблоне forever ace от
конторы shape5.com.
Минимализм и не
слишком строгая структура шаблона позволяют относительно быстро разобраться в нём
и настроить под себя.
Демонстрация темы http://www.shape5.com/demo/forever_ace/
Скачать можно от сюда http://joomfans.com/shape5/s5-forever-ace.html
Начнём по порядку. Структура шаблона проста до ужаса. Папка css там
у нас хранятся наши файлы стилей. Папка images – картинки, кнопки и прочее. Для
наших извращений нам потребуется любой текстовый редактор, графический редактор
(Великий и ужасный Photoshop,
ну или на худой конец Paint),интернет и конечно-же руки.
А теперь список файлов которые мы будем подправлять.
Index.php –самый
главный фаил
Footer.php –
“подвал” нашего шаблона
Css/template_css.css – фаил стилей шаблона
Images/s5_fa_top_bg.jpg
– верхняя картинка (“шапка”)
Images/s5_fa_bot_bg.jpg –
картинка “подвала”
Открываем в текстовом редакторе index.php.
“Гидравлика с
ума сойти! Я так думаю…”-Мимино
В самом начале файла идут настройки шаблона , ширина ($s5_body_width
= "1160";), цвет фона ($s5_back_color = "FFFFFF";) и
прочее. На них мы останавливаться не будем
. Что-же мы можем подключить к нашему сайту? Например красивые шрифты от Google.
Идём по адресу http://www.google.com/webfonts ,
слева в секции Script выбираем Cyrillic
(по умолчанию там стоит Latin)
и выбираем понравившийся шрифт.
Под шрифтом находим надпись Quick-use и жмём по ней. В новом окне ставим
галочку в секции Сhoose the character you want на Cyrillic и копируем предложенную нам строку <link
href='http://fonts.googleapis.com/css?family=Seymour+One' rel='stylesheet'
type='text/css'> . Эту строку нам надо вставить после тэга <head> в нашем файле index.php. Далее мы просто привязываем шрифт к
тэгу, например к <h1>
будет выглядеть так
<style>
h1 { font-family: ' Seymour One', arial,
serif; }
</style>
“Как вы думаете, если покрасить зеленого цвета, будет
держаться, а?” – Мимино
Впрочем не все
такие эстеты как я и вам не нужны какие-то особые шрифты. Нам надо скорее убрать
стандартные шапку и подвал и украсить их по своему. Что-ж фотошоп вам в помощь
и идей по больше. Открываем Images/s5_fa_top_bg.jpg и начинаем творить, не
забываем и про наш “подвал” (Images/s5_fa_bot_bg.jpg).
(Пример s5_fa_bot_bg.jpg)
Что еще для счастья нам надо? Может быть украсить как-нибудь картинки которые обязательно будут в наших статьях? Ищем в интернете CSS3 Generator , например этот - http://www.css3.me/
Делаем полукруглую рамочку, добавляем тени и жмём кнопку Get the code! Копируем получившийся
код и открываем в текстовом редакторе css/template_css.css и сразу в
начале файла даём название нашему новому
стилю. Например img.dark (внимание
приставка img. Обязательна!)
Img.dark {
После овальной скобки вставляем наш скопированный с сайта
код.
display:
block;
margin: 0 auto;
padding: 3px;
background: repeat #EDEFF4;
border: 1px solid #7C8AA7;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 3px #4B4B4B;
И закрываем опять овальной скобкой.
}
Сохраняем наш фаил и радуемся. В редакторе статей в графе
стилей появился наш новый стиль dark.
Продолжение следует.
