FANDOM


翻譯尚未完成

此頁面或部分內容仍未翻譯,請將其翻譯成適當的語言(中文)

這個調理包收錄了各種實用的CSS片段,可依據你的需求使用。

CSS入門

背景圖片

如果你想要在你的維基利用CSS來更換背景圖片,答案就在這裡。通常你可以加入以下代碼來完成:

body {
    background-image: url(<replace this with the url of the image you want the background to be>);
    background-color: <changes the color of the background, use a hex code or color name (i.e. "red")>;
    background-blend-mode: <combines two or more background layers together with different blend modes, use one of the names of the blend mode to change the resulting background appearance (examples: "color-dodge", "screen", "multiply", "hard-light", "difference", "luminosity")>
    background-attachment: <set to scroll to allow it to scroll with the page, or to fixed to keep its position static>;
    background-position: <set to either the directions from which to start the image (i.e. "top left", "left center", "right center", etc), percentages (x% y%), or position (xpos ypos). (Note: % and pos are mixable)>
    background-repeat: <the default setting is repeating the image both vertically and horizontally, setting to repeat-y will repeat the image only vertically, setting it to repeat-x will repeat it only horizontally, and setting it to no-repeat prevents it from repeating at all.>;
}

有些可能需要微調,不過這些是基礎配置。

特定的CSS

Fandom有多項特定的内建class。

  • .ns
    • 命名空間特定class
    • 本頁為.ns-0
/* Change text color in user namespace */
.ns-2 {
    color: black;
}
  • .oasis-dark-theme
    • 對於深色主題的維基會自動添加這個class
/* Change link color on dark wikis but not light wikis */
.oasis-dark-theme a {
    color: white;
}
  • .page
    • 頁面指定class
    • 本頁為 .page-CSS_Cookbook
/* Add some styling on a certain page */
.page-CSS_Cookbook h2 {
    font-weight: bold;
}
  • .user
    • 用戶指定class
    • 已登入的用戶為.user-logged;匿名用戶為.user-anon
/* Hide category adder for anons */
.user-anon .CategorySelect.articlePage .last {
    display: none;
}
  • .wiki
    • 維基指定class
    • 本維基為.wiki-dev
/* Add some styling only to dev wiki */
.wiki-dev .portable-infobox {
    padding: 1px;
}

網站改進

Blackout自定義

Blackout

要自定義在燈箱查看圖片時出現的Blackout效果,可使用以下的CSS片段:

.blackout {
    background: #84dcff;
    mix-blend-mode: overlay;
}

#84dcff是變更後的背景顏色;overlay是變更後的模糊程度。

模糊背景

BlurBackground

這個CSS片段會在背景加入模糊效果。由Dorumin編寫。

注意: 這個對IE-Edge端的瀏覽器支持相對較差,如果你使用IE瀏覽器,可能無法產生預期的效果,只會顯示非模糊圖片。

body::before {
    content: '';
    background-image: url(image-url);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

如果body已經定義背景,那麼這個模糊效果應限制在2~5px之間,不過你可以透過以下代碼移除body對背景的定義。

body {
    background-image: none !important;
}

鼠標自定義

CustomCursor

如果你想要更換鼠標的圖案,可以使用:

/* This cursor icon will be displayed normally */
body {
    cursor: url("<insert URL to cursor icon>");
}
 
/* This cursor icon will be displayed when hovering or clicking on links */
a:hover, a:active {
    cursor: url("<insert URL to cursor icon>");
}

修復可視化編輯器的工具列寬度

VEfixed

這個CSS片段修復可視化編輯器的工具列寬度,使寬度與編輯區相等。由JustLeafy編寫。

.ve-init-mw-viewPageTarget-toolbar {
    border-top: none;
}
.oo-ui-toolbar.ve-ui-toolbar.ve-ui-dir-inline-ltr.ve-ui-dir-block-ltr.ve-init-mw-viewPageTarget-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

「該條目尚未創建」文字背景

ArticleNoTextBG

這個CSS片段可以在該條目尚未創建的訊息背後加入背景圖片,僅限站點範圍內使用。由Master Ceadeus 27編寫:

#mw-content-text .noarticletext {
    background-image: url('<insert error image URL>');
    background-blend-mode: normal;
    background-size: cover;
}

