Joomla/利用CSS给文章标题添加图片

来自站长百科
跳转至: 导航、​ 搜索

Joomla | Joomla使用手册

我们在利用Joomla程序建设网站时,经常会有在一个文章标题前上一个个性化图片的想法,本条目就来简单介绍下实现方法:

具体方法[ ]

1。查看文章显示页面,找到

文章标题

我们只要在模板调用的css文件template_css.css文件中定义.contentheading就可以了

2、打开template_css.css文件,找到类.contentheading,如果没有这个类的定义,就自己加上

3、修改好的.contentheading类如下

.contentheading {

 font-family: "宋体";

 font-size:9pt;

 width:250;

 height:20px;

 vertical-align:bottom;

 color:#FF0000;

 text-indent:12px; /*(标题文字缩进12个象素,调多大看你的图片大小)*/

 background-image:url(../images/arrow.gif);

 background-repeat:no-repeat; /*(背景不重复)*/

 background-position:left center; /*(背景位置)*/
}

总结[ ]

这个功能很简单,用CSS实现也方便,主要就是利用CSS来做背景及文字的缩进。同样也可以调整标题的水平方向上的位置等。

这样调的好处就是和joomla无关,模板不用改,只要改CSS文件。

同理,要改其它的页面,也用这个方法。如果在joomla生成的页面中,没有类似.contentheading类,可以自己在相应的joomla文件中加上自己的类(如mydotter),然后在CSS文件中定义好相应的类就行了,如果没有定义好,也不会对joomla有影响

定义了标题,可能有就有需要定义在分类中的文章标题列表的显示样式,打开文件components/com_content/content.html.php,找到相应的内容,在对应的内容上加入class=”你的类”.修改前记得做这个文件的备份。

参考来源[ ]

http://www.joomlagate.com/article/joomla10-tutorial/add-picture-to-joomla-article-title-by-css/

Joomla 1.0使用手册导航

Joomla安装

Joomla!的安装

Joomla 1.0教程

让网站自动适应掌上电脑阅读版面 | MosIf的使用 | Joomla登录模块的DIY改造| 用下拉式页面跳转替换Joomla跳转列表 | configuration.php文件操作 | 用blog形式做简单的产品展示 | 将DreamHost的mysql数据导入及导出的问题 | 给页面顶端添加ActiveX Infobar | 用JA Transmenu模块做多级弹出菜单 | 用桥接器整合开源Gallery2图库到Joomla | 用CB Profile Gallery搭建交友网站的会员相册 | 在网页中插入Google Map地图 | VM中产品详情只显示大图的实现 | Joomla!扩展(组件、模块、触发器)的汉化 | Joomla! Pack的使用 | 应用JSMF桥接器在Joomla!上安装SMF论坛 | Advanced Flash Mp3 Player播放器模块用法 | Joomla/Allvideos Plugin 引用视频、音频的方法|geshibot使用详解 | 表格式模板列宽度自动扩展的实现 | Joomla! Tkit使用详解 | Community Builder 1.0.2 的安装方法 | 利用CSS给文章标题添加图片 | 如何选择合适的下载组件 | 让Joomla支持flash格式的banner

其他Joomla教程

用XAMPP快速搭建Joomla本地测试服务器 | 用Gmail的SMTP发送Joomla激活及通知邮件 | 深入认识Joomla CMS:扩展、菜单及模板 | Joomla 1.5教程 | Joomla高级教程 | Joomla! SEO教程