自訂獨特的列印專用樣式
文章內容轉貼自NiceType
很多時候,讀者們經常會把一些網路上看到的好文章,
或是具有參考價值的內容給列印下來,
這時候我們可以自訂一個專門給列印用的佈景主題,
除了讓列印的人驚喜外,還更加深對您網誌的印象呢!!
而且,還能加上只有在列印才會出現的文字喔!! 甚至將 sidemenu,comments 等都隱藏不被列印出來….
快快自訂一個列印專用的獨特佈景主題吧!
首先,
在您的佈景主題樣式庫中,新增一個自訂的樣式表,
在這個樣式表中在加入列印專門的樣式,
可以參照先前的文章:新增一個常用的樣式給你的網誌…!!
以這裡為例,新增的樣式語法為:
/* ----------------------------------- For Print Style -----------------------------------*/ p.forPrinted {display:none} @media print { p.forPrinted { display:block; font:9pt/140% verdana; letter-spacing:2px; border:1px solid #999999; padding:9pt; margin:9pt 4px; width:100%; } #siderMenu, #comments,#commentEditor, #toolsbar,#copyright,#navlinktop,#navlinkbottom {display:none} }
接下來我們在文章編輯的下方接著,寫下只有列印時才要出現的文字訊息:
<p class="forPrinted"> 如果你對本文有興趣,請連上網站:nicetypoR Professional Official website 網址:http://www.nicetypo.com </p>
接下來說明一下: 新增的列印樣式中,第一行
p.forPrinted{display:none}
指的是讓 p.forPrinted 標籤內的文字 display:none ,也就是不顯示於網頁上!!
接著 @media print 內的 p.forPrinted 則是唯有被列印時要顯示的樣式..
另外~##siderMenu, #comments 等ID…也可以看到是 display:none,也是說…列印時,將這些 ID 下的內容統統隱藏不顯示..
p.forPrinted 是可自訂的,但 @media print 是不可以自訂的!!