Fancier, more stylish, super hip, or just different: sometimes you just want your website to look a little less standard. In this new series, we show you how to do that with simple adjustments, step by step.

Don’t worry: you don’t need to know how to code, and you don’t need to create overrides. In the first article of the series, we will modify the layout of the module “Articles - Newsflash” with just a few lines of CSS. Let’s start the makeover!

Structure

The idea is to create a simple page with an article and a module displaying several quotes.
We start creating an article and a menu item for it. Then we create a new category “Quotes” with a few quotes of your choice. Write your text and mark it as “blockquote”:

In the next step, we set up a module of type “Articles - Newsflash” that should display the articles in the category “Quotes”. For this example, I configured the module to display the title (without link) and the intro text of the articles. I selected the position “sidebar-right” and under “Advanced” changed the module style to “html5”. Here you can also add a class to the module.

That is how the page looks like using Cassiopeia without any modifications:

CassiopeiaZen

The Cassiopeia template has its own CSS, but it is possible to overwrite and/or add definitions. You can create a user.css going to System -> Site Templates -> Cassiopeia Details and Files. Here you will find the file structure from Cassiopeia.

When you click on “New file” a modal window opens. You need to select the folder “css” inside “/media/templates/site/cassiopeia”. On the right side, enter “user” as file name and select “.css” as file type. Click on the “create” button and you are ready to add some CSS definitions.

But first we need to know which classes we can modify. You can right-click on the sidebar and select “Inspect” (depending on the browser, the function can have another name). In the opened inspector you will see the HTML structure of the module

<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>

The first <div> has the class “moduletable” - that is the standard class for modules rendered in html5 style. The class “quotes” is the added class in the advanced parameters of the module.
The second <div> has the classes “mod-articlesnews” and “newsflash” and surrounds all the items.
The third <div> is the first quote and has the class “mod-articlesnews__item”.
The title of the article has the class “newsflash-title”. And the content is a blockquote element.

In the first example we want to display the titles with a purple background and white text. And the quotes itself should have a quote sign before the text.

.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;
}

I added some more css to make the page more attractive.
I gave header, footer and sidebar a new background color:

/* 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;
}

Additionally, I modified the layout of the page title:

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

Now the page is looking totally different from the original unmodified Cassiopeia version.

The great thing about sticking with the core instead of using bloated templates and extensions is that we can simply modify some CSS definitions and we get a completely new layout.

CassiopeiaZen II

That is how the page looks like, when we modify the CSS in other way:

/* 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;
}

All three examples can be found in the Cassiopeia demo site:

Original Cassiopeia: https://cassiopeia.joomla.com/styles/cassiopeiazen-original

CassiopeiaZen: https://cassiopeia.joomla.com/styles/cassiopeiazen

CassiopeiaZen II: https://cassiopeia.joomla.com/styles/cassiopeiazen-ii

Do you have other ideas? Start adding some CSS to your site!