Skip to content. | Skip to navigation

Personal tools


You are here: Home / Tips / Theme Resource

Theme Resource

視覺設計工具及資源 ThemeForest 或 Bootstrap 樣版實例

Design Resources

hexschool bootstrap 5 文件起點 視覺設計範例 Bootswatch pix2code Remove Background: Background Burner wireframe icon sample Bulma CSS Framework: flexbox, sass, Free Illustration

Vector Icons Circle Clip Art Tag Cloud Generator: Wordle

ControlPanel example Zope4 CMF.zmiicons

.icon-controlpanel-FilterSettings:before { content: '\e844'; }


Pearl 8229778/html-website

YouTube Just Got Worse Again rel=0 Changed showinfo Deprecated – NextGenThemes

OLDAL 7576577/html

Creatika 7654859/html-website

MediaCenter 8178892/html

Design Graphic UI/UX


Grid Dropdown Collapse

Mobile 下拉捲軸一頁後才出現 Go Top 按鈕

z-index: Image vs Text

以 Baby Kids 為例,首頁 iconbg 可能會擋到 h2 subtitle,曾試過 z-index 但沒效,實務上只想到用空白去避開。


Theming Unleashed: Bootstrap (with Plone classes instead)

提供 .container 和 .container-fluid 兩種容器類別,當寬度夠大時會顯示 2:1 比例的雙欄排版,當寬度不夠時,則改為上下排版的流動式排版。

<div class="container">
 <div class="row">
  <div class="col-sm-8">Field 1</div>
  <div class="col-sm-4">Field 2</div>

wildcard.responsiveslider ftw.slider: slick - carousel

<replace css:theme="#portal-toolbar"
  css:if-content=".userrole-authenticated" />

plonetheme.bootstrap searchbox alignment

from Plone 4.3.3 to 4.4.6. I found a collage page is displayed without any styles and other css settings. The header of the a collage page becomes like the followings:

<!DOCTYPE html>
<html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <base href="" /></head><body>

Another solution to this issue is to pin plone.theme to 2.1.5. (Plone 4.3.6 ships with 2.1.4 which removes a dependency on CMFDefault, probably in preparation for Plone 5, but it has unintended consequences which plone.theme 2.1.5 fixes).

黑底白字的 Header Link 可能套用 a:visited 深色字造成顯示不清楚的問題,處理方式之一是固定使用白字,例如 <a href="#"><span style="color: #fff !important;">Link</span></a>

Cutomize Toolbar TTW

collective.upload Removes Dependency on Bootstrap and Uses collective.js.bootstrap

CSS3 dropdown dropdown width percentage example: col-md-2 是指定比例制的寬度數量 col-md-offset-1 是指定起始位置

Slider Scroller Scrollbar

Menu Stay


Fontello Font custom with JSON, Font Pair losevka (CJK) 適合編寫程式碼的免費字型