论文全幅框架的最终视觉指南

如果你和大多数用户一样,在论文管理面板中有很多选项可供选择,您实际上还没有尝试过所有这些选项——您可能不知道它们都做了什么。一个特别的选择难倒了许多论文的新用户,因为它的作用并不明显。事实上,即使你改变了它,您可能根本不会在站点上看到任何视觉上的变化。这个简单的选项可以让您的设计选择有很大的不同。它位于WordPress安装管理中“论文设计选项”下的“框架选项”面板中。亚博yabo88app 下载默认情况下,当你安装新的论文副本时,这个页面框架被选中。你可能已经用了一段时间的论文,却从来没有意识到你还有另一个选择!对于本教程,我们假设您已经熟悉页面框架并准备好学习如何使用宽屏框架。

[后图像]

当默认页面框架是活动的,呈现的页面由单个α容器它包含一个页页包含所有页面元素的元素:标题,内容,和页脚。那α容器是一定的宽度,它的外部是身体的背景。视觉上,这导致布局看起来像一个单一的,在背景上浮动的内聚性页面(如果它们的颜色不同,当然)。头的任何自定义,内容或页脚被限制在其中页页元素,因此,不要从窗口的边缘到窗口的边缘。大多数新用户在第一次尝试创建跨越屏幕宽度的自定义页眉或页脚时都会遇到这种限制。在论文论坛上快速搜索一下就能找到答案:“转到……全宽框架-但这仅仅是个开始。您需要了解论文是如何生成页面元素以利用新布局的可能性的。

一旦你把选项切换到全宽框架,起初,您可能看不到任何视觉上的变化,但仔细检查论文生成的HTML代码会发现一些以前不存在的新“区域”:

  • 第二区域
  • 第二区域
  • # footer_area

这三个都有这个班全宽度也。这个页页元素ID已更改为元素类,现在它被作为div放置在这三个区域的每个区域中。你的页面,实际上,被分割成3个水平“区域”,它扩展了屏幕的整个宽度。因为这些区域相互叠加,你的页面可能仍然像以前一样——一个,内聚页面——但是现在你可以从理论上分离这些区域(用内边距或边距),最重要的是,独立设计,创建一个视觉设计,这种设计现在很常见,有横跨整个窗口的页眉和页脚,并且在视觉上与中间的“内容”区域不同。

页面框架元素是这样嵌套的:

body > #container > .page > . headerbody > . container > .page > . content_boxbody > . container > .page > . footer

全宽框架,它们是这样嵌套的:

标题栏> #标题栏> .page > . headerbody > #content_area > .page > #content_boxbody > #footer_area > .page > #footer

因此,如果你已经有一个图像作为背景α标题,它仍然只能从页面的边缘延伸到边缘(这就是为什么看起来没有任何变化)。为了创建横跨屏幕的可视标题图形,你会想要瞄准第二区域相反。您仍然可以将格式应用于α标题,但因为它是嵌套在,它的大小将受到限制。

关于“外页填充”的注意事项:您可能已经注意到同一“框架选项”面板中的另一个选项。这个,州,应用额外的填充元素,其中包含α标题γ内容盒,和脚注-只要颜色与嵌套元素相同,看起来就像你在整个页面边缘添加了一个空白。风格不同,然而,你会注意到,只有当你将“外页填充”设置为除0以外的任何值时,它才可见,*或者*如果其嵌套的子元素没有自己的背景色或图像(透明,它们会显示元素“下面”)。

既然你已经学会了全宽框架修改论文的html输出,你可能已经很想直接投入到你的新设计中去了。许多人在设计大量的全宽标题时,更喜欢将导航菜单从标题中完全移出(这样就不受标题宽度的限制)。α标题,嵌套在.一个流行的mod被Kristarella一段时间前,要将导航菜单移出标题并移动到其自身的“区域”中第二区域.由于论文的强大钩子系统,通过向元素中添加以下代码,可以非常容易地重新排列元素custom_functions.php文件:

删除“action”(论文“header”前的“hook”,“论文导航菜单”);功能全宽导航()?>
            }在“内容”区域、“全宽”区域之前添加“操作”(“论文挂钩”);

这个函数可以防止Thesis生成导航菜单,然后定义一个新的涅瓦尔地区,插入到第二区域第二区域,与类像其他区域一样嵌套,导航菜单会在里面生成。现在可以设计样式了涅瓦尔地区为了看起来像导航栏填充了整个屏幕宽度。

下面的视觉指南将帮助您了解这一切是如何结合在一起的(单击放大):

thesis-full-width-guide-narrow

请记住,“嵌套”元素实际上是在它们的父元素之上绘制的。这已经在上面用深浅不同的颜色显示出来了。较暗的颜色是较低的“层”,上面覆盖着较轻的——因此从下到上第二区域,然后#标题区域.页面,然后α标题.如果不指定上层的格式(或在某些情况下,如果删除默认的论文格式,通常# fff背景),它们将透明地显示为下面的层指定的内容。这也有助于记住γ[带]区总是在其他东西后面横跨整个宽度,所以如果你的看起来没有,这是因为有些东西覆盖在上面,它的格式阻碍了您对下面元素的查看。

这还解释了如何为指定图像#标题区域.页面它跨越了“页面”的整个宽度,但不是完整的“屏幕”,同时保持页面填充,这为下面的内容提供了一个很好的空白。这样做,您可以将重复的无限背景分配给第二区域,延伸到屏幕边缘,一张图片分配给#标题区域.页面它与第二区域背景。

如果有帮助,通过将以下代码粘贴到custom.css中,您可以用自己的清晰安装重新创建上述截图:

/*头区*/。自定义头区背景:213C63;}.custom header _area.page background:7A98c2;}.custom header background:cfe2ff;边框底端:0;}/*导航栏区域*/。自定义导航区域背景:589B4D;}.custom nav _area.page background:7fc874;}.custom.menu_background:c4e9be;边界:0;}.custom.menu li.tab a,li.tab边框:0;}/*内容区*/。自定义内容区背景:D8D86C;}.custom content _area.page background:efefef8e;}.自定义内容框背景:ffffd3;}/*页脚区域*/。自定义页脚区域背景:eba7b5;}.custom footer_area.page background:eccd3;}.custom footer border:0;背景:FEF;}/*在所有内容后面*/body.custom background:9B1F1F;}

记住任何样式只有在“外部页面填充”设置为大于零的值时,才会在边缘处可见扩展。否则,这个元素仍然存在,但它不会显示在边缘之外,很可能会被上面的嵌套元素遮挡。

这个全宽框架是论文中非常强大的布局。我个人总是在我做的每一个论文定制中启用它,即使我没有设计任何从屏幕边缘到另一边的视觉效果。我喜欢它如何将页面分成三个“区域”,这让我很容易在这些区域之间插入定制代码。它还允许我独立于内容部分格式化页眉和页脚。它可能是大多数WordPress调解员最熟悉的布局系统(与其他主题类似),尽管亚博yabo88app 下载页面框架默认情况下启用。这就是为什么那些从头开始设计WordPress网站的人经常打开亚博yabo88app 下载全宽框架在他们开始定制论文之前,首先(或者在论坛上发现解决方案之前)敲他们的头几下。

以色列是犹他州的音乐制作人/设计师/企业家。他专门为Wordpress和论文编写代码。亚博yabo88app 下载查看他的投资组合网址:www.somaticsudios.com或者在Twitter上跟踪他以色列教堂