Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

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>

 

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

如果您像我學的是早期的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>