最新消息
  • 您好下载中心的主题现已开启全免费下载!
  • 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件售前、售后问题请联系QQ:5916171

风格

管理成员
UID
1
注册
2017/07/28
消息
1,010
黄金
15,317.27G
虽然XenForo具有时尚和现代的外观,但总有一些网站需要他们的论坛来匹配他们现有材料和主题的风格,并且需要修改XenForo以适应它们。

XenForo配备了一系列工具,可让您按照自己的意愿以微妙或激进的方式重新设计论坛。

您可能只想调整一些颜色,或者您可能想通过制作完全自定义的HTML模板来大幅改变所有外观的方式。

可用于风格调整和修改的工具包括简单易用的控件,以调整颜色,字体和大小等内容,直至专家的代码编辑器,这些工具允许您编辑整个系统的CSS和HTML建成。

样式

XenForo中的所有文体工具都捆绑到称为样式的数据集合中,这些数据有时称为皮肤或主题。

样式由HTML模板,CSS / LESS模板和样式属性组成,它们是用于将样式选择注入模板的值的集合。以后更多关于风格属性...

当你第一次安装它时,XenForo带有一种叫做默认风格的默认风格。你可以自由地编辑这种风格的任何方面,但你也可以利用另一种XenForo的能力,即具有多种风格的能力。

通过添加第二种风格,您可以在新风格和默认风格之间自由切换视图,以确保一切都按计划进行。

预先构建的样式

有许多设计人员和程序员为XenForo系统生成样式,因此您可以找到专业设计的预制样式以满足您的需求。

将预构建的样式应用于您自己的XenForo安装只需几分钟,对于大多数网站管理员来说,管理起来很简单。

XenForo资源管理器提供了各种各样的预建样式。

设置默认样式

当您的网站安装了多个样式时,您可以指定将哪些安装的样式投放给尚未指定自己偏好的访问者。

为此,请访问XenForo主选项系统的“ 外观”部分,然后使用“ 默认样式”选项选择要作为默认样式的样式。

注意
您的网站的默认样式不必是名为“ 默认样式”的样式 - 这只是应用于您的初始XenForo安装创建的样式的名称,如果您愿意,您可以重命名该样式。

您也可以在同一个地方指定HTML电子邮件的默认样式。

风格继承

添加新样式时,您需要选择新样式是否是现有样式的子样。

如果您选择不具有父级样式,则新样式将自动从隐藏的主样式中自动继承其所有数据,这通常是隐藏的。

或者,如果您将新样式创建为默认样式的子样式,它将自动继承默认样式中的所有数据,该样式继而从主样式继承其数据。任何时候对默认样式进行的任何更改都会立即被新的子样式继承,除非子样式本身对父样式中已更改的数据项进行了修改。

困惑了吗?

别担心,它比听起来简单得多。

我们来看一个例子,在这个例子中,我们将使用一种名为“ 我的风格 ”的风格,该风格是作为Default风格的子元素创建的。

(1)默认样式
(2)我的风格

我们将想象,我们正在改变一个名为Style的属性的值textColor,它控制着XenForo中大部分文本的颜色。

在我们改变任何东西之前,textColoris 的值是@xf-paletteNeutral3,它本身是对XenForo调色板中颜色的引用,它是非常非常暗的灰色。它基本上是黑色的。

此值在主风格中设置,由默认样式继承,因此也由我的样式继承。

现在,让我们想象,我们改变的价值textColor在默认的风格来blue。只要我们做到这一点,有效值textColor在我的风格也将成为blue,因为变化是继承自默认样式。

改变继承

在上面的示例中,我blue的textColor样式从其父级样式“ 默认样式”继承了样式属性的自定义值。

但是,这个blue值只能被继承,所以如果我们回到样式管理器并将我的样式更改为没有父类,blue定制将从我的样式中消失。

重写继承

随着我的风格继承blue的价值textColor来自其母公司,默认样式,可以通过自定义内的值来覆盖这个继承我的风格本身。

如果我们编辑的价值textColor在我的风格,并将其设置为red,该blue值将不再继承自默认的风格,因为我的风格有自己的定制值,这将覆盖继承值。

继承摘要

