XOOPS佈景開發
- XOOPS預設首頁是 run 「system」模組，在偏好設定可以調整
- 我們希望在「首頁」有迎賓圖，但在其他模組則省略
- 目前導航是「白底黑字不透明」，我們將其改為「黑底白字透明」
- 這個選單調用了「bootstrap 的 affix.js」插件
- 頁面加載完畢後，應用affix效果的內容會增加一個.affix-top樣式類
- 當頁面向下滾動了top的距離時，.affix-top切換成.affix類
- 頁面滾動到離底部距離為bottom時，.affix類切換成.affix-bottom
- 我們根據需要定義這三個類的樣式就好了。
- 第5、6、7可以用chrome 的開發工具觀看，因為我們把選單固定在上方，所以看不到.affix-bottom
- CSS3 RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於0.0（完全透明）與1.0（完全不透明）的數字。
- creative.css
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: rgba(255, 255, 255, 0.7);/*ugm*/
}
.navbar-default.affix {
/*background-color: white;*//*ugm*/
background: rgba(51, 51, 51, 0.8);
border-color: rgba(34, 34, 34, 0.05);
}
- creative.js ： 在 #mainNav 前面 加 .system ，所以只有在首頁才會執行
//------- ugm -----
// Offset for Main Navigation
$('.system #mainNav').affix({
offset: {
top: 300
}
})
- 將選單的 container-fluid 改為 container