4分钟阅读时间 (800字)

美化您的 Joomla 网站：文章 - 新闻快讯

六月

维维安娜·门策尔

周二，20六月 2023

1761 次点击

0 条评论

更时尚、更时尚、超级酷炫，或者只是与众不同：有时您只想让您的网站看起来不那么标准。在这个新系列中，我们将逐步向您展示如何通过简单的调整来实现这一点。

不用担心：您不需要了解如何编码，也不需要创建覆盖。在这个系列的第一篇文章中，我们将使用几行 CSS 修改“文章 - 新闻快讯”模块的布局。让我们开始这次改造吧！

结构

我们的想法是创建一个简单的页面，其中包含一篇文章和一个显示几个引用的模块。
我们首先创建一篇文章和它的菜单项。然后，我们创建一个新的分类“引用”，其中包含一些您选择的引用。写下您的文本并将其标记为“引用”。

Screenshot article backend

在下一步中，我们设置一个类型为“文章 - 新闻快讯”的模块，该模块应显示“引用”分类中的文章。在这个示例中，我配置了该模块以显示文章的标题（不包含链接）和简介文本。我选择了位置“sidebar-right”，并在“高级”下将模块样式更改为“html5”。在这里，您还可以添加一个类到模块中。

这就是使用 Cassiopeia 且没有任何修改的页面看起来

Cassiopeia original

CassiopeiaZen

Cassiopeia 模板有自己的 CSS，但您可以覆盖和/或添加定义。您可以通过转到系统 -> 网站模板 -> Cassiopeia 详情和文件来创建一个 user.css。在这里，您将找到 Cassiopeia 的文件结构。

Site template

当您点击“新建文件”时，会弹出一个窗口。您需要选择“/media/templates/site/cassiopeia”中的“css”文件夹。在右侧，输入“user”作为文件名，并选择“.css”作为文件类型。点击“创建”按钮，您就可以添加一些 CSS 定义了。

user css

首先，我们需要知道哪些类可以修改。您可以在侧边栏上右键点击并选择“检查”（根据浏览器，该功能可能具有不同的名称）。在打开的检查器中，您将看到模块的HTML结构

<div class="moduletable quotes">
 <div class="mod-articlesnews newsflash">
 <div class="mod-articlesnews__item" itemscope="" itemtype="https://schema.org/Article">
 <h4 class="newsflash-title">...</h4>
 <blockquote>
<p>...</p>
</blockquote>
 </div>
</div>

第一个 <div> 具有类“moduletable”——这是在html5风格中渲染的模块的标准类。类“quotes”是在模块的高级参数中添加的类。
第二个 <div> 具有类“mod-articlesnews”和“newsflash”，并包围所有项目。
第三个 <div> 是第一条引用，具有类“mod-articlesnews__item”。
文章的标题具有类“newsflash-title”。内容是一个块引用元素。

在第一个例子中，我们希望标题显示为紫色背景和白色文字。引用本身应该在文本之前有一个引号。

.mod-articlesnews__item:not(:last-child) {
 margin-bottom: 1rem;
}
.newsflash-title {
 background-color: #824670;
 color: #fff;
 padding: .5rem;
}
blockquote {
 padding-top: 10px;
}
blockquote::before {
 font-family: Arial;
 color: #ccc;
 content: "\201C";
 font-size: 4em;
 line-height: 0.1em;
 margin-right: 0.1em;
 vertical-align: -0.4em;
}
blockquote p {
 display: inline;
}

CassiopeiaZen

我添加了一些CSS使页面更具吸引力。
我为标题、页脚和侧边栏设置了新的背景颜色

/* Cassiopeia modifications */
/* Header */
.container-header {
 background-image: none;
 background-color: #004e89;
}
.brand-logo {
 text-decoration: none;
}
/* Sidebar */
.container-sidebar-right {
 background-color: #F4EDEA;
 margin-top: 1rem;
 padding: 0 1rem;
}
/* Footer */
.container-footer {
 background-image: none;
 background-color: #824670;
}

此外，我还修改了页面标题的布局

.page-header {
 color: #824670;
 margin-bottom: 1rem;
}
.page-header h1::after {
 content: '';
 height: 12px;
 background-color: #F4EDEA;
 width: 5rem;
 display: block;
 margin-top: -1rem;
}

现在页面看起来与原始未修改的卡西欧佩亚版本完全不同。

坚持核心而不是使用臃肿的模板和扩展的好处是，我们可以简单地修改一些CSS定义，从而获得一个全新的布局。

卡西欧佩亚Zen II

这就是我们以其他方式修改CSS时页面的样子

CassiopeiaZen II

/* Core modifications */
.page-header {
 color: #1a535c;
 margin-bottom: 1rem;
}
.mod-articlesnews {
 margin-top: 1rem;
}
.mod-articlesnews__item {
 padding-left: 1rem;
 border-left: 3px solid #1a535c;
 margin-bottom: 1rem;
 border-bottom: 3px solid #1a535c;
}
/* Cassiopeia modifications */
/* Header */
.container-header {
 background-image: none;
 background-color: #1a535c;
}
.brand-logo {
 text-decoration: none;
}
/* Footer */
.container-footer {
 background-image: none;
 background-color: #1a535c;
}
/* General modifications */
body {
 background-color: #eff9fb;
}
blockquote {
 padding-top: 10px;
}
blockquote::before {
 font-family: Arial;
 color: #40b7c9;
 content: "\201C";
 font-size: 4em;
 line-height: 0.1em;
 margin-right: 0.1em;
 vertical-align: -0.4em;
}
blockquote p {
 display: inline;
}