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

суббота, 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;
}
Вот основные элементы шаблона для блоггер, надеюсь эта статья поможет вам устранить неполадки в ваших шаблонах

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

5 комментариев:

Yi-dam комментирует...

Вот если бы Вы расписали "для чайников", что значит каждая строчка - цены бы небыло Вашему блогу, Коллега. Поскольку я еще таковых не встречал в сети.

Tamao комментирует...

Согласен с Yi-dam. А ещё подскажите, пожалуйста, как поменять текстуру фона в сообщениях блога. А то нашёл неплохой шаблон, но не нравится белый фон. Хочется не просто цвет изменить, а подобрать определённую текстуру, которая предлагается в виде картинки. Вообще же стоит только захотеть сменить шаблон, как тут же сталкиваешься с кучей проблем.((( И вот тут-то и пригодились бы Ваши объяснения по каждой строчке кода. А то как-то неловко дёргать Вас конкретно по каждому из шаблонов.

Denis Bychkov комментирует...

Проблема в том, что структура каждого шаблона разная. Нельзя дать один совет, чтобы тот подходил всем, зачастую даже языки разные используются. Легче будет, сказать какой шаблон, и мы попробуем что то изменить. Универсальный способ для смены цветов-это программа ColorPic,- она позволяет определить код любого цвета, и найти его потом в теле шаблона, в последствии заменить...

Denis Bychkov комментирует...

Как сделать текстуру и как поменять цвет статей блога, я пожалуй сниму видео, потому, что писать будет как то не удобно. Однако все возможно.

Tamao комментирует...

Ясно. Ну что ж, придётся Вам нас терпеть и разжёвывать каждую деталь. Рано или поздно мы с напарницей определимся с шаблоном и начнётся...

Отправить комментарий

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b