Наконец-то дошли руки написать о тедактировании шаблонов поподробнее.
Все настройки внешнего вида шаблона сайта на joomla 1.5 можно поменять отредактировав template.css, который находится: /ваш шаблон сайта/css/ template.css
Итак начнем.
 
Найдем :
.art-Logo
{
display : block;
position: absolute;
left: 0px;
top: 27px;
width: 322px;
}
Это наш логотип - тот самый который «Сайт.ру» и тд
left: 0px - позиция слоя от левого края в пикселах
top: 27px - расстояние от верха
width: 322px - ширина слоя

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 34px;
font-style: normal;
font-weight: bold;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
padding:0;
margin:0;
color: #C0DDEC !important;
}
font-family: Arial, Helvetica, Sans-Serif - семейство шрифтов для логотипа «Сайт.ру»
font-size: 34px - размер шрифта
color: #C0DDEC
описание сайта аля «сайт о бла бла бла»
.art-Logo-text, .art-Logo-text a
{
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 19px;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding:0;
margin:0;
color: #C0DDEC !important;
}
Ну тут все тоже самое.

Находим
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 1000px;
height: 194px;
}
Это наша шапка сайта, тут нам интересны 2 последних пкнкта
width: 1000px - ширина шапки в пикселах, если нужен резиновый шаблон - можно поставить в процентах, но тут свои особенности - чтоб небыло белого фона на большом экране (картинка то не резиновая) нужно малость помудрить. Я в таких случаях делаю на слое шапки таблицу в 2 колонки на 98-100 %, и ставлю на фон картинки, которые будут расползаться в зависимости от размера экрана.
height: 194px - высота шапки

Поехали дальше, левая калонка шаблона нашего сайта:
.art-contentLayout .art-sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 199px;
}
width: 199px - ширина колонки (можно задавать и в процентах), не забывайте - если вы меняете значения для одной колонки - нужно изменять и для контента и для правой колонки.

.art-contentLayout .art-sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 199px;
}
Соответственно - это наша правая колонка

.art-contentLayout .art-content
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 601px;
}
Сдесь находятся наши посты. Важно, все размеры в колонках должны меняться пропорцианально.
При изминении ширины колонок также необходимо отредактировать данный код:
.art-contentLayout .art-content-sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 800px;
}
.art-contentLayout .art-content-sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 800px;
Тоесть - мы увеличиваем колонки со 199пх до 240, соответственно необходимо уменьшить и сдесь значение width: 800px на 41 (240-199)и у нас будет 759, а при уменьшении ширины колонки - так же увеличиваем ширину

.art-BlockHeader .t
{
height: 30px;
color: #272E35;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
white-space : nowrap;
padding: 0 8px;
line-height: 30px;
}
Это заголовки модулей в колонках, тут нам интересны
color: #272E35 - цвет шрифта
font-size: 13px - размер шрифта

.art-BlockContent-body
{
color:#1C2126;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 11px;
}
Здесь цвет и размер шрифта текста в левой и правой колонке

 

 

 

Обновлено (04.04.2010 05:53)