Gantry 架构支持我们添加自己的 CSS 样式表，而且可以判断浏览器，为不同的浏览器加载使用不同的样式表，比如你可能想单独为 IE6 准备一个 CSS 样式表。

下面我们来演示一下在 Gantry 架构的模板里添加自定义的 CSS 样式表 ...

打开 Joomla 所在的目录 ... templates ... 找到你想添加自定义样式表的 Gantry 模板 ... 注意并不是所有的 Gantry 模板所在的目录都叫 gantry ... 这个 gantry 只是一个基于 Gantry 架构的默认的一个基本的模板 ...

再打开 css 这个文件夹 ...

在这里，有两个样式表 master-ie8.css 这个样式表只会在 ie8 浏览器上使用。还有一个 master-ie9.css ... 它只会用在 ie9 浏览器上 ...

添加自己定义的样式表，可以使用特定的形式去命名 ... 这样 gantry 架构会自动加载在这个目录里的样式表 ...

我们先复制其中的一个样式表 ... 打开 .... 清空里面的东西 .. . 保存一下 ...

然后再重命名一下这个样式表 ... 最开始的部分是模板的名称 ... 目前这个模板的名称是 gantry ... 所以先输入一个 gantry ... 后面是一个横线 ... 再加上一个 custom ... custom 就是自定义的样式 ...

回到网站的前台 ... 查看一下页面的源代码 ...

搜索一下 gantry-custom.css ... 你会看到 . 当前这个页面已经加载使用了我们刚才创建的这个 gantry-custom.css 样式表。

在这个样式表里，你可以添加自己定义的 CSS 样式 ...

演示

下面我们可以试一下 .. 回到管理后台 ... 打开 菜单 ... Main Menu ... 找到 首页 ... 高级选项 ... 下拉菜单 ... 我们给首页添加一个小图标 ...

可以搜索一下 .. icon-home ... 保存 ...

回到前台 .. 刷新 ... 你会看到 首页 这个菜单项上会显示一个小图标 .. 不过应用了小图标的菜单项的文字会变成斜体 ... 点击 右键 ... 审查元素 ..

原因是菜单项上的文字会被 <i> 标签包围 ... 默认这个元素里的文字会是斜体 ...

下面我们在自定义的样式表里添加一条样式 ... 把 <i> 标签的斜体样式去掉 ...

打开 gantry-custom.css ... 输入 i{ font-style: normal;} ... 保存 ..

再回到前台 ... 刷新 .. 有小图标的菜单项文字的斜体样式就没有了 ... 右键 .. 审查元素 ... 因为这个元素上应用了自定义样式表里定义的样式 ...