XenForo的样式继承功能允许您构建相互继承的样式集合,因此您只需对子样式进行较小的更改,即从父类继承自定义。

考虑下面的样式树,其中每个样式的名称描述了对该样式进行的定制。

(1)默认样式
(2)自定义标题
(3)大脚注
(5)红色背景
(6)蓝色背景
(4)小文本
(7)红色背景
(8)蓝色背景

在这个例子中,(2)自定义标题是一种自定义主站点标题外观的样式,以便与样式中的网站其余部分相匹配。

两者(3)大尾和(4)小文继承其父风格这个自定义标题。每种样式都有两种子样式,可将背景的颜色自定义为红色或蓝色。所有这些样式都从顶级自定义样式继承自定义标头。

样式属性

样式属性允许管理员快速轻松地调整样式的颜色,大小和字体等。

样式中所有属性的值都从其父样式继承,除非它们是在当前样式中特别定制的。

所有属性都排列在Style属性管理器页面上的逻辑分组中。点击组名称将打开该组样式属性的编辑器。

样式属性可以是许多属性类型中的任何一种,具体取决于它们旨在控制的数据。

一些属性被设计为保存单个值,包括以下类型:

·颜色
·文本值
·带单位的数字(如10px)
·没有单位的数字
·开/关开关
·多项选择选项

其他属性被设计为保存一组值,这些值被组合在一起以定义特定界面元素的样式规则。这些CSS类型属性可以包含以下任何值:

·文字颜色,大小,字体和样式
·背景样式
·边框尺寸,样式,颜色和半径
·填充和保证金
·额外的CSS规则

颜色

让我们看看一组简单的属性,这些属性可以在样式属性管理器中的调色板组下查看。

在这里,我们定义了许多颜色,用于定义XenForo用于构建其界面的完整调色板。改变任何这些颜色将在整个系统中替换该颜色的所有实例。

此外,还有一个开关可以将样式类型设置为Light或Dark。此开关用于定义系统在混合,增强或减弱颜色时如何修改颜色。例如,如果样式类型设置为“ 光”并且系统想要增强颜色,则颜色将变暗,而如果样式类型设置为“黑色”,颜色将变亮。

调色板中设置的颜色在整个XenForo系统中引用,最重要的是在样式属性管理器的第二组属性中,基本颜色。

在基本颜色组中,颜色调色板中的颜色被分配给角色,例如文本颜色和内容背景颜色。样式属性是使用前缀引用@xf-随后样式属性的唯一ID来引用,所以引用样式属性中性3从调色板,其唯一的ID paletteNeutral3,我们指@xf-paletteNeutral3。您可以看到,在默认样式中,文本颜色样式属性(textColor)使用此属性中的值。

更高级的属性

从样式属性管理器中,打开标题和导航组。

在这里,您可以找到控制所有XenForo页面顶部外观的样式属性,包括标题和公共导航。

这里的一些属性是单值属性,例如标题调整颜色,它为标题中的收件箱和警报区域的背景定义颜色。

再往下看,你会发现一些高级属性,这些属性被排列成逻辑组。

打开标题/徽标行组,您将找到用于设置标题主要部分样式的属性集合。在默认样式中,我们仅使用了两个值,即标题中的任何文本的颜色,我们设置为使用调色板中的颜色2,或者@xf-paletteColor2设置为使用Color 5的主背景颜色从调色板,或@xf-paletteColor5。

点击正在使用的颜色名称旁边的颜色芯片将打开一个弹出窗口,您可以从基本颜色范围或调色板中选择不同的颜色,也可以使用Picker选择一种全新的颜色。一旦你选择了你想要的颜色,点击更新按钮,控件将被更新。点击保存按钮,你会看到你下次在XenForo安装的公共区域加载页面时所做的更改。

通过以这种方式构建自定义样式属性的集合,您可以显着改变XenForo站点的外观。

模板

所有XenForo页面的最终输出都由模板控制。模板包含HTML或CSS / LESS,以及用于XenForo的称为模板语法的特殊语言增强功能,它允许在模板中直接操作数据,而不必编写PHP代码来完成这项工作。

