打开 t3 模板根目录下的 css ... 这里面是一些样式表 ... t3 会把使用 less 编译好的样式表放在这个目录的下面 ...

打开 themes ... 这里是编译好的主题里面的样式表 ....

想要修改页面的样式 ... 一般我们不会直接修改在 css 目录下面的样式表 ... 因为当模板再次编译 LESS 以后，会覆盖我们所做的修改 ...

正确的做法是去修改 less 目录里的东西 ... 不过如果你不想使用 less .. 只想添加一点自己定制的 css 样式 ...

你可以在 css 目录下面，创建一个叫 custom.css 的样式表 ... 这个样式表会自动被调用 ... 并且在重新编译 LESS 的时候，不会覆盖这个样式表里的东西 ....

下面我们演示一下通过修改 less 来改变页面样式的方法和流程 ...

先打开 t3 模板的管理界面 .. 打开 通用 选项卡 ..

启用开发模式 ，选择 是 ... 然后 保存 ... 打开前台页面 ...

找到你想修改的样式的地方 ... 点击 右键 ... 审查元素 ... 比如我们想在模块内部添加一个内边距 .... 找到合适的元素 ...

这个带有 .module-inner 类的 <div> 标签是最合适的应用内边距的地方 ... 在这上面添加内边距不会影响到模块的布局 ....

点击选中这个元素 ... 在右边会出现应用在这个元素上的样式 ... 你会看到样式来自一个很长的样式表 ...

根据这个样式表，我们可以判断需要修改的样式来自哪一个 less 文件 ... 应该是 templates 下面的 t3_blank 里面的 less 目录下面的 modules.less 这个文件 ...

下面我们可以找到这个 less 文件 ....

打开以后，你可以看到 .module-inner 的样式 ...

这个 padding 属性的值使用了一个变量 ... 是 @T3modulePadding ...

回到 less 目录 ... 打开变量所在的 less 文件 ... variables.less ... 找到这个 @T3modulePadding ...

你会看到这个变量的值现在是 0 ... 我们可以修改一下 ... 改成 15px ... 这样所有在样式里使用这个变量的值都会是 15px ... 保存 ..

回到前台 ...

刷新 ... 你会发现 ... 现在这个.module-inner 类上应用了一个 15px 的内边距 ...

完成了修改以后，我们需要重新编译 less ，然后关掉开发模式 ...

回到管理后台 ... 点击工具栏上的 编译 less 为 css ... 这样会把编译好的样式表放在模板的 css 目录下面 ...

编译需要一点时间 ...

完成以后 ... 打开 通用 选项卡 ... 关掉开发模式 .... 点击 保存 ...

回到前台 ... 刷新 ...

再查看一下模块元素 ... 同样你会看到这个 .module-inner 类上应用了一个 15px 的内边距 ... 注意，这次这个样式是来自 templates.css 样式表 ... 也就是编译之后生成的 css 样式表 ...