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

前几天做网站，要实现一个文章标题前加一个小箭头，小箭头准备用图片做，在网上找到[[AutoIt]]的文章：让文章标题处显示的活泼些 [续] Vote's hack。

这样做当然好，但是像我这样只需要在标题前加一个小图片的简单功能，就不用这么复杂，对我这样的新手来说还容易出错。

以下是简单方法：

一、查看文章显示页面，找到

<td class="contentheading" width="100%">文章标题</td>
我们只要在[[模板]]调用的[[css]]文件template_css.css文件中定义类.contentheading就可以了

二、打开template_css.css文件，找到类.contentheading，如果没有这个类的定义，就自己加上（建议用DW打开，我就用这个，看中了它的提示功能，呵呵）

三、我修改好的.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;（背景位置）
}

总结：

1. 这个功能很简单，用CSS实现也方便，主要就是利用CSS来做背景及文字的[[缩进]]。同样也可以调整标题的水平方向上的位置等。
   
2.  这样调的好处就是和[[joomla]]无关，模板不用改，只要改CSS文件。
   
3.  同理，要改其它的页面，也用这个方法。如果在joomla生成的页面中，没有类似.contentheading类，可以自己在相应的joomla文件中加上自己的类（如mydotter），然后在CSS文件中定义好相应的类就行了，如果没有定义好，也不会对joomla有影响
   
4.  定义了标题，可能有就有需要定义在分类中的文章标题列表的显示样式，打开文件components/com_content/content.html.php，找到相应的内容，在对应的内容上加入class=”你的类”，以下不用说了吧。

修改前记得做这个文件的[[备份]]，呵呵。

其实这个CSS的功能在一般的模板制作中都有使用，但好象在网上也没有针对性的文章，希望对象我这样的初学者有用，想想当时为这个问题真是比较痛苦。