登录 注册

登录

问题 请问 模块css后缀 是什么意思?

  • 话题作者
  • 访客
  • 访客
2008年07月28日 11:25 - 2008年07月28日 15:21 #1 作者:
1.5.3,在left中的,如何为2个mod_mainmenu设置不同的风格?
我的意思是:2个菜单模块,都是在left中,都是<DIV class=module_menu><DIV>这样的两个模块,
在css中不容易标识出来,如何设置成不同的风格呢,比如H3不同,背景不同...?
waitting......
最后修改: 2008年07月28日 15:21 由 p4design.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年07月28日 15:25 #2 作者: 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 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=*****?
最后修改: 2008年07月28日 16:13 由 j24998076.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年07月28日 16:16 #4 作者: Joomla之门
多谢你的补充!

那么,我们的对策也相应补充一下:对于 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]

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年07月28日 22:17 #6 作者: Joomla之门
感谢反馈!这样一来,我们对于 “模块CSS类后缀”这个参数的理解就全面了。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年07月30日 15:37 #7 作者: Waikwok

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年10月09日 10:16 #8 作者: littlesky
软件注释告诉我说:

这是模块显示风格所对应CSS样式类的后缀,利用它可以个性化模块的显示风格


但是我试一阵,发现唯一可以个性化的就是后缀的命名,在模板的CSS样式表里也找不到这样的后缀。


请问这个东西怎么才能个性化点别的东西!

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年10月13日 15:42 #9 作者: yooyooh
joomla越看越觉得强大,无论扩充性、自由度还是安全性,都没的说。能发挥多大效用的问题就在于你理解了多少。

Every man dies, Not every man really lives.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年10月17日 11:19 #10 作者: kikor
joomla的模板自定义,特别是module的自定义功能确实很灵活,有多个层面可以进行OVERRIDE。

不过对于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
使用 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后缀有什么联系吗?是不是起到定义的作用?
最后修改: 2008年10月29日 17:21 由 .

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年12月12日 01:42 #12 作者: lin4007
lin4007 回复了话题: 模块编辑中的CSS
在“模块”----“编辑”

    里面  有个“参数设置” 下  有个“CSS后缀”的选项


      请问  这个“CSS后缀”选项 是什么功能


                  是能够选择改变整个版面排版样式的吗。

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年12月22日 22:30 #13 作者: jade
Latest News plus date module for J 1.5 ,这个是我看到近期最好的一个模块,推荐大家使用。
http://www.templateplazza.com/component/option,com_remository/Itemid,7/func,fileinfo/id,159/


另外想问的就是,有没有办法把自己设计的CSS样式,套入到这些模块里面,如果可以的话,我们就可以有很多好看的CSS样式用在模块上面了,大家看看能不能把这些形式放到Latest News plus date module里面了,预览+下载!:laugh:
http://www.joomla1st.com/css/
http://www.joomla1st.com/css/index.zip

不贪加官再封爵位 并未见有所作为 闲人或许总给看低 没与你争辉 处事深不见底
下列用户已致谢:: sameneybio, eleven59

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年12月23日 09:09 #14 作者: 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后缀,改怎么做啊?

登录 或者   注册一个会员帐号 来参与讨论

更多
2009年02月03日 15:41 #16 作者: CainLai
我现在的改法感觉好像不是很正统,根本没有用到CSS后缀,我的方法是:
比如改LOGIN模块,我在Joomla\modules\mod_login\tmpl下面找到了一个default页,在里面找到了各种属性和css中的名称定义,然后再到template.css中找到相应的,然后来改。。。。。
我想知道怎么通过后缀来实现改的目的。。。。

登录 或者   注册一个会员帐号 来参与讨论

更多
2009年02月05日 18:09 #17 作者: 山人
这个css后缀的说法
似乎让很多人头疼
山人把它说得简单点吧

其实这个加了“后缀”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:03 #18 作者: CainLai
来晚了,山人兄回答的仔细!我必须要顶一个 谢谢!

登录 或者   注册一个会员帐号 来参与讨论

更多
2009年02月10日 15:52 #19 作者: 山人
今天修改模板时打开CSS才看到
原来那天山人说错了一点
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”的样式

登录 或者   注册一个会员帐号 来参与讨论

更多
2009年03月13日 00:00 #20 作者: 97g404
新建模块后怎么才知道所用的模板有哪些模块样式可以用?使用哪个后缀呢?
??? ???

登录 或者   注册一个会员帐号 来参与讨论