^

Вход/Регистрация

Блоги пользователей

Шаблон Joomla 3 с нуля (Ч.4)

Разметка шаблона сайта с использованием CSS

Открывем файл template.css и прописываем в него следующее:

(все объяснения прописаны латинскими буквами )

@charset "utf-8";
* {
margin:0;
padding:0;
}

/* nachalnie nastroiki zagolovkov vseh urovnei   */
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;
}
/* oformlenie ssylok na saite     */
a{
  text-decoration: underline;
  color:#004f64;
}
/*ssylka neposeshenay  */
a:link
{
   color: #004f64;
}
/*ssylka poseshenay  */
a:visited{
  color:#3b98b0;
}
/*ssylka pri navedenii*/
a:hover{
  text-decoration: none;
  color: #fe1919;
}

/*zagolovok uroven  1 */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover{
font-size:22px;
color: #3b98b0;
text-align:left;
margin-bottom:5px;
}
/*zagolovok uroven   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;
}
/*zagolovok uroven   3 */
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover{
font-size: 18px;
color: #30b2cf;
text-align:left;
}
/* zagolovoki uroveni  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;
}

/*oformlenie kartinok na saite   */
/*kartinka kak ssylka  */
a img {
    border: none;
}
/*kartinka v tekste  */
p img {
margin:0;
}

/*oformlenie abzacev na saite   */
p {
    margin: 0 0 10px 0;
}

/* blok body */
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;
}

/*blok page */
#page {
width:950px;
margin:auto;
background-color:#fff;
overflow:hidden;
}

/*blok top dlya razmeshenia  div id="logo"  div id="user1" */
#top{
height:100px;
width:100%;
margin:0;
}
/* div id="logo"*/
#logo {
height:100px;
 width: 100%;
 float: left;
background-image: url('../images/logo.jpg');
}
/*oformlenie nazvania saita  */
#logo h1{
font:bold 54px Arial, Helvetica, sans-serif small-caps;
font-style:italic;
text-align:center;
color:#004f64;
padding:15px 0 0 100px;
border:none;
}


/*div id="user2"*/
#user2 {
width: 100%;
clear:both;
}
       
/*div id=header */
#header {
width:100%;
}

.moduletable_header{
margin-bottom:0px;
}

/*oformlenie kartinok v module s suffiksom _header  */
.moduletable_header img{
margin:0;
}
.moduletable_header p{
margin:0;
}
       
/*div id="user3"     */
#user3 {
width: 100%;
}

/*div id="left"*/
#left {
float:left;
width:200px;
}

/*div id="right"*/
#rigth {
float:left;
width:200px;
}

/*vivod contenta razmerom 60% */
#content60 {
float:left;
width:540px;
padding: 0 5px 0 5px;

}
/*vivod contenta razmerom 80% */
#content80 {
float:left;
width:740px;
padding: 0 5px 0 5px;
}
/*vivod contenta razmerom 100% */
#content100 {
float:left;
width:940px;
padding: 0 5px 0 5px;
}

/*oformlenie teksta v statyah */
#content60,#content80,#content100 {
text-align:justify;
margin-top:5px;
}
 
/*oformlenie spiskov v statyah */
#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;
}
.dd-pager
{
background: #EFF2F5;
text-align: center;
background: linear-gradient(top, #FFFFFF 0, #93A8BE 100%) no-repeat;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #004f64;
padding: 5px;
}
/*oformlenie knopok na saite   */
.button,input.button,button.validate  {
background:#004f64;
color:#fff;
margin:2px;
padding:2px 10px 2px 10px;
cursor:pointer;
}

/*oformlenie moduley na saite */
.moduletable {
font:12px Arial, Helvetica, sans-serif;
color:#000;
line-height:1.5;
text-align:left;
padding:0px;
margin:2px;
border:2px solid #e7e5e5;
}

/*oformlenie zagolovka modulia */
.moduletable h3{
font: bold 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align:left;
padding:5px 0 5px 5px;
color:#fff;
background-color:#004f64;
}

/*oformlenie teksta v modulyah */
.moduletable p{
padding:5px;
}

/*oformlenie kartinok v modulyah */
.moduletable img{
margin:2px;
}

/*oformlenie spiskov v modulyah */
.moduletable ul li{
background: url('../images/blok.gif') no-repeat;
padding: 0 0 0 12px;
margin:5px;
list-style:none;
}

/*oformlenie modulya navigacii s suffiksom _nav  */
.moduletable_nav {
font-style:italic;
padding:5px;
margin:0;
background-color:#e7e5e5;
}

/*div id="footer" */
#footer {
width:100%;
clear:both;
background-color:rgba(120 40 200 0,4);
}

/*oformlenie modulya s suffiksom _footer  */
.moduletable_foot {
text-align:center;
padding:10px;
}
--------------------------------------------------------------------
/* blok body */ - В коде прописан повтор изображения по оси Х. Все это, делается для того, чтобы уменьшить графические файлы и оптимизировать шаблон. Изображение нарисовано в фотошопе и и добавлено в папку images шаблона как body_bg.png

/* div id="logo"*/ - Для оформления блока logo сделана картинка logo.jpg с логотипом размером 950х120.. Файл лежит в папку images нашего шаблона.

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

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

В блоке user3 предусмотрена позиция для вывода модулей user3 - в  папку html нашего шаблона, копируем папку mod_breadcrumbs  с файлом default.php ( все прочие файлы из этой папки надо удалить) из шаблона beez.

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

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

Работа над файлом template.css закончена.

Пора переходить к оформлению меню шаблона shab1

 

Copyrigcht © 2017 Яндекс.Метрика