编辑“Joomla/用CSS控制Display News模块的外观样式”（章节）

==文章标题和日期==
看看下面的文章标题和日期，由于标题长短不一，标题跟在后面确实不漂亮。日期差不多都是一样长度，如果我们把顺序调整为“日期 标题”，那么可能还好看一些。但是我们想要的是“标题 日期”的顺序，而且日期要靠右对齐。这个在模块参数中没有对应项目，因此只能修改 CSS 了。

在页面上点击右键，选择“查看页面源代码”，从源代码中很容易就找到与 Display News 有关的那部分代码，这是因为该模块作者已经在源代码中特意作了标记：

[[Image:Joomla display 3.jpg]]
可以看出，作者用注释的方式在 Display News 模块源代码的开始和结尾都作了标记，非常容易辨认。

===代码详解===
我们来看看这段代码中可以找到哪些“开关”：

HTML 元素包括：[[Div]] , Span, a, 总共 3 种；

CSS 类包括：contentpaneopen， contentheading， contentpagetitle，createdate， 总共 4 种。

我们现在要做的就是用这些“开关”来控制模块的外观。写入 CSS 代码的文件是网站当前模板的 template.css 文件。

打开 /templates/rhuk_milkyway/css/template.css 这个文件，在末尾插入下面的代码：
<pre>
/* Display News Module */

span.contentheading {
float: left;
width: 130px;
}

span.createdate {
float: right;
width:20px;
}

div.contentpaneopen{
padding-bottom: 150px;
width: 150px;
}

div.contentpaneopen div{
line-height: 180%;
}

a.contentpagetitle:link, a.contentpagetitle:visited, a.contentpagetitle:active {
color: #ff0000;
font-size: 12px;
text-decoration: none;
}
</pre>

在上述代码中，通过 CSS 调整了：文章标题的字号为 12px；颜色为红色；标题链接在正常状态及鼠标指向时、鼠标点击后，都没有下划线；日期靠右对齐，每一行的行高为 180%。

你可以对照这个例子来操作一下，保存 template.css 文件后，刷新前台，就会发现 Display News 模块的样子不那么难看了：

[[Image:Joomla display 4.png]]

在上面新增的 CSS 代码中，你也可以继续增加项目来实现你想要的其它样式，或者更改示例中的每一项冒号后面的值来满足你自己的样式要求。