1. Главная
  2. Блоги
  3. Блог exPRession

Мой первый шаблон для друпал

Главные вкладки

Аватар пользователя exPRession exPRession 20 октября 2007 в 4:15

Начну ведение своего блога с описания как я делаю свой первый шаблон для друпала.
Так как я не силен ни в коде ни в верстке попутно буду задавать вопросы тем,кто уже имеет достаточный опыт,и просто кому хочется прокаментить мои действия.

Начал я с малого...
А именно - нарисовал на бумажке как должен бвыглядеть мой сайт и начал выскабливать сей гранит,долго и упорно(порой методом тыка)
Вот,что имею на первых порах:
/* html */

<body>
<div id="contaner">
  <div id="logo"><img src="/images/logo.gif" width="300" height="120"></div>
    <div id="header">
      <div id="topmenu">TOPMENU(регион под меню)</div>
      <div id="visual">шапка</div>
    </div>
  <div id="menu">MENU(регион под меню)</div>
  <div id="content">
  <div id="leftcol">блок левой колонки(левый регион)</div>
  <div id="rightcol">блок правой колонки(правый регион)</div>
  </div>
  <div id="footer">подвал(нижний регион)</div>
</div>
</body>

/* css */

/*exPRession dezign style css*/
BODY { margin-top:0px}

/*позиционирование слоев(назначение регионов шаблона)*/
#contaner{
    padding:0px 20px 0px 20px;
        background-image:url(/images/bg_contaner.jpg);
        background-position:left top;
        background-repeat:repeat-x;}
#logo {
    position:absolute;
        left:31px;
}
#header {
  border:1px solid #ededed;
  border-top:0px;
  background-color:#FFF;}
#topmenu {
    background-color:#FFFFFF;
    margin-left:310px;
        height:30px;
        border:1px dashed #333333;
}
#visual {
    padding:10px;
        height:120px;
        background-color: #FFFFFF;
        }
#menu {
    background-color:#FFFFFF;
        height:30px;
        border:1px solid #ededed;
        margin:5px 0px 5px 0px;
}
#content {
        background-image:url(/images/bg_top_content.gif);
        background-repeat: repeat-x;
        padding:5px;
        padding-top:40px;
        border:1px solid #ededed;
        height:auto;
        margin:5px 0px 5px 0px;
                   }
#leftcol {
    position:absolute;
        width:200px;
        height:300px;
        background-color:#fff;
        border:1px solid #ededed;
}
#rightcol { margin-left:206px;
        height:300px;
        background-color:#fff;
        border:1px solid #ededed;
}
#footer {
        padding:10px;
        height:50px;
        background-color: #fffdd;
        border:2px solid #ededed;
}
 

вот что получилось:

Комментарии