定制T3框架(四)自定义CSS和自定义ThemeMagic

四、自定义CSS

自定义模板使用CSS,无需LESS

Joomla T3框架使用 LESS 开发,LESS文件被编译为CSS文件。每次编译后、CSS文件将被覆盖,所以我们建议您不要使用定制CSS来开发你的网站,因为当您编译,您的工作可能会丢失。

自定义CSS无需LESS,您的工作将不会丢失,您必须使用位于 templates/t3_blank/css 的文件 custom.css 。

Custom.css 文件的一些特点

  • 该文件包含在默认主题下,您不需要创建新的。
  • 这个文件被称为您模板的最后一个文件,它不会被覆盖。
  • 该文件不是一个来自LESS的编译文件,所以它当您编译时,它不会被覆盖或丢失。

处理文件

Custom.css文件和其他任何CSS文件都是相同的,当您处理template.css或其他CSS文件,为您的模板平常使用的CSS风格

让我们检查前端

 

五、自定义ThemeMagic

T3框架拥有容易定制的、强大的ThemeMagic。可以在ThemeMagic 配置无限的参数。左边菜单配置面板,右边的面板是您的主页,所以当您改变参数设置,点击“预览”按钮,可以在右边面板查看您网站前端的变化。

让我们看看Thememagic的参数。

 

为ThemeMagic添加新的参数

你可以设置无限数量的参数。您可以定义一组新的参数,然后添加为新的参数组。自定义参数设置在文件夹templates/t3_blank的templateDetail. xml文件

步骤一:定义一个新的组

<fieldset name=”custom1_params” label=”CUSTOM1_LABEL”>

</fieldset>

步骤二:为新的组定义参数

<field name=”inputBorderRadius”

type=”text”

default=”3px”

class=”input-tiny”

label=”CUSTOM1_ELEMENT_RADIUS_LABEL”

description=”CUSTOM1_ELEMENT_RADIUS_DESC” />

</field>

步骤三:定义一个LESS参数

定义一个新的LESS参数,具有相同的内容,例如:@input BorderRadius: 3px;

步骤四:在LESS文件的某些地方使用 “@input BorderRadius”

它取决于你,只是觉得你如何想要使用这个参数,以及它如何影响到模板。它需要你有一定的LESS和CSS基础知识。我们建议您添加到文件style.less:

modal-t3-signup {
.border-radius @input BorderRadius);

步骤五:定义语言连接

打开模板语言文件 language\en-GB\en-GB.tpl_t3_blank.ini 然后定义您上面使用的参数。

《定制T3框架(四)自定义CSS和自定义ThemeMagic》有2个想法

发表评论