最新消息
  • 您好下载中心的主题现已开启全免费下载!
  • 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件售前、售后问题请联系QQ:5916171

模板修改 Footer样式修改

大垃圾
UID
704
注册
2020/03/27
消息
27
黄金
612.35G
    Windows 10 Chrome 85.0.4183.121
  • #1
转载来自:Xenforo | Footer样式修改
〇、效果图
1601536204007.png
一、修改教程
测试Xenforo主程序版本: Xenforo v2.1.10 Patch 2
【在此之前你必须确保你的主程序安装了有效的UI.X插件】
在(外观)=>(模板列表)中搜索(uix_extendedFooter)
选中其中所有代码并将其替换成如下所示的代码。
替换的代码:
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.icons a .layer span.fa{
font-size: 30px;
line-height: 55px;
text-align: center;
}
.icons{
display: inline-flex;
}
.icons a{
margin: 0 25px;
text-decoration: none;
color: #fff;
display: block;
position: relative;
}
.icons a .layer{
width: 55px;
height: 55px;
transition: transform 0.3s;
}
.icons a:hover .layer{
transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #fff;
border-radius: 5px;
transition: all .3s;
}
.icons a .layer span.fab{
font-size: 30px;
line-height: 55px;
text-align: center;
}
.icons a:hover .layer span:nth-child(1){
opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
opacity: 0.4;
transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
opacity: 0.6;
transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
opacity: 0.8;
transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
opacity: 1;
transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text{
color: #4267B2;
border-color: #4267B2;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text{
color: #1DA1F2;
border-color: #1DA1F2;
}
.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text{
color: #E1306C;
border-color: #E1306C;
}
.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text{
color: #00F260;
border-color: #00F260;
}
.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text{
color: #ff0000;
border-color: #ff0000;
}
.icons a:nth-child(1) .layer span{
box-shadow: -1px 1px 3px #4267B2;
}
.icons a:nth-child(2) .layer span{
box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:nth-child(3) .layer span{
box-shadow: -1px 1px 3px #E1306C;
}
.icons a:nth-child(4) .layer span{
box-shadow: -1px 1px 3px #00F260;
}
.icons a:nth-child(5) .layer span{
box-shadow: -1px 1px 3px #ff0000;
}
.icons a .text{
position: absolute;
left: 50%;
bottom: -5px;
opacity: 0;
transform: translateX(-50%);
font-family: 华文彩云;
font-size: 15px;
white-space:nowrap;
transition: bottom .3s ease, opacity .3s ease;
}
.icons a:hover .text{
bottom: -35px;
opacity: 1;
}
</style>
<xf:if contentcheck="true">
<div class="uix_extendedFooter">
<div class="pageContent">
<div class="uix_extendedFooterRow">
<xf:css src="uix_extendedFooter.less" />
<xf:contentcheck>
<body>
<div class="icons">
<a href="https://jq.qq.com/?_wv=1027&k=NpjUn1Pp" target="_blank">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fab fa-qq"></span>
</div>
<span class="text">加入官方Q群</span>
</a>
<a href="https://discord.gg/4M7rxjT" target="_blank">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-comments"></span>
</div>
<span class="text">加入官方Discord</span>
</a>
<a href="https://meriginal.cn/index.php?misc/contact" target="_blank">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-link"></span>
</div>
<span class="text">申请友链</span>
</a>
<a href="https://meriginal.cn/index.php?resources/" target="_blank">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-download"></span>
</div>
<span class="text">资源中心</span>
</a>
<a href="#" target="_blank">
<div class="layer">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="fa fa-wallet"></span>
</div>
<span class="text">充值钱包</span>
</a>
</div>
</body>
</xf:contentcheck>
</div>
</div>
</div>
</xf:if>
保存后在前台刷新页面或是(Ctrl+F5)刷新缓存查看。
【在修改前请先做好该模板的备份,若产生严重错误概不负责。】
 
UID
1029
注册
2020/10/03
消息
22
黄金
594.00G
    Windows XP Chrome 49.0.2623.112
  • #2
您好,请问2.2.0可以使用此教程嘛?我自己试了一下,却使用不了
 
大垃圾
UID
704
注册
2020/03/27
消息
27
黄金
612.35G
    Windows 10 Chrome 86.0.4240.111
  • #3
您好,请问2.2.0可以使用此教程嘛?我自己试了一下,却使用不了
没试过2.2的,但是这是原生html代码,没采用任何xf语法
 

相似主题

  • 讨论
技巧教程 给你的网站添加一个看板娘! [阅读权限 5 消息 ]
14
726
  • 讨论
模板修改 修改主题颜色
0
303
  • 讨论
技巧教程 给你的小工具加上选项卡 [阅读权限 10 消息 ]
4
364
  • 讨论
技巧教程 给你的网站添加一个“每日一言”小工具 [阅读权限 5 消息 ]
3
363
顶部 底部