II.主题定制

主题列表

所有的主题目录在文件夹: templates/t3_blank/less/themes/dark

在每个主题目录中,他包含3个文件:

  • template.less
  • variables.less: 此文件包含所有默认变量
  • variables-custom.less: 此文件包含你自定义变量,当你在定制主题时

创建新主题

创建新主题的最佳方式就是从已经存在的主题中复制,你也可以手动添加,如果你要手动添加,请按以下2个步骤:

1: 创建主题目录

在此目录中: templates/t3_blank/less/themes, 创建一个新的目录。在此例中,我们命名为: custom-theme

2: 添加文件

每个主题拥有3个LESS文件: template.less, variables.less, variables-custom.less. 我们可以在该目录下添加文件: templates/t3_blank/less/themes/custom-theme

注意: 2个文件 : template.less, variables.less 应该从其他主题中复制过来,文件: variables-custom.less 在主题中包含自定义变量

定制主题

要定制主题,你可以使用模板的设置项 (主题设置选项或ThemeMagic) 或定制主题LESS文件,该文件位于:

templates/t3_blank/less/themes/Theme_Name

编译LESS成CSS

现在,你需要编译less成css,这样新创建的主题文件夹将会编译成css主题文件夹。现在,你将需要一个主题文件夹编译到该目录: templates/t3_blank/css/themes/custom-theme

当编译LESS成CSS,每个主题拥有一个独立的文件夹,这个文件夹包含所有必要的CSS文件,他不会覆盖默认的主题文件,  --> 当你运行一个指定的主题,他将仅加载一个文件夹里的css文件 --> 这样他将加快你网站的速度

一些添加的CSS文件是:

  • home.css
  • bootstrap.css
  • bootstrap-responsive.css
  • template.css
  • template-responsive.css
  • megamenu.css
  • responsive-home.css
  • home-responsive-home.css
  • component.css
注意:  .min.css 文件是经过压缩的文件。 当你在

“常规设置”

中启用

“优化CSS”

选项,你的网站将使用.min.css文件

  • home.min.css
  • bootstrap.min.css
  • template.min.css
  • template-responsive.min.css
  • megamenu.min.css
  • home-responsive.css

在后台,你可以选择你新建的样式了

添加新评论