模块样式

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

模块的样式或者叫模块的变化,就是模板专门针对模块提前为我们设计好的一些样式,Gantry 默认的模板也提供了几个样式,在使用基于 Gantry 的模板的时候,可以注意一下模块的样式。另外,其它类型的模板也可能会提供这些样式。

模块的样式都会写在 CSS 样式表里,并且都会定义成一些 CSS 类,想在 Joomla 的模块上应用这些样式,我们只需要知道这些 CSS 类的名称,然后把它添加到模块的选项里就行了。

现在这个页面上显示的几个模块都是 Gantry 默认模板里定义的默认的模块样式,下面我们去看一下 Gantry 默认模板里定义的其它几个模块样式。

打开 Joomla 的管理后台,扩展 ,模块管理 .. 找到前台页面的几个模块 ... 打开其中的一个 ..

然后打开模块的 选项 这个选项卡 ... 找到 高级选项 .. 在 模块CSS类后缀 这里,我们可以把模板为模块设计好的 CSS 类的名称放在这里 ..

一般在模板的演示或者使用说明里你可以找到这些类名,Gantry 默认模板的模块样式类名是 box1 到 box3 ,这些类可以改变模块的整体样式,另外还有 title1 到 title4 ... 这些类只会改变模块标题的样式 ...

我们可以先试一下 title3 这个类 ... 保存 .. 回到前台 ... 刷新 .. 你会看现使用了 title3 这个类的模块的标题,会跟其它的模块有一些区别 ..

因为模块的标题应用了在 title3 这个类里定义的样式..

回到后台 .. 选项 .. 高级 .. 在这个模块CSS类后缀里,可以添加多个类名 .. 每一个 css 类可以使用空格分隔开 ...

我们先去掉这个 title3 ... 换上一个 box1 .. 然后保存 ... 回到前台 .. 刷新 ...

box1 这个类会在模块上添加一个白色的背景,还有灰色的边框 ... 回到后台我们再试一下 box2 和 box3 ..

打开另外两个模块 .. 选项 ... 高级选项 .. 模块CSS类后缀 .. 输入 box2 .. 保存并关闭 ... 同样再处理一下另外一个模块 ...

输入 box3 .. 保存并关闭 ... 回到前台 ... 刷新 ... 你会看到这三个模块的样式都会不一样了 ...

很简单,就是把模板里设计好的 css 类添加到模块上,模块就会应用这些设计好的样式了,要注意的是,并不是所有的模块样式都会使用 box1 或者 title1 这样的 css 类名 ...

这些完全取决于模板的设计者 .. 具体要使用哪些 css 类,要去看模板的使用说明或者演示。

模块样式《 Joomla 模板架构:Gantry 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点