Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / Theme Resource

Theme Resource

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

Design Resources

文件起點 視覺設計範例 Bootswatch pix2code Remove Background: Background Burner

Vector Icons Circle Clip Art Tag Cloud Generator: WordClouds.com TagCrowd.com Wordle

Fontello Font custom with JSON, Font Pair ControlPanel example

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

ThemeForest

Pearl 8229778/html-website

http://johanssonmedia.com/

OLDAL 7576577/html

Creatika 7654859/html-website

MediaCenter 8178892/html

z-index: Image vs Text

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

Bootstrap

Theming Unleashed: Bootstrap (with Plone classes instead)

wildcard.responsiveslider ftw.slider: slick - carousel

<replace css:theme="#portal-toolbar"
  css:content-children="#edit-bar"
  css:if-not-content=".ajax_load"
  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="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <base href="http://www.my.site.com/8080/Plone/testclg/" /></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

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