Настройки тела шаблона

суббота, 27 февраля 2010 г.

В последнее время приходилось часто работать со сложными красивыми шаблонами, делая всевозможные настройки. Часто бывает так , что мы ставим шаблон, а многое в нем не работает, по неизвестным нам причинам, либо мы хотим изменить цвет фона шаблона, настроить sidebar… В связи с этим, прочитав статью зарубежного коллеги решил выписать тэги основных частей шаблона, чтобы вы знали где и что менять.

Настройки шапки шаблона(Header):

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'/>
</b:section>
    </div>

и следующий CSS код:

/* Header
-----------------------------------------------
*/
#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}
#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }
#header a:hover {
  color:$pagetitlecolor;
  }
#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
}
#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Настройки Sidebar:

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
      </div>

а также следующий скрипт:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

И CSS скрипт:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
}
.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}
.main .Blog {
  border-bottom-width: 0;
}

Настройки статей блога:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

А так же:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

Настройка подвала блоггера(Footer):

<div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

и следующий скрипт:

/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Вот основные элементы шаблона для блоггер, надеюсь эта статья поможет вам устранить неполадки в ваших шаблонах

Похожие статьи