Making CSS-only Overrides

by Marc Dechèvre

JoomlaShack Conference, 9 & 10 December 2020



replay on YouTube

1. The power of Joomla

Did I already tell you that Joomla is sooo powerful ?

And once you have tested/tasted it, you will probably want to go to the next level and exploit the possibilities of PHP too to make more complex things.Typically making an Override / Alternate Layout entails two things:

  1. changing the View, namely the HTML generated by some PHP file
  2. adding a bit of CSS to customize the styling of the elements (if needed)

2. Inspiration for Overrides

To get inspiration for Overrides / Alternate Layouts, see for example

and -why not- join the current Joomla Override Challenge #joc

3. Overrides… only with CSS

In this presentation, we will show how to make a “kind of” Override or Alternate Layout… only with CSS.

This is indeed made possible by what is called CSS Grid

4. Example

On the following Animated Gif, we already have a first idea of what we can achieve:

5. Advantages

This way of making Overrides is very handy for different reasons:

  1. even less technical people can customize their layouts (no HTML and no PHP involved)
  2. you can easily achieve even the most sophisticated layouts
  3. you can have (completely) different layouts according to the viewport and so be mobile-first
  4. it works no matter your Bootstrap / UIkit / … version5. in many cases, you can just copy-paste your CSS from one Template to another and it will work immediately (in our demo, our override in Astroid 2.4 immediately works on Helix 3, even if they come from two different template editors and if the latter is an old generation of Helix)
  5. it requires less maintenance: when you create a “real” Override / Alternate Layout, you actually fork the original PHP file. This means that when there are fixes / improvements / changes to that original Joomla file, you are supposed to revise your forked code accordingly
  6. last but not least, Joomla 4's frontend is largely based on CSS Grid. So it is definitely an extra motivation to learn it so that you can customize even more things in Joomla 4Of course, real Overrides / Alternate Layouts are still useful because you can go further and do more things.

But if the only purpose is to rearrange the layout of the existing content without manipulating it, CSS Grid can be a nice way to do it.

6. How it started

I have always been very curious about Flexbox and CSS Grid but never really implemented them in my projects, except for little things like displaying the Partners/Sponsors/Clients logos in a footer.The first really nice implementation of CSS Grid I discovered in the Joomla world was done by Allon Moritz (the father of Joomla’s Custom Fields btw, my favourite topic 😊 )

Simply inspect the code and look at

<div class="com-dpcalendar-event

In the corresponding CSS you will see

display: grid;

Note : Firefox’s inspector is very handy bc you can click on the grid icon in the CSS and you will keep visualizing the grid while you are inspecting the other elements.

7. A more advanced example

In one of our current projects, we tried to go further and even have a more complex design:

See the live demo.

Or see the simplified version here on Codepen:

8. Easy to adapt to each project

Actually I had initially made this nice design on a website running

Then I gave a try and simply copy-pasted my CSS on another (old) website running

But even for templates which would be more different (in the sense of generating a completely different HTML structure for the Articles) it would be very quick to adapt the CSS.

9. Go go go

Now it is up to you 😊

Here are some interesting resources

A complete example of layout for an article by using CSS Grid

The JoomlaShack complete guide to CSS Grid (23 lessons) and the book

And more generally

10. Get in touch

Any suggestion about this presentation ?
Please feel free to contact me. I’ll be happy to keep improving it 😊

Marc Dechèvre | woluweb
+32 474 37 13 12 | +32 2 772 58 69