- 你目前位置:
-
Joomla之门
-
论坛
-
存档版块
-
Joomla 1.5.x
-
Joomla! 1.5.x 第三方扩展
- 请问 模块css后缀 是什么意思？
问题 请问 模块css后缀 是什么意思？
- 话题作者
- 访客
-
2008年07月28日 11:25 - 2008年07月28日 15:21 #1
作者：
创建了话题： 请问 模块css后缀 是什么意思？
1.5.3，在left中的，如何为2个mod_mainmenu设置不同的风格？
我的意思是：2个菜单模块，都是在left中，都是<DIV class=module_menu><DIV>这样的两个模块，
在css中不容易标识出来，如何设置成不同的风格呢，比如H3不同，背景不同...?
waitting......
我的意思是：2个菜单模块，都是在left中，都是<DIV class=module_menu><DIV>这样的两个模块，
在css中不容易标识出来，如何设置成不同的风格呢，比如H3不同，背景不同...?
waitting......
最后修改： 2008年07月28日 15:21 由 p4design.
2008年07月28日 15:25 #2
作者： Joomla之门
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
我想有必要介绍一下 Joomla! 在模块参数中的“模块 CSS 类后缀”这个参数。
例如，在 Joomla! 1.5 后台的“扩展 -> 模块管理 -> 主菜单”设置页面，右边的“高级参数设置”中，有一项“模块CSS后缀”，指的就是[red]这个模块的CSS类后缀[/red]。
这个参数有什么用？怎么用？
这个参数就是用来方便用户针对某个特定模块修改其 CSS 外观的。也就是说，你可以单独对[red]一个[/red]模块指定不同的CSS。
用法举例：
还以上面的“主菜单”模块为例。这里的“模块CSS后缀”默认是 _menu，对应的 CSS 语句（在 /templates/当前模板/css/template.css 文件中）是：div.module_menu **** 。
星号表示其它的附加标记，如 ul 或者 li 或者 h3 等等，但是其对应的模块定义就是 div.module_menu 。
现在你的问题是：如何对第二个菜单模块指定不同的 CSS ？
解决办法：对第二个菜单模块，将其“模块CSS后缀”修改为 _mymenu2 ，然后在上面的 CSS 文件中复制所有 div.module_menu 开头的代码，并修改其开头为 div.module_mymenu2 ，然后再修改其CSS定义即可。
同理，你可以单独指定 menu3 、menu4 甚至 module-2 、module-3 等等任何一个模块的 CSS。
使用 Joomla! 1.0 的用户请注意：J1.0 的模块也可以按照上述方法修改单个模块的 CSS ，不过，“后缀”参数那里不需要填写 _ 下划线符号，只能直接填写后缀如 customName，然后在 CSS 文件（/templates/当前模板/css/template.css）中找到 moduletable （这是默认的模块定义语句），复制一份，修改名称为 moduletable-customName，然后修改 CSS 代码即可。
看清楚了吗？也就是说，在 J1.0 中，用户只需要填写后缀名称，系统会自动寻找 “div.moduletable-自定义名称”这个CSS片段。这里是短划线（-），不是下划线（_）。
例如，在 Joomla! 1.5 后台的“扩展 -> 模块管理 -> 主菜单”设置页面，右边的“高级参数设置”中，有一项“模块CSS后缀”，指的就是[red]这个模块的CSS类后缀[/red]。
这个参数有什么用？怎么用？
这个参数就是用来方便用户针对某个特定模块修改其 CSS 外观的。也就是说，你可以单独对[red]一个[/red]模块指定不同的CSS。
用法举例：
还以上面的“主菜单”模块为例。这里的“模块CSS后缀”默认是 _menu，对应的 CSS 语句（在 /templates/当前模板/css/template.css 文件中）是：div.module_menu **** 。
星号表示其它的附加标记，如 ul 或者 li 或者 h3 等等，但是其对应的模块定义就是 div.module_menu 。
现在你的问题是：如何对第二个菜单模块指定不同的 CSS ？
解决办法：对第二个菜单模块，将其“模块CSS后缀”修改为 _mymenu2 ，然后在上面的 CSS 文件中复制所有 div.module_menu 开头的代码，并修改其开头为 div.module_mymenu2 ，然后再修改其CSS定义即可。
同理，你可以单独指定 menu3 、menu4 甚至 module-2 、module-3 等等任何一个模块的 CSS。
使用 Joomla! 1.0 的用户请注意：J1.0 的模块也可以按照上述方法修改单个模块的 CSS ，不过，“后缀”参数那里不需要填写 _ 下划线符号，只能直接填写后缀如 customName，然后在 CSS 文件（/templates/当前模板/css/template.css）中找到 moduletable （这是默认的模块定义语句），复制一份，修改名称为 moduletable-customName，然后修改 CSS 代码即可。
看清楚了吗？也就是说，在 J1.0 中，用户只需要填写后缀名称，系统会自动寻找 “div.moduletable-自定义名称”这个CSS片段。这里是短划线（-），不是下划线（_）。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
下列用户已致谢：: Pooh, 梅花老K, sameneybio, xiaozhu1211, lpc, phifital, 石嘉庆, Vinson Chen, samlin2000, haoxingkong ，此用户还有 3 个其他人的致谢
- 话题作者
- 访客
-
2008年07月28日 16:03 - 2008年07月28日 16:13 #3
作者：
老大，你要我说什么好呢，我想了几天的问题，你几分钟就解决了。谢谢！
通过你的讲解，明白了其实通过对模块的CSS类后缀的设置，前台的模块的风格可以随心所欲的定制。
再次感谢！感谢joomla之门！
另：在joomla中，1.5.3，默认情况：所有的mod_mainmenu，都是<DIV class=module_menu></DIV>
但是热点新闻、最新新闻，是<DIV class=moduletable></DIV>。（这个模块Advertisement，<DIV class=moduletable_text></DIV>，按上面所述，也应该属于<DIV class=moduletable></DIV>）
有的是<DIV class=module></DIV>，
不知有什么不同？如何理解？常用的哪些模块分属哪些不同的div class=*****？
通过你的讲解，明白了其实通过对模块的CSS类后缀的设置，前台的模块的风格可以随心所欲的定制。
再次感谢！感谢joomla之门！
另：在joomla中，1.5.3，默认情况：所有的mod_mainmenu，都是<DIV class=module_menu></DIV>
但是热点新闻、最新新闻，是<DIV class=moduletable></DIV>。（这个模块Advertisement，<DIV class=moduletable_text></DIV>，按上面所述，也应该属于<DIV class=moduletable></DIV>）
有的是<DIV class=module></DIV>，
不知有什么不同？如何理解？常用的哪些模块分属哪些不同的div class=*****？
最后修改： 2008年07月28日 16:13 由 j24998076.
2008年07月28日 16:16 #4
作者： Joomla之门
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
多谢你的补充！
那么，我们的对策也相应补充一下：对于 class=moduletable 的模块，就在 CSS 中新增 moduletable_customName {} 来定义，对于 class=module 的模块，可以使用 module_customName {} 来定义。
我没有测试过，只是推理一下。你可以实际测试一下看看。欢迎测试后在这里继续反馈结果。
那么，我们的对策也相应补充一下：对于 class=moduletable 的模块，就在 CSS 中新增 moduletable_customName {} 来定义，对于 class=module 的模块，可以使用 module_customName {} 来定义。
我没有测试过，只是推理一下。你可以实际测试一下看看。欢迎测试后在这里继续反馈结果。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
- 话题作者
- 访客
-
2008年07月28日 21:29 #5
作者：
看来白老大分析正确，我的测试：
热点新闻、最新新闻，都是<DIV class=moduletable></DIV>
在后台对最新新闻 模块css后缀 参数设置为 “_test”
并在css中设置了不同的风格，实际效果达到了预期。实现了2个moduletable的不同的风格；
由此看来，看来对于module也是一样。
效果如下：
[img][/img]
热点新闻、最新新闻，都是<DIV class=moduletable></DIV>
在后台对最新新闻 模块css后缀 参数设置为 “_test”
并在css中设置了不同的风格，实际效果达到了预期。实现了2个moduletable的不同的风格；
由此看来，看来对于module也是一样。
效果如下：
[img][/img]
2008年07月28日 22:17 #6
作者： Joomla之门
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
感谢反馈！这样一来，我们对于 “模块CSS类后缀”这个参数的理解就全面了。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
2008年10月17日 11:19 #10
作者： kikor
kikor 回复了话题： Re: 请问 模块css后缀 是什么意思？
joomla的模板自定义，特别是module的自定义功能确实很灵活，有多个层面可以进行OVERRIDE。
不过对于message，component，head这3个类型，特别是head和message除了直接修改LIBRARIES我还没有找到类似MODULE那样灵活的风格，而COMPONENT似乎也只有自定义输出方式，而没有渲染风格的修改。难道必需在模板的INDEX.PHP里面控制了？或者自己写module而不要这2个类型。
不过对于message，component，head这3个类型，特别是head和message除了直接修改LIBRARIES我还没有找到类似MODULE那样灵活的风格，而COMPONENT似乎也只有自定义输出方式，而没有渲染风格的修改。难道必需在模板的INDEX.PHP里面控制了？或者自己写module而不要这2个类型。
2008年10月29日 17:10 - 2008年10月29日 17:21 #11
作者： star
star 回复了话题： Re: 请问 模块css后缀 是什么意思？
使用 Joomla! 1.0 的用户请注意：J1.0 的模块也可以按照上述方法修改单个模块的 CSS ，不过，“后缀”参数那里不需要填写 _ 下划线符号，只能直接填写后缀如 customName，然后在 CSS 文件（/templates/当前模板/css/template.css）中找到 moduletable （这是默认的模块定义语句），复制一份，修改名称为 moduletable-customName，然后修改 CSS 代码即可。(老大能不能详细地再介绍一次)
可是在J1.0里,引用模块直接通过以下代码来引用的,那要如何对其进行自定义模块CSS后缀?
<div id="leftcolumn">
<?php mosLoadModules('left' , '2'); ?>
<?php /* <? $sg = 'banner'; include "templates.php"; ?> */ ?>
</div>
还有一个问题就是,mosLoadModules( $position_name [, $style] ),后面的$style与CSS后缀有什么联系吗?是不是起到定义的作用?
可是在J1.0里,引用模块直接通过以下代码来引用的,那要如何对其进行自定义模块CSS后缀?
<div id="leftcolumn">
<?php mosLoadModules('left' , '2'); ?>
<?php /* <? $sg = 'banner'; include "templates.php"; ?> */ ?>
</div>
还有一个问题就是,mosLoadModules( $position_name [, $style] ),后面的$style与CSS后缀有什么联系吗?是不是起到定义的作用?
最后修改： 2008年10月29日 17:21 由 .
2008年12月22日 22:30 #13
作者： jade
不贪加官再封爵位 并未见有所作为 闲人或许总给看低 没与你争辉 处事深不见底
jade 回复了话题： 请问有没有办法在模块里面套入自己设计的CSS样式？
Latest News plus date module for J 1.5 ，这个是我看到近期最好的一个模块，推荐大家使用。
www.templateplazza.com/component/option,com_remository/Itemid,7/func,fileinfo/id,159/
另外想问的就是，有没有办法把自己设计的CSS样式，套入到这些模块里面，如果可以的话，我们就可以有很多好看的CSS样式用在模块上面了，大家看看能不能把这些形式放到Latest News plus date module里面了，预览+下载！
www.joomla1st.com/css/
www.joomla1st.com/css/index.zip
www.templateplazza.com/component/option,com_remository/Itemid,7/func,fileinfo/id,159/
另外想问的就是，有没有办法把自己设计的CSS样式，套入到这些模块里面，如果可以的话，我们就可以有很多好看的CSS样式用在模块上面了，大家看看能不能把这些形式放到Latest News plus date module里面了，预览+下载！
www.joomla1st.com/css/
www.joomla1st.com/css/index.zip
不贪加官再封爵位 并未见有所作为 闲人或许总给看低 没与你争辉 处事深不见底
下列用户已致谢：: sameneybio, eleven59
2008年12月23日 09:09 #14
作者： Joomla之门
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
我刚才看了一下，Latest News plus date 这个模块有一个参数“模块 CSS 类后缀”，那么通过设定这个后缀就能实现针对单个模块的个性化样式。参看本话题前面讨论。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！
2009年02月03日 14:06 #15
作者： CainLai
我看了置顶的那个帖子，没有完全看懂，帖子里面mainmenu的例子后缀_menu 白老大说在template.css中找到div.module_menu开头的，但是我没有找到，只找到了类似这样的：
#leftcolumn div.module_menu, #rightcolumn div.module_menu, #leftcolumn div.module, #rightcolumn div.module {
margin:0px;
padding:0 0 10px 0;
text-align:center;
width:201px;
}
我也试过按帖子里面的说法把这些粘贴出来然后改成自己的后缀，但是没有成功，我想要改默认自带的login模块的CSS后缀，改怎么做啊？
#leftcolumn div.module_menu, #rightcolumn div.module_menu, #leftcolumn div.module, #rightcolumn div.module {
margin:0px;
padding:0 0 10px 0;
text-align:center;
width:201px;
}
我也试过按帖子里面的说法把这些粘贴出来然后改成自己的后缀，但是没有成功，我想要改默认自带的login模块的CSS后缀，改怎么做啊？
2009年02月05日 18:09 #17
作者： 山人
山人 回复了话题： Re: 请问 模块css后缀 是什么意思？
这个css后缀的说法
似乎让很多人头疼
山人把它说得简单点吧
其实这个加了“后缀”css样式
就等于是新建的一个css样式
而这个“后缀”就是新样式与老样式“名称的区别所在”
css规则中
如果两个样式名称完全一样
那么后一个的样式将覆盖前一个样式
所以加一个“后缀”
和原来的css样式稍微区别一下
CainLai 兄提到的“#leftcolumn div.module_menu”形式的css
是css的一种语法
它指的是：
Id为“leftcolumn”的标签内的div标签内class为“module_menu”的标签的样式
格式如下：［祖父］空格［父亲］空格［儿子］空格［孙子］空格［……］
与白兄所言并不矛盾
只是在兄台看的css里指定了特殊的标签内的“div.module_menu”
想对这个“后缀”相关问题了解更多的兄台
可以到百度找一下关于css的文章
应该会有不少收获
这不是Joomla!独有的技术
似乎让很多人头疼
山人把它说得简单点吧
其实这个加了“后缀”css样式
就等于是新建的一个css样式
而这个“后缀”就是新样式与老样式“名称的区别所在”
css规则中
如果两个样式名称完全一样
那么后一个的样式将覆盖前一个样式
所以加一个“后缀”
和原来的css样式稍微区别一下
CainLai 兄提到的“#leftcolumn div.module_menu”形式的css
是css的一种语法
它指的是：
Id为“leftcolumn”的标签内的div标签内class为“module_menu”的标签的样式
格式如下：［祖父］空格［父亲］空格［儿子］空格［孙子］空格［……］
与白兄所言并不矛盾
只是在兄台看的css里指定了特殊的标签内的“div.module_menu”
想对这个“后缀”相关问题了解更多的兄台
可以到百度找一下关于css的文章
应该会有不少收获
这不是Joomla!独有的技术
2009年02月10日 15:52 #19
作者： 山人
山人 回复了话题： Re: 请问 模块css后缀 是什么意思？
今天修改模板时打开CSS才看到
原来那天山人说错了一点
CainLai 兄提到的“#leftcolumn div.module_menu”
“div”与“.module_menu”中间没有空格
这表示的是“class为.module_menu的div标签”的样式
两中写法的异同在于：
1、“标签名”+“空格”+“样式名”
这表示为“标签”内“样式为……的标签”
2、“标签名”+“样式名”
表示为class为指定“样式名”的指定“标签名”
第一个在前一篇回复里已经说过了
这里话不重叙
我们主要说下第二个写法
它强调的是：
同一个“样式名称”的不同标签可以展示出不同的样式
请看一下下面的例子写到网页中预览时
我们会看到class相同的两个不同标签的中
文字颜色是不同的
<style>与</style>之间的是css
而<body>与</body>中为页面将显示的内容
我们设置了“div”和“span”两个中“test”这个样式的不同颜色
我们也可以用同样的办法再设置表格或链接中“test”的样式
原来那天山人说错了一点
CainLai 兄提到的“#leftcolumn div.module_menu”
“div”与“.module_menu”中间没有空格
这表示的是“class为.module_menu的div标签”的样式
两中写法的异同在于：
1、“标签名”+“空格”+“样式名”
这表示为“标签”内“样式为……的标签”
2、“标签名”+“样式名”
表示为class为指定“样式名”的指定“标签名”
第一个在前一篇回复里已经说过了
这里话不重叙
我们主要说下第二个写法
它强调的是：
同一个“样式名称”的不同标签可以展示出不同的样式
请看一下下面的例子
<html>
<head>
<style>
div.test { color:#F00}
span.test {color:#0F0}
</style>
</head>
<body>
<div class="test">这是样式为“test”的div标签</div>
<span class="test">这是样式为“test”的span标签</span>
</body>
</html>我们会看到class相同的两个不同标签的中
文字颜色是不同的
<style>与</style>之间的是css
而<body>与</body>中为页面将显示的内容
我们设置了“div”和“span”两个中“test”这个样式的不同颜色
我们也可以用同样的办法再设置表格或链接中“test”的样式
