最新消息:

wordpress站名高度、左右宽度、菜单栏颜色等调整

web 林夕 3063浏览 0评论

style.css第69到第78行(wordpress3.5版本,以下同)

/* =Structure
----------------------------------------------- */

body {
 padding: 0 2em;
}
#page {
 margin: 2em auto;
 max-width: 1000px;
}

第73行(本例中第5行)代码的2em是主页面左右两边的灰边的宽度。第76行(本例中第8行)代码的2em是站名上边的灰边的高度。

第314行到第328行

/* =Global
----------------------------------------------- */

body, input, textarea {
 color: #373737;
 font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 300;
 line-height: 1.625;
}
body {
 background: #e2e2e2;
}
#page {
 background: #fff;
}

第324行(本例中第11行)控制左右两边的灰边的颜色,如果改为background: #FFFFFF;就是白色的了,就看不出边边的颜色了。原本的background: #e2e2e2;就是灰边。

下面代码是style.css(wordpress3.5版)第515行到第637行。

第526行(本例中第12行)2em是站名上边的空白高度,原本是3.65625em。543行(本例中第29行)2em是站名下边的空白高度,原本是3.65625em。556行(本例中第41行)控制首页页面菜单栏的背景色,background: #FFFFFF是纯白色。原本是background: #222。第571行(本例中第56行)菜单栏字体大小。第581行(本例中第66行),菜单栏字体颜色。第583行(本例中第68行),菜单栏矩形的高度,原本是3.333em,我改成2.222了。

/* =Header
----------------------------------------------- */

#branding {
 border-top: 2px solid #bbb;
 padding-bottom: 10px;
 position: relative;
 z-index: 9999;
}
#site-title {
 margin-right: 270px;
 padding: 2em 0 0;
}
#site-title a {
 color: #111;
 font-size: 30px;
 font-weight: bold;
 line-height: 36px;
 text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
 color: #1982d1;
}
#site-description {
 color: #7a7a7a;
 font-size: 14px;
 margin: 0 270px 2em 0;
}
#branding img {
 height: auto;
 display: block;
 width: 100%;
}

/* =Menu
-------------------------------------------------------------- */

#access {
 background: #222; /* Show a solid color for older browsers */
 background: -moz-linear-gradient(#252525, #0a0a0a);
 background: -o-linear-gradient(#252525, #0a0a0a);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
 background: -webkit-linear-gradient(#252525, #0a0a0a);
 -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
 -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
 box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
 clear: both;
 display: block;
 float: left;
 margin: 0 auto 6px;
 width: 100%;
}
#access ul {
 font-size: 13px;
 list-style: none;
 margin: 0 0 0 -0.8125em;
 padding-left: 0;
}
#access li {
 float: left;
 position: relative;
}
#access a {
 color: #eee;
 display: block;
 line-height: 3.333em;
 padding: 0 1.2125em;
 text-decoration: none;
}
#access ul ul {
 -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
 box-shadow: 0 3px 3px rgba(0,0,0,0.2);
 display: none;
 float: left;
 margin: 0;
 position: absolute;
 top: 3.333em;
 left: 0;
 width: 188px;
 z-index: 99999;
}
#access ul ul ul {
 left: 100%;
 top: 0;
}
#access ul ul a {
 background: #f9f9f9;
 border-bottom: 1px dotted #ddd;
 color: #444;
 font-size: 13px;
 font-weight: normal;
 height: auto;
 line-height: 1.4em;
 padding: 10px 10px;
 width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
 background: #efefef;
}
#access li:hover > a,
#access a:focus {
 background: #f9f9f9; /* Show a solid color for older browsers */
 background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
 background: -o-linear-gradient(#f9f9f9, #e5e5e5);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
 background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
 color: #373737;
}
#access ul li:hover > ul {
 display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
 font-weight: bold;
}

转载请注明:一秒钟的梦 » wordpress站名高度、左右宽度、菜单栏颜色等调整

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址