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

Опубликовано:
Редактировалось: 4 раза — последний вчера в 14:39
Просмотров: 2628
+8
Голосов: 8
Сделал такое оформление.
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


открываем com_content_read.tpl, color.css и styles.css
Заголовок статьи
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

com_content_read.tpl
находим <h1 class="con_heading" >, этот стиль отвечает за все заголовки, поэтому если мы его будем менять изменятся во всех компонентах (сам на эти "грабли" поначалу наступил). Поэтому создадим отдельный стиль.
<h1 class="con_heading_stat" >

con_top.jpg
это картинка которую будем использовать. Копируем её в шаблон/images
в файле color.css или styles.css прописываем стиль:
Код PHP:
  1. .con_heading_stat {
  2. background: url('../images/con_top.jpg') top left;
  3. height: 80px;
  4. font-size: 16px;
  5. font-weight:bold;
  6. margin: 0px;
  7. padding: 0px 0px 0px 10px;
  8. overflow: hidden;}
в com_content_read.tpl
<h1 class="con_heading_stat" >
<div style="position: relative; top: 35px; width: 700px;">
для того, что бы заголовок был над линией

Текст статьи
в com_content_read.tpl после
<div class="con_text" style="overflow:hidden">
ставим абзац, что б было немного "воздуха"
</br>

con_text.jpg

эту картинку копируем в шаблон/images
styles.css
Код PHP:
  1. .con_text{
  2. background: url('../images/con_text.jpg') top left;}
ну и после
Код PHP:
  1. {/if}
  2. {$article.content}
  3. </div>
Таким образом можно оформить все компоненты в собственном стиле
Оригиналы картинок
Комментарии (3)
Letsgo #
: +1
Спасибо, выглядит здорово, варианты думаю тут разные, вид красив.
Edik Salonikski #
: 0
что то попробовал не поллучается,,,не понятно с титлом статье уежает все когда добавляю
Gorec #
: +1
что то попробовал не поллучается,,,не понятно с титлом статье уежает все когда добавляю
извините я вообще не понял что и как у вас получается.
Хамелеон написал что указали width: 700px, но это для его шаблона так, поставьте вместо 700px 100%

Голосуем

Самый нужный компонент