Skip to main content

Drupal前端設計 - 基本CSS修改教學

Submitted by admin on Fri, 01/03/2020 - 08:26

這篇文章會帶著大家進行最基本的CSS前端設計操作。

我們最後的成果會是這個頁面上半部的曬貓商品展示框。在開始前,也先假設我們都閱讀過這篇文章,知道如何在建立grid display,以及最重要的,如何使用Views在HTML標籤中新增自己的CSS class。

 

1.讓Drupal網頁套用一個新增的.css檔案

我們在前端框架安裝 - Drupal bootstrap barrio中在Drupal內安裝了基於bootstrap的barrio主題,並以此為基底製作出了一個子主題。

現在,我們要試著在這個子主題之下建立自己的CSS檔案,並讓Drupal讀取這個檔案、應用到網頁上。

剛產生子主題後,我們在/subthemes中的資料夾結構看起來應該跟下面這張圖相似,除了custom_setting.css是這篇範例新增加的檔案以外其他應該都差不多。我們會先針對幾個比較重要的檔案做說明,尤其是與CSS相關的設定檔案。

另外,這個範例中的子主題名稱叫做my_barrio_subtheme_1226,看到這串文字可以自行代換成自己的子主題名稱。

drupal subtheme file location

在上面這張圖片以子主題為名的資料夾當中,my_barrio_subtheme_1226.info.yml描述了這個主題要引用哪幾種library,如下方區域所示。

name: My Barrio subtheme 1226
type: theme
description: 'Basic structure for a Bootstrap Barrio SubTheme.'
# version: VERSION
# core: 8.x
base theme: bootstrap_barrio

libraries:
  - my_barrio_subtheme_1226/bootstrap_cdn
  - my_barrio_subtheme_1226/global-styling

regions:
...
...

bootstrap_cdn: 指的是去bootstrap的content distribution network撈渲染用的資料回來。

global-styling: 定義在下面會介紹的library.tml中。

 

同一個資料夾內,my_barrio_subtheme_1226.library.yml描述了library name與實際對應的檔案的關係,這次我們直接在global-styling的css底下新增一行css/custom_setting.css: {} ,並且仿效第一張圖片的內容,在css資料夾底下新增一個custom_setting.css檔案。

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
      css/colors.css: {}
      css/custom_setting.css: {}     # <------新增這一行
bootstrap:
...
...

 

完成上面的步驟後,我們要先確保網頁有正確的載入我們的CSS檔案,在開始進行下一步的修改嘗試。

在關掉/admin/config/development/performance底下的Aggregate CSS/JavaScript files,以及任何號稱會壓縮CSS的第三方模組之後,清除快取,然後來到我們套用子主題的網頁頁面,點選右鍵選擇檢視原始碼,我們應該可以找到類似下方的css引用描述。

<link rel="stylesheet" media="all" href="/themes/custom/my_barrio_subtheme_1226/css/custom_setting.css?q3o1h3" />

herf裡面描述了我們所放置的css檔案位置,而這個位置符合我們前幾個步驟的操作。

如果我們看到的東西是類似下面這般有一串雜亂資訊的程式碼的話。

<link rel="stylesheet" media="all" href="/sites/default/files/css/css_pnhM847ysZ8zVPxzGONtYfXdO1BaJK2G-UplMRwXoRs.css" />
<link rel="stylesheet" media="screen" href="/sites/default/files/css/css_rppRGD_OoHfR_SJsouUbDXbYqdDsbR40sRSsm5MvFnw.css" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_wVn_qPMpCqMSnmEH0rqSR6sDkOgJH6jX2AYikEAiWOA.css" />
<link rel="stylesheet" media="all" href="/sites/default/files/css/css_v4Ncn_oxURdbLDKAxOw-Y0jj749gs2Quj1xt67F7X5U.css" />
<link rel="stylesheet" media="print" href="/sites/default/files/css/css_Z5jMg7P_bjcW9iUzujI7oaechMyxQTUqZhHJ_aYSq04.css" />

那多半就是還有某個模組或設定會壓縮CSS,或者是我們忘了清除快取,又或者是我們清除快取後忘了重新整理網頁,建議再檢查一下設定,使的HTML的link標籤內可以找到我們的CSS檔案。

截至目前為止,我們已經介紹過了Drupal如何在HTML標籤中新增一個class,以及如何載入一個自訂的CSS檔案。如果曾經有過CSS編寫經驗的話,應該可以開始著手布置自己的網頁了。如果還沒有編寫前端的經驗也沒關係,可以繼續往下閱讀,看看如何進行第一步的修改。

 

2.範例: 如何透過新增的.css檔案修改網頁

確認了網頁有成功載入custom_setting.css之後,我們就可以開始進行改動了。點開我們正在使用的瀏覽器的開發者介面,以google chrome為例,按下F12後應該會出現如下頁面。

chrome css develop demo

我們先點選頁面中間上方的箭頭圖示,並把滑鼠移到自己想編輯的地方點擊一下左鍵。此時,瀏覽器會自動找出我們感興趣的位置的HTML標籤,以及這個標籤上面套用了什麼CSS樣式。

在上面的圖片中,我們點選了「第三張貓貓」的標題,因此瀏覽器會自動幫我們找出這段文字的HTML標籤。找到的標籤顯示在圖片的右上角,內容如下:

<h5 class="field-content goods-title">第三張貓貓</h5>

瀏覽器也會同時找出這個標籤所套用的CSS樣板,我們可以從上面的標籤得知,這個h5標籤裡面套用了field-content以及goods-title兩個class名稱。第一個field-content是我們在設定views勾選了Add default classes所產生的。第二個goods-title則是我們在上一篇文章中,勾選了Create a CSS class而自行輸入的名稱。

因為在截這張網頁圖的時候已經把css設定給弄好了,所以我們可以看到第四個紅框右上角有一行CSS樣式的來源檔案。雖然名稱被截掉了一點,但看的出來是來自於我們剛剛設定的custom_setting.css,內容如下:

.goods-title {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 5px;
    border-bottom-color: #5589d2;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

我們可以在custom_setting.css內複製這段文字,並把goods-title變更成我們自己建立的CSS class名稱來把這個樣板套用到我們自己的網頁上來看看結果如何。 (記得清除快取!)

這段css描述了下列的內容:

color: #000;  #字體顏色是黑色

margin-bottom: 0;  #不需要底部邊界

padding-bottom: 5px;  #底部補五個像素的寬度

border-bottom-color: #5589d2;  #底部邊框用藍色

border-bottom-width: 2px;  #底部邊框寬兩個像素

border-bottom-style: solid; #底部邊框用實心線

 

如果覺得打開編輯器、清除快取,再讀取網頁的動作太累人的話,我們可以點擊圖片藍色方框處的element.style並加入一行color: red;來看看把標題改成紅色的效果,或是輸入其他任何想套用的css樣板測試也行,等到調整到滿意了再把內容複製到我們自己的css class內即可。

這麼做的測試改動只會影響到自己電腦瀏覽器上的資料的值,不會影響到伺服器端,內容會在下一次重新整理網頁時消失,可以放心的大膽改造。

Tags