编辑“Joomla/利用CSS给文章标题添加图片”

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

==具体方法==
1。查看文章显示页面，找到
 <td class="contentheading" width="100%">文章标题</td>
我们只要在模板调用的[[css]]文件template_css.css文件中定义[[类]].contentheading就可以了
 
2、打开template_css.css文件，找到类.contentheading，如果没有这个类的定义，就自己加上
 
3、修改好的.contentheading类如下
<pre>
.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; /*（背景位置）*/
}
</pre>

==总结==
这个功能很简单，用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}}

[[category:Joomla|L]]