Создаем папку для своей новой темы. Назовем её Porshe - ну нравится мне эта машина )
Создаем новый HTML документ и пишем в body согласно схемы:
<div id="wrapper">
<div id="header">
<div id="primary-menu">
</div><!-- end primary-menu-->
<div id="logo">
</div><!-- end logo-->
<div id="header-block">
</div><!-- end header-block-->
<div id="secondary-menu">
</div><!-- end secondary-menu-->
</div> <!-- end header-->
<div id="main-content">
</div><!-- end main-content-->
</div><!-- end wrapper-->
<div id="sidebar-left">
</div><!-- end sidebar-left-->
<div id="footer">
</div><!-- end footer-->
</div><!-- end container-->
Для улучшения разметки дополнительно к первоначальному плану вставлены
<div id="wrapper"> и <div id="main-content">
В main-content вставляем:
Создаем в папке с темой документ style.css и описываем div'ы, определяя их размеры и положение:
html,body{margin:0;padding:0}
#container{
width:960px;
margin-top: 10px;
margin-bottom: 0;
padding: 10px;
text-align:left;
background-color: #00FFFF;
}
#header{
float:right;
width:800px;
background-color: #FF0000;
padding-bottom: 10px;
}
#primary-menu{
background-color: #003399;
width: 600px;
}
#logo{
float:left;
width:500px;
background-color: #CCCCCC;
margin-bottom: -10px;
margin-left: 20px;
vertical-align: bottom;
}
#header-block{
float:right;
width:260px;
background-color: #6699FF;
}
#secondary-menu{
background-color: #3366FF;
width: 800px;
text-align: right;
}
#main-content{
float:right;
width:800px;
background-color: #CCCCCC;
margin: 0px;
padding: 0px;
}
#sidebar-left{
float:left;
width:150px;
margin-right: 10px;
background-color: #FFCC00;
vertical-align: top;
}
#sidebar-right{
float:right;
width:260px;
background-color: #CCCC00;
vertical-align: top;
}
#top-left-block,#top-right-block{
float:left;
width:260px;
margin-right: 10px;
background-color: #FFCC00;
vertical-align: top;
}
#content{
float:left;
width:530px;
margin-right: 10px;
background-color: #FFCC00;
vertical-align: top;
}
#footer{
clear:both;
width:100%;
background: #333;
color: #FFF
}
/* Base preferences */
Для наглядности я раскрасил стили в разные цвета. В прикрепленном архиве папка с заготовкой темы.
Вложение | Размер |
---|---|
porshe.zip | 1.31 КБ |
Комментарии
иллюстрации оживили бы повествование
Интересно будет посмотреть когда адаптация(вставка php-кода) под Drupal пойдет т.к. сам не разу не писал с нуля темы. Только к стандартных css правлю и все.
Ждем-с...
баян, есть материал и по лучше
а где есть? дайте пожалуйста ссылку:)
А продолжение будет?
Еще через месяцок, для ровного счету, что бы год был )