Yu Wang's Blog: CSS

显示标签为“CSS”的博文。显示所有博文

2011年2月26日星期六

为 blogger 添加能高亮代码语法的代码框

参考帖子: http://popoer.021128.net/2008/07/blogger-bloggerjs-google-code-prettify.html

内容摘要：

使用了google-code-prettify提供的脚本，可支持代码高亮。
(如原始链接失灵，也可以从这里下载到所需脚本)
首先找到

      ]]>
    </b:template-skin>
</head>

在 </head> 前插入

 <link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/> 
在
       ]]>
    </b:template-skin>
    后面插入

/* Added by Yu Wang for code box - Begin */ code { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZ3su4iNH-vrQtk0x-9L8gO87S9BLQTdOkAxWPFvz1ggT9hhHA1T1aZAosPmf5kGL5yQGaobxLKC_zCaVWRszQhO5CP_y5tfEf9c_7JFbYRoGw27r3lbhtEcVzyi2gmnQ-kWFRl9lvuo/) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; } /* Added by Yu Wang for code box - End */
在body标签中添加onload事件，调用脚本对代码进行格式化：
<body onload='prettyPrint()'>
发布文章时，对需要格式化的文档，使用下面的标签包含：
<pre class="prettyprint">...</pre> or
<code class="prettyprint">...</code>

2011年2月23日星期三

Stylish CSS Script - "iGoogle: Compact & Transparent top bar"

Key Features:
1. Get rid of search input box and banner, maximize the functional area for display



@namespace url(http://www.w3.org/1999/xhtml);



@-moz-document

url-prefix("http://www.google.com/"),

url-prefix("http://www.google.com/ig"),

url-prefix("http://www.google.dk/ig"),

url-prefix("http://www.google.se/ig"),

url-prefix("http://www.google.co.nz/ig"),

url-prefix("http://www.google.ca/ig"),

url-prefix("http://www.google.cn/ig"),

url-prefix("http://www.google.com.pr/ig"),

url-prefix("http://www.google.com.ca/ig"),

url-prefix("http://www.google.com.ch/ig"),

url-prefix("http://www.google.fi/ig"),

url-prefix("http://www.google.co.in/ig"),

url-prefix("http://www.google.co.uk/ig"),

url-prefix("http://www.google.lv/ig"),

url-prefix("http://www.google.co.hu/ig"),

url-prefix("http://www.google.lk/ig"),

url-prefix("http://www.google.com.au/ig"),

url-prefix("http://www.google.ru/ig"),

url-prefix("http://www.google.nl/ig"),

url-prefix("http://www.google.be/ig"),

url-prefix("http://www.google.de/ig"),

url-prefix("http://www.google.ro/ig"),

url-prefix("http://www.google.kz/ig"),

url-prefix("http://www.google.by/ig"),

url-prefix("http://www.goog1e.com/ig"),

url-prefix("http://www.google.no/ig"),

url-prefix("http://www.google.pl/ig"),

url-prefix("http://www.google.com.pl/ig"),

url-prefix("http://www.google.es/ig"),

url-prefix("http://www.google.pt/ig"),

url-prefix("http://www.google.com.br/ig"),

url-prefix("http://www.google.vc/ig"),

url-prefix("http://www.google.co.za/ig"),

url-prefix("http://www.google.tm/ig"),

url-prefix("http://www.google.com.my/ig"),

url-prefix("http://www.google.bg/ig"),

url-prefix("http://www.google.co.jp/ig"),

url-prefix("http://www.google.ie/ig"),

url-prefix("http://www.google.co.ck/ig"),

url-prefix("http://www.google.com.mx/ig"),

url-prefix("http://www.google.fr/ig")

{



html, body {

width: 100% !important;

}



#gsea {

padding:5px 0 !important;

}



#addstuff {

font-size:8pt !important;

}



#modules {

padding: 0px !important;

width: auto !important;

margin-left: auto !important;

margin-right: auto !important;

}



.modbox {

margin: 4px 0px !important;

}



.modtitle {

height: auto !important;

padding: 2px !important;

margin: 0px !important;

overflow: hidden !important;

}



.modtitle h2 {

font-size: 10pt !important;

margin: -3px 0px -14px 0px!important;

padding: 0px !important;

max-height: 18px !important;

overflow: hidden !important;

margin-right: 48px !important;

}



.modboxin {

padding: 2px !important;

}



.modlabel, .mc {

padding-top: 0px !important;

}



.yui-u {

margin: 0px 2px 0px 2px !important;

padding: 0px !important;

width: 32.7% !important;

}



/* #chat_nav,*/

#header_promo_wrapper, #footerwrap, #new_user_demo, #offered_in,  #bottom_nav, .MoreStories {

display:none !important;

}



/*

#gbar, #guser {

background: transparent !important;

margin-bottom: -24px !important;

color: #FFF !important;

}

*/



.msg {

position: relative !important;

z-index: 9999 !important;

}



