基于Genesis Sample Child 子模板定制全宽度模板

最后更新于 2012 年 11 月 20 日

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添加背景色，修改链接文字的颜色，最终效果如下图所示。

示例模板下载：[download id=20]