修改首頁輪播分頁項目(pager item)的顯示樣式

1 篇文章 / 0 new
dreamer
dreamer's 的頭像
修改首頁輪播分頁項目(pager item)的顯示樣式

依著研習講義上的操作,利用 Views Slideshow 模組可以做出首頁輪播的區塊,但是在輪播圖片下方的分頁項目,每個都佔用了一行的空間。

下方分頁項目每一項都佔用一行的空間
圖1:分頁項目各佔用一行

修改後分頁項目在同一行上
圖2:分頁項目在同一行上

想調整這些分頁項目的顯示樣式,該如何進行呢?這部份其實可以透過修改 CSS 樣式表的規格來調整顯示的樣子。如果老師對 CSS 沒有概念的話,建議可以到 https://dash.generalassemb.ly/ 先上個簡單的線上課程,透過範例來教你入門。

若老師已經對 CSS 不陌生了,再繼續往下看。第一步,就是找到用套用樣式的正確對象,透過 CSS Selector 來選取欲套用的範圍,可以參考一下這個網站(http://blog.fishsaut.com/2010/03/css-selector.html)的說明。

在這邊我們可以先透過瀏覽器的開發工具暫時改寫 CSS 規則,確認規則有效之後,再將這些規則正式寫入 Drupal 版型的 css 檔案中。以下的操作示範以 Google Chrome 瀏覽器為例。

將游標移到任一個分頁項目上,按滑鼠右鍵,再選擇選單中的「檢查元素」:


圖3:檢查元素

接著畫面下方會出現開發者工具,預設會列出目前畫面的 HTML 原始碼,並將方才要檢查的元素反白顯示:


圖4:被檢測的元素會被反白顯示

等待一段時間,觀察輪播圖片切換時的變化。


圖5:輪播圖片切換後的變化,注意圖4與本圖中的紅框

注意 圖4 與 圖5 的變化,我們要找的是每個分頁項目最上層的元素。原本被檢測的元素並非我們要修改的對象,而是其上兩層的元素才是,也就是有設定 id 為 views_slideshow_pager_field_item_bottom_news_list-... 的那個 div 才是我們要改的目標。


圖6:真正要套用的對象


圖7:真正要套用的對象(將下層元素收合後)

圖6 用細紅框標出我們真正要,按 <div 前方的三角形可以展開或收合下層元素,我們將下層元素收合後更容易找到它們共同的部份。這兩個 div 的 id 不一樣,但是所套用的 class 幾乎一致,因為我們要同時修改這些分頁項目,所以要針對這些分頁項目所共同套用的 class 來撰寫規則。以這個例子來說,每個 div 的 class 屬性列了一堆以空格分隔的類別名稱,只要從中找一個就可以了。在這邊我選的是第一個類別,也就是 views-slideshow-pager-field-item 這個類別。

按下開發者工具右方的 + 按鈕來新增一條暫時的規則,這條規則只有此時在你的瀏覽器上有作用,不會影響到其他人。而當你的畫面重新整理後,這些暫時的規則也會被清掉。所以可以盡情在開發者工具中測試。


圖8:利用開發者工具新增 CSS 規則

將新增規則的 CSS Selector 部份改為我們要修改的類別,也就是 .views-slideshow-pager-field-item (記得類別前面要加一個 .,這是 CSS Selector 的語法),然後我們再來指定此類別的樣式。因為 div 標籤的預設顯示模式為 block 模式,所以每個 div 的寬度會佔滿整個畫面,因此無法併排顯示。因此我們要修改 .views-slideshow-pager-field-item 的顯示模式,將其修改為 inline-block。完整的規則如下:

.views-slideshow-pager-item {
    display: inline-block;
}

修改完成後,會發現畫面上分頁項目的排列方式馬上跟著改變。


圖9:將 display 改為 inline-block 後的效果:分頁項目排列在同一行

當然我們也可以再稍微美化一下,比方說加大分頁項目的寬度,並為其加框,如圖2的效果,就可以多加兩條規則:

.views-slideshow-pager-item {
    display: inline-block;
    padding: 0 5pt;
    border: 1px solid silver;
}

若想要突顯目前被輪播到的圖片的分頁項目,則可以再按加號新增一個 CSS Selector。依照 圖4 與 圖5 的比對,被輪播到的分頁項目會同時套用一個 active 的類別,因此 Selector 的部份要設為 .views-slideshow-pager-item.active。要注意兩個類別名稱間沒有空白,直接連在一起。

.views-slideshow-pager-item.active {
    background-color: dimgrey;
    color: white;
}

確認過畫面顯示的效果後,就可以將這兩個 CSS Selector 的規則寫入 Drupal 版型的 css 檔案中了。