Blogger Design Notes

很快的來記錄一下今天對Blogger Template的修改；

1. 首先修改最上方的標題和敘述(description), 找到HTML的Header section, 修改以下兩個項目：

.header-inner .Header .titlewrapper {
  padding: 0px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
  position: relative;
  top: -15px;
  /*left: 440px;*/
}

2.再來是將每篇post上方的日期icon和標題, 更改為置中：

/* Headings
----------------------------------------------- */
h2 {
  margin: 0em 0 2em 0;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
  text-align:center; /* casper added */
}
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: 0em 0 0;
  text-align: center;
}

3.調整sidebar與post clolumn的間距：

.sidebar {
font-family: verdana;
font-size:1.1em;
padding-left: 40px;
}

另外就是增加了幾個小的CSS class for description texts,
重新加回syntax highlighter and configure the theme to "midnight",

Template哪天一不小心就被reset, 寫篇紀錄才可以恆久遠。

Display codes with more formal syntax.

After studying CSS, it's time to display codes with more professional way.

Style.1

#Header1 h1 
{
 font: $googlefont, Verdana;
 font-size: 36px;
 font-style: normal;
 font-weight: 400;
 text-shadow: none;
 text-decoration: none;
 text-transform: none;
 letter-spacing: 0em;
 word-spacing: 0em;
 line-height: 1.2;
}

Style.2

#Header1 h1 
{
 font: $googlefont, Verdana;
 font-size: 36px;
 font-style: normal;
 font-weight: 400;
 text-shadow: none;
 text-decoration: none;
 text-transform: none;
 letter-spacing: 0em;
 word-spacing: 0em;
 line-height: 1.2;
}

CSS + Blogger + Font

想寫好Blog, 連網頁語法都不通, 豈不矛盾?
所以近來閱讀 Jon Duckett 的 "Beginning HTML, XHTML, CSS, and JavaScript",

看完CSS前面章節, 該為我的小Blog做一點改變,從標題開始吧..
加上之前玩過一個有趣的Google API: Google Web Fonts.

試著結合卻發現有幾個題外Issue: