跳到主要內容

LibGuides 使用說明: CSS相關

希望可以使您快速上手LibGuides館員功能的使用

修改CSS來符合畫面需要

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lg-guide-header-info h1, .s-lib-header h1{font-size:36px}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

這個是台師大館員提供的, 謝謝他們...

<style type="text/css">
#s-lib-footer-public{
display:none;
}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lg-guide-search-box{
display:none;
}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lib-bc{
display:none;
}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lg-guide-name{
display:none;
}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lib-banner-img {
    width: 100%;
    display: none;}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lg-guide-tabs{
display:none;
}
</style>

在指南內修改CSS設定的位置如下:

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本。

以下是LibGuide 編輯一個指南，其背景更換的方式(擇一):
首先，都進到"Guide Custom JS/CSS"

  1. 換圖片(圖片的url，可借用建立Gallery方塊時的上傳影像暫存區位置匯出url)
    <body background="https://libapps.s3.amazonaws.com/accounts/140243/images/black5.jpg"></body>
     
  2. <style type="text/css">
    body {    
        background-color: rgb(0,0,0);
    }
    </style>

另外，需要注意的是，如果兩個都貼，會以<body backgrouund="url"></body>優先覆寫。

這個語法是由2017年暑期輔大圖資系實習生楊晴焱提供, 我們謝謝他....

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

這個是台師大館員提供的, 謝謝他們...

<style type="text/css">
#s-lg-guide-header{
font-weight: bold; font-family: 微軟正黑體;}
}
</style>

這個要使用到"原始碼"功能, 請選擇原始碼, 將語法改成如下的描述:

<span style="font-family: Microsoft JhengHei;">微軟正黑體</span>

<span style="font-family: DFKai-sb;">微軟標楷體</span>

<span style="font-family: PMingLiU;">微軟新細明體</span>

即會出現如下的字形...當然, 如果讀者的電腦沒有微軟字形, 則會出現該電腦作業系統使用的基本字形, 如細明體....

微軟正黑體

微軟標楷體

微軟新細明體

另外, 字體粗細除了可直接用Bold來設定外, 也可用 font-weight: X00 來設定, 設定值從100-900共九級, 如上述微軟正黑體用最粗900級來設定

<span style="font-family:Microsoft JhengHei; font-weight: 900;">微軟正黑體</span>

結果如下:

微軟正黑體

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
.container {
 width: 100%;
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
#s-lib-banner a{
    pointer-events: none;
}
</style>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<script>
$(document).ready(function(){
         $("h1#s-lg-guide-name").html("<h3>我的指南</h3>");
    });
</script>

請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

<style type="text/css">
.s-lib-box {
 background-color: rgba(0,0,0,0);
}
</style>

哇! 這個要求真是麻煩, 我和美編同事試了很久才試成功, 請小心使用, 另請在指南的CSS功能置入以下語法, 但此功能只適用於LibGuides CMS版本

這個說出來真是不值錢，但真正試出來，得有經驗及技術，就是在產生頁籤的名稱欄中加入以下的語法即可。

<A HREF="http://www.xxx.com" style=" position: relative; left: -20px;">前往XXXX</A>

 

<style type="text/css">
#s-lib-bc-page{
display:none;
}
</style>

線上學習及提醒您要注意的事

如果您像我學的是早期的HTML, 對於CSS是有點恐懼症的, 不過還好公司內就有很多厲害的美術編輯, 他們對於CSS及JS的使用很純熟, 使得我們這些半桶水的膽子大了起來, 但幾次事故之後, 深深了解前輩指導的重要性，您若要深入使用CSS功能, 請在有人可指導的情形下使用, 免得出狀況要花不少時間善後, 或在進行前先複製指南起來, 萬一出問題可以自行還原; 自修當然也是好方法, 這裡找了幾個線上指引給大家參考, 方便自行處理各種疑難雜症。

變更 Box 顏色

這個功能也是LibGuides CMS版本獨有的功能，您可以參考原廠指引：http://support.springshare.com/libguides/lookandfeel/cssmaps-guides/boxes#s-lg-box-2002195

唯一要留意的是，前後要用<style>標籤包起來才會生效。如這個範例所示，我們改變的是特定Box header, 所以還要提供Box ID如下：

<style type="text/css">
#s-lg-box-14325146.s-lib-box .s-lib-box-title {
   background-color: #FFC0CB;
}
</style>