Genesis Framework提供的示例子模板宽度是960px,我们可以通过修改样式表将其改为全宽度模板。Genesis Framework 1.8的结构清晰,分为header、nav、subnav、inner(content部分)、footer-widget(optional)、footer,每个部分中的内容都被class为wrap的div包围。

Genesis Framework HTML结构

<div id="wrap">
    <div id="header">
        <div class="wrap"></div>
    </div>

    <!-- #header -->
    <div id="nav">
        <div class="wrap"></div>
    </div>

    <!-- #nav -->
    <div id="subnav">
        <div class="wrap"></div>
    </div>

    <!-- #subnav -->
    <div id="inner">
        <div id="content-sidebar-wrap">
            <div id="content" class="hfeed"></div>
            <div id="sidebar" class="sidebar widget-area"></div>
        </div>

        <!-- #content-sidebar-wrap -->
        <div id="sidebar-alt" class="sidebar widget-area"></div>
    </div>

    <!-- #inner -->
    <div id="footer-widgets"></div>
    <div id="footer"></div>
</div>

<!-- #wrap -->

修改为全宽度模板

要将模板修改为全宽度只需要更改子模板下的style.css,genesis的html结构不需要改变。

打开style.css,搜索#wrap,将#wrap的宽度去掉

wrap {
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
	background-color: #fff;
	box-shadow: 0 0 5px #999;
	margin: 15px auto;
	width: 960px;
	padding: 0;
}

去掉width: 960px后模板会变成全宽度,但我不希望content宽度依然维持960px,于是找到#inner

#inner {
	margin: 0 auto;
	overflow: hidden;
	padding: 20px;
}

改为

#inner {
	margin: 0 auto;
	overflow: hidden;
	padding: 20px;
	width:960px;
}

至此模板就变为全宽度样式了,为了看起来更明显,为header、nav、subnav以及footer添加背景色,修改链接文字的颜色,最终效果如下图所示。

示例模板下载:Genesis全宽度子模板示例下载 已下载 257 次