包含CSS / LESS样式规则模板有一个.less或.css文件扩展名,不包含HTML。它们用作包含样式属性的规则的容器,并定义应该如何显示剩余模板中的HTML。使用@xf-stylePropertyName系统引用LESS / CSS模板中的样式属性值。

HTML模板包含向您的世界展示XenForo数据的标记,并且可以包含PHP变量{$variableName},特殊的XenForo标签<xf:tagname ...>和XenForo模板函数{{ functionName($arg1, $arg2, ...) }}。

所有模板都可以使用模板编辑器进行自定义,但是您应该意识到,如果您不知道自己在做什么,那么粗心编辑可能会破坏重要的网站功能。

模板继承

与样式属性一样,模板从父类型继承,除非它们已用当前样式自定义。

使用自定义模板进行升级

当您自定义模板时,更改将被保存并且不会被覆盖,除非您明确指示系统这样做。

虽然这可以防止不必要的更改,但这也意味着,如果新版本包含已定制的模板的更新版本,那么在将XenForo升级到新版本时,您的自定义模板可能会过时。

有两种工具可以帮助您避免这种情况。

过时的模板

在运行XenForo升级之后,系统将提醒您任何已定制过期的模板。

将显示这些模板的列表以及合并选项,该选项会将您的自定义模板与新版本进行比较,并尝试将您的自定义合并到最新更新版本的模板中。

但是,如果您对在新版本的模板中也发生更改的部分进行了自定义更改,则会产生冲突,您必须手动解决该问题。您需要选择使用哪个版本的冲突版块(或两个版本)。

当您为被列为过期的模板选择合并链接时,您将看到模板的最终合并版本将会是什么。成功合并的部分将以蓝色突出显示。冲突部分将以黄色突出显示,并带有按钮帮助您解决冲突。一旦你解决了任何冲突,你可以点击文本进行编辑以适应你的确切需求。

注意
运行XenForo升级后,应立即检查以确保您的模板不会过时,因为如果过期的模板不受管理,重要的或新的功能可能会被破坏或丢失。

模板修改

作为直接定制模板的替代方案,XenForo还提供了一个名为“ 模板修改”的系统,该系统允许您选择模板,指定要查找的模板的一部分以及插入新模板代码以修改指定部分。

在模板修改管理器中,您将找到当前正在使用的所有模板修改列表,并按照已定义它们的加载项进行分组。您可以通过使用列表中的切换小工具快速禁用并重新启用任何模板修改。

点击其中一个修改,或点击添加模板修改按钮,将加载模板修改编辑器。

在编辑器中,可用的控件以及要修改的模板名称如下所示:

修改键

使用它为您的修改定义唯一标识符。字母,数字和下划线是允许的。

描述

应包含修改功能的简短描述,例如向成员个人资料页面添加新标签。

模板内容

此框仅供参考,并包含要修改的模板的全文。

搜索类型

在许多情况下,您会希望在此处使用简单替换,系统将搜索一些文本,然后将其全部替换。

如果您想进行更复杂的匹配,或者想要在修改中保留部分或全部匹配的文本,则还可以使用正则表达式。

高级用户可以指定一个PHP回调来完全控制修改操作的方式。

查找

在这里输入修改要替换的文本,您指定的文本类型应与搜索类型的要求相匹配。

许多XenForo模板<!--[XF:name_goes_here]-->在有用位置包含特殊占位符,这使您可以快速方便地输入令牌代码作为修改的查找文本。

替换

在这里,你应该输入HTML代码来代替你在Find中指定的文本。

由于此HTML将被插入到模板中,因此您可以在代码中充分利用XenForo 模板语法。

如果您想要包含随新HTML一起发现的文本,可以$0在HTML中使用该标记进行包含。

如果您查找的文字是一个正则表达式,从该表达式中的任何额外的匹配可以使用插入$1,$2等等。

执行顺序

几个模板修改可能会附加到相同的模板。的执行顺序值被用于确定在其中这些修改将被应用的顺序。更低执行顺序号的修改将在具有更高值的那些之前运行。

注意
尽管模板修改是自定义XenForo模板最安全的方式,但仔细检查您的修改是否未阻止或破坏任何新的或已更改的功能(如果它们附加的模板在XenForo升级后已被修改)仍是明智之举。
 
顶部 底部