HELIX3 FRAMEWORK教程

Helix3教程

自定义的CSS和标题代码(Helix3教程)

您可以使用您自己的自定义代码轻松地自定义Joomla 3构建的Helix3框架兼泉铁,例如:CSS兼泉铁,JavaScript兼泉铁,Metatags兼泉铁,链​​接和验证代码兼泉铁,通过使用该部分设置中的自定义字段礼马差。

在</ Head>之前

您在此处放置的任何代码都会显示在您新葡京在线的每个页面的头部礼马差。当您需要将验证码兼泉铁,JavaScript或CSS链接添加到所有页面时兼泉铁,这非常有用礼马差。请查看以下示例兼泉铁,了解如何使用它礼马差。

自定义的CSS和标题代码(Helix3教程)

浏览器引擎生成的前端HTML5代码的最终结果礼马差。你可以在下面的图像中看到的那一行是在结束</ head>节之前和<body>开始之前由Helix3引擎提供的兼泉铁,这意味着它完全是W3C  正确的解决方案礼马差。

自定义的CSS和标题代码(Helix3教程)

你可以使用任何种类的元标签兼泉铁,也可以将refresh元标签重定向到一个特定的目的地礼马差。JavaScript放在哪里是最好的地方?如果您希望脚本在页面显示之前提前执行兼泉铁,那么该HEAD部分就是一个好地方(这意味着使用该字段)礼马差。将脚本放入HEAD是一种常见而简单的操作兼泉铁,但高度优化的站点使用另一种方法礼马差。

但是请记住兼泉铁,您在此放置的所有代码都可能会损害您的代码质量或/和W3C验证测试兼泉铁,特别是在不兼容HTML5的情况下礼马差。你也可以使用这个解决方案来添加addcional js 礼马差。顺便说一下兼泉铁,CSS样式必须根据HTML标准在HEAD中声明礼马差。只有JavaScript被允许放置在任何地方(在Head或Body的末尾)礼马差。

自定义的CSS和标题代码(Helix3教程)

在</ body>之前的代码

您在此处放置的任何代码都会显示在您新葡京在线所有页面的正文部分的底部礼马差。例如兼泉铁,javascript代码也可以在页面主体的底部礼马差。在这种情况下兼泉铁,它会在页面显示之后执行礼马差。

如果您需要为统计信息计数器(例如 Analytics(分析)兼泉铁,Piwik兼泉铁,Woopra或Clicky)输入跟踪代码兼泉铁,则此功能非常有用礼马差。此跟踪代码将在您的Joomla 3新葡京在线的每个页面上提供礼马差。

如何使用自定义CSS

您可以使用CSS来自定义基于Helix3的任何模板的外观礼马差。它的工作原理是允许您添加自己的CSS样式兼泉铁,它允许您覆盖模板的默认样式礼马差。Helix3允许您使用2种方法添加自定义CSS代码:

方法#1: 

直接进入模板代码而不使用任何外部文件链接礼马差。只需将您的样式粘贴到类或ID或HTML标签即可覆盖默认模板样式礼马差。这是少量CSS代码的好解决方案礼马差。

 自定义的CSS和标题代码(Helix3教程)

我们总是建议使用内置于Chrome / IE / Firefox浏览器中的代码检查器来查看网页兼泉铁,以便自定义CSS礼马差。当您使用这些工具之一直接检查代码输出时兼泉铁,它会向您显示CSS正在影响您要更改的HTML元素礼马差。你也可以测试一下CSS的变化会不会影响到浏览器中的元素礼马差。

正如你可以看到CSS代码被添加到前端代码的头部分兼泉铁,更重要的是工作顺利礼马差。

颜色菜单改变 

使用自定义CSS让您可以创建独特的设计兼泉铁,并允许您自定义选定元素(颜色兼泉铁,大小等)的外观礼马差。如果此字段对于高级更改太小兼泉铁,则可以使用“隐藏”功能礼马差。 

注意!请不要编辑helix3模板框架中的template.css兼泉铁,legacy.css任何其他css文件礼马差。原因是所有的更改都将被模板引擎覆盖礼马差。相反兼泉铁,我们建议使用custom.css文件兼泉铁,以覆盖我们团队创建的默认CSS代码礼马差。

方法2:

因此兼泉铁,如果您需要更多的自定义CSS代码兼泉铁,请在当前活动的Helix3模板的css文件夹中插入一个新的custom.css文件礼马差。

 螺旋 - 新文件

定制CSS2

定制CSS3

另一种解决方案是把custom.css放到helix3目录中:templates / shaper_TemplateName / css /

如果自定义文件将在上面的目录中找到兼泉铁,那么它将被加载和应用礼马差。

注意!custom.css文件加载之前自定义的CSS代码从模板设置兼泉铁,这意味着第二个可能会覆盖所有的一切兼泉铁,也与该样式的文件礼马差。

!CSS代码中的重要规则

通常在CSS中兼泉铁,规则是从上到下工作的兼泉铁,所以如果你给样式表或者次要样式表中的元素指定了新的样式兼泉铁,那么后面的规则将优先礼马差。重要的是确保这个规则优先礼马差。!重要的规则将覆盖特定属性礼马差。除非在所有其他途径用尽之后绝对必要兼泉铁,否则不应使用此声明礼马差。!重要的关键字必须放在行尾兼泉铁,分号前面兼泉铁,否则不起作用礼马差。

使用示例:

.button {
   background: red !important;
   color: white !important; }
说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search