最新消息
  • 您好下载中心的主题现已开启全免费下载!
  • 通过购买升级账户到相应的用户组 36元/6个月、24元/季度、7元/月、4元/周。 免费用户组升级
  • 欢迎 游客 您的光临,下载之前请先阅读 下载资源说明 少走弯路。任何技术问题请在论坛提问,本站定制插件售前、售后问题请联系QQ:5916171
  • 点击链接加入群聊【XenForo讨论社区】:群号:143277648

技巧教程 教你如何跳脫 Xenforo 回歸原生編寫網頁 CSS 樣式的方法

终身会员
UID
1008
注册
2020/09/17
消息
25
黄金
1,508.16G
    Windows 10 Chrome 86.0.4240.75
  • #1
不想被 XenForo 的框架給卡死嗎?
每次修改樣式模版都得到後台找less嗎?
每次重新安裝樣式都得重新再去改客制化樣式嗎?
為什麼要被 XenForo 的框架給限制住呢?

現在教你如何跳脫 XenForo 回歸原生編寫網頁 CSS 樣式的方式吧!

●新人不懂怎麼修改樣式的時候,這個方式很適合你,但有利就有弊。

優點說明
※1.主要目的一,在於同一個風格樣式模版下如果有很多子樣式,這個方法非常適合拿來做繼承覆蓋,改一次就好,不用一個一個子樣式添加相同的 CSS 代碼了。
※2.目的二,可以更容易的修改樣式。
※3.目的三,易於遷移,不被 XenForo 綑綁,可以直接分享你的 CSS 檔案到其他的客戶端。
※4.目的四,在不破壞原始 less 檔的情況下做 CSS 的樣式覆蓋,徹底脫離 less 的框架。


缺點說明
▲1.當修改的樣式多了之後,又會開始亂了,維護會很麻煩?
▲2.覆蓋來覆蓋去,自己都亂了,別人也看不懂,這點就得自行承擔。


操作說明
1.首先在根目錄底下建立一個css檔案,最好放在styles資料夾下,這是規矩,css的檔案命名可以自訂,例如放在 根目錄/styles。
2.例如我建了一個檔名 style_overwrite.css 的 css 檔放在 styles 路徑下
2020-10-13_164230.jpg
3.原生網頁在head區最下面添加link進去,這樣就可以後蓋前,將樣式覆蓋掉了,但是在 XenForo 中的<head>位置在哪呢?
3-1.到後台外觀-> 模版列表-> PAGE_CONTAINER-> 選擇父層的樣式(例如UI.X Pro 有光跟暗兩個主題風格,但是父層只有一個UI.X Pro,所以請選擇父層)
3-2.PAGE_CONTAINER-> 在裡面找到head區,並在head區的最後一行添加上css連結

HTML:
<head>
    <!--自定義外部添加less檔的覆蓋樣式-->
    <link rel="stylesheet" href="/根目錄名稱/styles/style_overwrite.css">
</head>
2020-10-13_164505.jpg
4.你只需要指定你想要覆蓋的部分寫在 style_overwrite.css 裡面

==以下使用 UI.X 2 Pro 做範例==
示例1:隱藏橫向導覽列。
示例2:把 UI.X 2 pro 的 Logo 圖片隱藏掉。
示例3:自定義 Logo 圖 ,改成想要的 Loge 圖,只要找到 class 名稱並寫下以下 css,就可以覆蓋去掉圖片了
(這裡是使用背景圖片,把img標籤隱藏,如果要修改img標籤的圖片必須在模版下修改html)
logo圖片路徑可以隨意,制式規定通常會放在img資料夾下,但我這邊演示是放在data/資料夾下
2020-10-13_164254.jpg
CSS:
/* 1.隱藏橫向導覽列 */
.block-tabHeader {
   display: none;
}

/* 2.隱藏logo圖 */
.uix_logo img {
    display: none;
}
/* 內層導覽列 */
.p-nav-inner{
    height: auto; /* 內容圖片多大就撐開多高 */
}
/* 3.自定義logo圖 */
.uix_logo {
    width: 100px;
    height: 100px;
    background-image: url(../data/logo.png);  /* 相對路徑,請正確設定 */
    background-size: cover; /* 全尺寸背景圖片,圖片再大也會被縮小填滿為限制的寬高 */
}

/* 導覽列縮小時圖片跟著縮小,根據需要可以再加上transition漸變動畫,這裡就不演示 */
.uix_headerContainer .p-navSticky.is-sticky .p-nav-inner .uix_logo{
    width: 60px;
    height: 60px;
}

修改前
2020-10-13_154615.jpg

修改後(導覽列收起時)
2020-10-13_161302.jpg

修改後(導覽列展開時)
2020-10-13_152113.jpg



修改後所有子樣式都一併修改了,很方便吧!而且想還原只要把這個CSS檔案拿掉就還原了。
 
最后编辑:
打赏用户:

相似主题

  • 讨论
模板修改 教你如何自定义资源中心网格样式 [阅读权限 8 消息 ]
0
241
  • 讨论
3
360
  • 讨论
技巧教程 宝塔面板安装Nginx_Pagespeed给XenForo加速 [阅读权限 5 消息 ]
2
357
顶部 底部