来自WIKI帮助中心

首页 > 首页导航栏样式修改



  • 本页面内容为修改首页导航栏样式,需要先了解新WIKIcss添加的内容,请仔细阅读使用。
  • CSS样式存在生效缓存,未生效时,需要不停的使用Ctrl+F5进行反复刷新促使其生效。


导航栏样式介绍

默认样式中,左侧导航与首页栏目的样式相通。


红框内为3级标题的样式,蓝框内为4级标题的样式


CSS页面中的这两段代码分别是导航栏的两段标题的样式。


CSS页面中的这两段代码分别是导航栏的两段标题的样式。


分别对应页面内的===导航===和====导航====(WIKI语言中称三级标题及四级标题)。


修改导航栏颜色

以三级标题举例(四级标题修改同三级标题)

.sy-wikibox h3 {
margin-top: 0px !important;
border-bottom: 0px solid rgb(243,243,243);
background: #DADADA;
height: 35px;
line-height: 35px;
padding-left: 15px;
font-size: 16px;
border-left: 0px solid #508759 !important;
color: #3c3c3c;
}


background: #DADADA;(#DADADA为颜色代码,修改对应颜色即可)


修改导航栏为图片UI

类似以下图片,一张图足够长时可以使用这种方法(550px以上)

修改导航栏1.png


复制以下代码替换对应样式,并修改对应样式以配合图片。


.sy-wikibox h3 {
color: #FFF;
margin-top: 0px !important;
height: 40px;
line-height: 40px;
clear: both;
font-size: 20px;
padding-left: 15px;
border: 0px none;
background: transparent url(http://joymepic.joyme.com/wiki/images/yxwj/8/8f/%E9%A6%96%E9%A1%B5%E6%A0%87%E9%A2%98%E6%A0%8F1.png?v=201705270937) repeat scroll 0% 0%;
border-radius: 0px;
}


修改图片(替换代码中的地址为替换的图片地址即可,需要上传文件至WIKI,具体操作方法与修改首页背景图片相同):

background: transparent url(http://joymepic.joyme.com/wiki/images/yxwj/8/8f/%E9%A6%96%E9%A1%B5%E6%A0%87%E9%A2%98%E6%A0%8F1.png?v=201705270937) repeat scroll 0% 0%;


修改高度(符合图片高度,推荐高度为40px):

height: 41px;
line-height: 41px;


修改字体颜色:

color: #FFF;(#DADADA为颜色代码,修改对应颜色即可)


修改字体离左边的边距:(默认边距为15px)

padding-left: 15px;