Web Design

09 二月 2013

讓RokSprocket也能在Responsive框架下運作

作者  發佈於 網頁設計
给本項目評分
(0 得票數)

RokSprocket01

RokSprocket Module

RokSprocket這套模組主要能將文章以不同排列方式呈現,有五種文章呈現型態可做選擇,其中還許多細部的設定,讓呈現的效果更為豐富。另外,這套模組除了能支援Joomla! content外,也能支援k2 content,對於k2的使用者來說又多了一種文章呈現的模組可供選擇。當然還有一個最重點,一定要推見的原因:就是RokSprocket這套模組使用是不需要付費的,完全提供免費下載使用,真是佛心來的。

但今天這裡不加以介紹RokSprocket這套模組的使用方式(詳細使用方式請各位再自行摸索,有問題可以在下面留言版提問喔。)

模組名稱:RokSprocket 下載連結

讓RokSprocket在Responsive框架下正常運作

這裡要介紹:如何讓RokSprocket能在Responsive框架下運作。當然,前提是你所使用的版型是以Responsive框架做設計,這樣下面所說明的才作用。

範例說明:首先,在模組設定裡,選擇呈現型態為mosaic。

RokSprocket02

設定完成並儲存後,前台所呈現樣貌。

RokSprocket03

然而,雖然所選擇的佈景主題有支援Responsive,但RokSprocket模組裡css並沒有額外寫入與Responsive相關的語法在裡頭,因此當我們用手機瀏覽時,會呈現這樣。

RokSprocket06

而真正加入Responsive語法後,正常用手機瀏覽應該會呈現這樣。

RokSprocket05

接下來,我們開始將Responsive語法寫入RokSprocket模組裡。
由於剛剛介紹的文章呈現類型為mosaic,因此我們要針對這部分進行修正,就必須進入mosaic.css裡填加語法。
打開 /templates/佈景主題名稱/roksprocket/layouts/mosaic/themes/default/mosaic.css

在mosaic.css檔案裡,將這一段加在最後面:

/* Responsive */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
 .sprocket-mosaic-item .sprocket-mosaic-title {font-size: 1.4em;}
 .sprocket-mosaic-text-container {margin: 15px -5px 0 -5px;}
 .sprocket-mosaic-item .sprocket-mosaic-text {font-size: 100%;}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.sprocket-mosaic-item .sprocket-viewicon, .sprocket-mosaic-item .sprocket-viewicon span {width: 28px;height: 29px;}
.sprocket-mosaic-item .sprocket-viewicon span {background-position: 7px 8px;}
.sprocket-mosaic-item .sprocket-mosaic-title {font-size: 1.5em;}
.sprocket-mosaic-columns-1 [data-mosaic-item], .sprocket-mosaic-columns-2 [data-mosaic-item], .sprocket-mosaic-columns-3 [data-mosaic-item], .sprocket-mosaic-columns-4 [data-mosaic-item], .sprocket-mosaic-columns-5 [data-mosaic-item], .sprocket-mosaic-columns-6 [data-mosaic-item] {width: 33.34%;}
.sprocket-mosaic-text-container {margin: 15px -5px 0 -5px;}
.sprocket-mosaic-item .sprocket-mosaic-text {font-size: 100%;}
}
@media only screen and (max-width: 767px) {
.sprocket-mosaic .sprocket-mosaic-order li, .sprocket-mosaic .sprocket-mosaic-filter li {padding: 10px 5px;font-size: 0.8em;}
.sprocket-mosaic-item .sprocket-viewicon {display: none;}
.sprocket-mosaic-item .sprocket-mosaic-text {font-size: 100%;}
.sprocket-mosaic-item .readmore {padding: 2px 6px;}
.sprocket-mosaic-item .sprocket-mosaic-title {font-size: 1.3em;}
.sprocket-mosaic-text-container {margin: 15px -5px 0 -5px;}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
.sprocket-mosaic-columns-1 [data-mosaic-item], .sprocket-mosaic-columns-2 [data-mosaic-item], .sprocket-mosaic-columns-3 [data-mosaic-item], .sprocket-mosaic-columns-4 [data-mosaic-item], .sprocket-mosaic-columns-5 [data-mosaic-item], .sprocket-mosaic-columns-6 [data-mosaic-item] {width: 50%;}
}
@media only screen and (max-width: 480px) {
 .sprocket-mosaic-text-container {display: none;}
 .sprocket-mosaic-columns-1 [data-mosaic-item], .sprocket-mosaic-columns-2 [data-mosaic-item], .sprocket-mosaic-columns-3 [data-mosaic-item], .sprocket-mosaic-columns-4 [data-mosaic-item], .sprocket-mosaic-columns-5 [data-mosaic-item], .sprocket-mosaic-columns-6 [data-mosaic-item] {width: 100%;}
 .sprocket-mosaic .sprocket-mosaic-order, .sprocket-mosaic .sprocket-mosaic-filter {float: none;display: inline-block;margin-left: 2px;}
 .sprocket-mosaic .sprocket-mosaic-filter li:first-child {margin-left: -2px;}
 .sprocket-mosaic .sprocket-mosaic-order li {margin-left: -2px;}
 .sprocket-mosaic .sprocket-mosaic-filter li {margin-right: -2px;}
 .sprocket-mosaic .sprocke

如此RokSprocket的mosaic文章呈現類型就可以支援Responsive框架,其他呈現類型,就依此類推了。

EnYi  

現代網頁設計,須同時兼具視覺及組織運作,才能提昇一個平台真正價值。

網站: twotrees.tw

新增回應


About us

logo1  

將創意的設計投入於守護環境的發想裡與行動,是兩棵樹的核心價值與行動理念。
Facebook - Twitter - Vimeo

Comments

Calendar

« 十月 2017 »
星期一 星期二 星期三 星期四 星期五 星期六 星期日
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Owners