全域個人檔案背景

CustomMastheadImage

如果你想要用戶檔案的右下角加入背景圖片,可以使用:

.UserProfileMasthead .masthead-info {
    background-image: url("<insert URL to profile background image>");
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: right bottom;
}

注意:如果背景圖片屬於深色,則加入color: white

Div邊框圓角化

DivRoundedCorners

這個CSS片段將 <div>的邊框圓角化。由PhilippL編寫。

#WikiaPage div,
#WikiaPage .avatar,
#WikiaPage section,
#WikiaPage table,
#WikiaPage .WikiaMenuElement,
#WikiaPage .widget-box,
#WikiaPage .preview_mobile.preview_icon,
#WikiaPage #wpPreviewMobile,
#WikiaPage #articleCategories {
    border-radius: 5px;
}

滾動條自定義

MinimalScrollbar

如果你想要自訂維基的滾動條,可以使用這些CSS選擇器調整各個屬性:

/* Makes the scrollbar 8px wide */
::-webkit-scrollbar {
    width: 8px;
}
 
/* Makes the scrollbar track have a black background */
::-webkit-scrollbar-track {
    background: black;
}
 
/* Makes the scrollbar bar have a green background */
::-webkit-scrollbar-thumb {
    background: #228B22;
}
 
/* Makes the background for the scrollbar bar a darker shade of green when hovered */
::-webkit-scrollbar-thumb:hover {
    background: #222;
}

Note:自訂滾動條僅支持部分瀏覽器,如Chrome、Opera、Safari。

源代碼編輯器頁首改進

EditorSourceHeaderImprovements

這個CSS片段在傳統編輯器針對頁首做出些許的改進,包含更改顏色、按鈕陰影移除、調整不透明度。由JustLeafy編寫。

/* Source Editor Header Improvements*/
.EditPageHeader {
    opacity: .95;
    background-color: darkgreen;
    border-bottom: none;
    box-shadow: none;
    color: #fff;
}
 
/* Fix wrong colored links */
.EditPageHeader > .wordmark,
.EditPageHeader > h2,
.EditPageHeader > h1 a,
.HelpLink,
.HelpLink > a,
.NotificationsLink,
.NotificationsLink > a {
    color: inherit;
}

取消隱藏添加至條目按鈕

A2A

這個CSS片段在燈箱取消隱藏添加至條目按鈕。這個添加至條目一般用於將圖片插入至條目中,當用戶在查看圖片時,點擊添加至條目按鈕並在輸入框輸入條目名稱後即可完成。由JustLeafy編寫。

.LightboxModal .lightbox-add-to-article {
    display: initial;
}

取消隱藏聊天室的剩餘字符

UnhideRemainingCharacters

這個CSS插件會顯示剩餘字符功能,無論輸入多少字符。由JustLeafy編寫。

/** Unhide Characters Remaining **/
 
/* Display the "characters remaining" feature at any time */
 
body .remaining {
    display: initial;
    font-weight: bold;
    margin-right: 5px;
    margin-top: 30px;
    z-index: 1;
}
 
/* Limiting the width of the chat message inputbox to keep space for this feature */
 
.Write [name="message"] {
    width: 96%;
}

凸顯用戶名

HighlightUsername

這個CSS片段會凸顯管理員的用戶頁、訊息牆、貢獻頁、博客列表鏈接:

a[href$=":管理員的用戶名"],
a[href$="/管理員的用戶名"] {
    /* changes the color of the username */
    color: #006600 !important;
    /* makes the username bold */
    font-weight: bold !important;
    /* changes the font of the username */
    font-family: Arial !important;
    /* other CSS goes here */
}

請將「管理員的用戶名」改成想要凸顯的用戶名稱,#006600為凸顯顏色、Arial為所凸顯的字體。你也可以根據需求移除部分不需要凸顯的配置。

修復檔案歷史表格

FFHTC

這個小小的CSS插件會修復檔案歷史表格的背景顏色,從白色改成黑色。

/* Fix File History Table Color */
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td,
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > th {
    background: black !important;
    color: white !important;
}
 
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td {
    border-bottom: 1px #222 solid !important;
}
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+