修改CSS ul,ol & pre 換行 & 文章分類子項展開…等顯示問題

不知道是不是Pixnet先天性的設計不良,造成使用ul,ol上很麻煩,編輯文章時,要加上"編號"或"清單符號"總是不能顯示!但試用其他家的Blog系統卻沒這種問題,我也曾經換過多種的Pixnet樣板,每一種都一樣,後來學了CSS之後才知道是因為把ul,ol等這幾項全部設定不顯示,因為Pixnet的結構上就使用非常多的ul,ol,要讓這些隱藏起來版面才會好看,但也影響到了編輯文章的使用。

編輯CCS原始碼,將以下這段
ul,ol {list-style:none;}

修改成以下
.article-head, .inner-box ul, .inner-box ol, .box-text ul, .box-text ol, .article-footer ul, .single-post, #navigation, #pix_article_switch ul { list-style:none;}
/*調整縮排*/
.article-content ul, .article-content ol {
    margin-left: 30px;
    margin-bottom:10px;
}

這是我目前版面會使用到的,我也曾搜尋到網路上有其他教學,但我套用後並非完全的生效,所以我還是看著網頁的原始碼再針對需要的下去設定。之後編輯文章時就可以隨心所欲地使用"編號"和"清單符號"了。

【pre 原始碼顯示】
另外編輯到要呈現原始碼的地方,目前使用<pre></pre>包覆,再設定CSS,如底下所示
pre{
    font-size: 0.8em ;
    white-space: pre-wrap; /*使code換行*/
    color: #000000;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #eee;
    border: 1px dashed #999999;
    overflow: auto; /*設定內容溢出時自動加上卷軸,需搭配設定高度使用*/
}

pre 的解說:「可定義預格式化的文本。被包圍在pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。常見應用就是用來表示計算機的源代碼。」

但由於pre並無法因應寬度自動換行,所以需要再加上CSS設定去顯示,所以需要使用 white-space 這個屬性配合 pre-wrap的值,相關的值請看下方
描述
normal默認。空白會被瀏覽器忽略。
pre空白會被瀏覽器保留。其行為方式類似 HTML 中的<pre>標籤。
nowrap文本不會換行,文本會在在同一行上繼續,直到遇到<br>標籤為止。
pre-wrap保留空白符序列,但是正常地進行換行。
pre-line合併空白符序列,但是保留換行符。
inherit規定應該從父元素繼承white-space 屬性的值。

【文章分類子向展開】
文章寫得越多,分類也會隨著增加,pixnet雖然有子分類項目,但預設卻是關閉的,不容易讓人一目了然。因此只需要在側邊攔自訂欄位加入一<script></script>
<script type='text/javascript'>
pix.openAllCategory('open');
</script>

加入後就會自動展開,但展開後卻和分類其行,需要在CSS設定縮排才好方便辨識。
.inner-box ul { padding-left: 13px; }

如此一來Blog感覺更有結構一點,只是搞到來都覺得會不會換個Blog會不會比較容易點…,Pixnet的功能性還有待加強…

留言

這個網誌中的熱門文章

泰有趣的一天-大里【泰鑽】泰式料理

World Gym 解約退會過程

大口平價火鍋、牛排(太平店)