/*

.gb1, .gb1 a, .gb3, a.gb1, a.gb3, a.gb4 {

color: #FFF !important;

}

*/



.uftl {

padding: 0px !important;

max-height: 17px !important;

overflow: hidden !important;

}



.uftl a:visited {

color: #222 !important;

}



.gbh {

border-top: none !important;

}



#nhdrwrapsizer {

height: 96px !important;

padding-top: 20px !important;

}



#guser {

display: block;

margin-left: 323px !important;

}



#doc3 {

width: 100% !important;

min-width: 740px !important;

}



.yui-b {

margin-top: -18px !important;

margin-left: 1px !important;

margin-bottom: 0px !important;

}



.botborder {

border-bottom: none !important;

}



.RSSDisplay {

padding-top: 0 !important;

}



#nhdrwrap, #footerwrapinner, #gsea, #new_user_demo, div.gradient {

display: none;

}



}

Stylish CSS Script - "Google Reader - Compact"

Key Features:
1. Keep the top navigation links
2. Very compact layout



@namespace url(http://www.w3.org/1999/xhtml);



@-moz-document 

url-prefix(http://www.google.com/reader), 

url-prefix(https://www.google.com/reader), 

url-prefix(http://google.com/reader), 

url-prefix(https://google.com/reader) 

{



/* maximize the width of entry items */

#entries .entry-body,

.entry .entry-title {

    max-width: none !important; }



/* hide the social options */

#your-items-tree-container, 

#lhn-friends,

.entry-likers,

.like,

.broadcast,

.broadcast-with-note {

    display: none !important; }



/* condense the white space */

#viewer-top-controls,

#chrome-header {

    padding: 2px 0 2px 5px !important; }



#viewer-footer {

    padding: 2px 0 2px 0 !important; }

#entries-status {

    top: auto !important; }

/* shrink titles, but add underlining for visual identification */

.entry .entry-title {

    font-size: 100% !important; }

.entry .entry-title .entry-title-link {

    text-decoration: underline !important; }

/* tighten up spacing around entries */

/* expanded view */

#entries .entry {

    padding: 0 !important;

    margin: 0 !important; }

#entries .card-content {

    padding: 2px !important; }

#entries #current-entry .card-content {

    padding: 1px !important; }

#entries .card-common {

    padding: 0 !important;

    margin: 0 !important;

    /* border-width: 2px !important; */}

/* list view */

#entries.list .collapsed {

    padding: 0 !important;

    /* border-width: 1px !important; */ }

#entries.list .collapsed .entry-icons,

#entries.list .collapsed .entry-main .entry-original {

    top: 1px !important; }

#entries.list .collapsed .entry-secondary {

    top: 0px !important; }

#entries.list .collapsed .entry-source-title {

    top: 0px !important; }

#entries.list .collapsed .entry-title {

    text-decoration: none !important; }

/* #entries.list #current-entry .collapsed {

    border-width: 0 !important; } */

#entries.list #current-entry.expanded .entry-container .entry-title, 

#entries.list #current-entry.expanded .entry-secondary-snippet {

    display: none !important; }

/* #entries.list #current-entry.expanded {

    border-width: 2px !important; } */





/* make the feed item borders square */

.entry .card,

.card .card-bottom {

    -moz-border-radius: 0 !important; }





/* move search bar to top */

#search {

top:4px !important;

left:450px !important;

}



/* reduce search bar width */

#search-input {

width:120px !important;

}

#search-restrict {

width:78px !important;

}

#search-restrict-input {

width:53px !important;

}

#search-restrict-button .goog-button-base-content {

width:54px !important;

}



/* merge feed title and setting bar */

#viewer-header {

position:absolute !important;

top:0px !important;

right:120px !important;

background:none !important;

width:520px !important;

}



/* fix search page feed title position */

#viewer-single-parent {

text-align:left !important;

position:relative !important;

top:1px !important;

}



/* remove setting bar bottom border */

#viewer-top-controls {

border-bottom:medium none !important;

}



/* move add feed button a bit right */

#lhn-add-subscription {

left:135px !important;

}



/* hide top horizontal line */

.gbh {

display:none !important;

}



/* move content panel up */

#main{

top:32px !important;

}



/* move top message area a bit right */

.message-area {

top:4px !important;

left:770px !important;

}



/* left sidebar font bigger size */

.lhn-section-footer {

font-size:12px !important;

}



/* hide footer information */

#viewer-footer {

display:none !important;

}



/* bigger search list view area */

#search-restrict-button .goog-menu {

    max-height: 600px !important;

    width: 800px!important;

    -moz-column-count: 4 !important;

}



/* display all friend items */

#friends-tree-item-0-main .lhn-section-secondary {

    height: auto !important;

}



}

2011年2月26日星期六

为 blogger 添加能高亮代码语法的代码框

2011年2月23日星期三

Stylish CSS Script - "iGoogle: Compact & Transparent top bar"

Stylish CSS Script - "Google Reader - Compact"

订阅

网页浏览总次数