---
title: 'Making CSS-only Overrides'
created_time: '2023-09-23 17:31:48'
language: fr
subtitle: ''
---

# Making CSS-only Overrides

by Marc Dechèvre

**JoomlaShack Conference, 9 & 10 December 2020**

![Marc](%URL%.images/marc_dechevre.jpg "100x100")

slides <i class="fa fa-desktop"></i>  https://slides.woluweb.be

[replay on YouTube](https://www.youtube.com/watch?v=lsg5XASlp1s&list=PLbSGtuctZCf2kLvfAjsFnZumeyMwAtStQ)

## The power of Joomla

**Did I already tell you that Joomla is sooo powerful ?**

- not only because of its native **Custom Fields**
- not only because it manages **Multilingual** websites natively
- not only because of **Users Access Management**...
- but also a.o. because of the possibility to make **Overrides** / Alternate Layouts for any View of any Component or Module

---

Most of the time you don't even need to know anything of **PHP** to make your first Overrides, for example if you simply want to move the Image before/after the Title or create a 2 column layout for your content.

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)

## Inspiration for Overrides

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

- https://www.j-over.de/
- https://www.web-eau.net/developpement/joomla-overrides

and -why not- join the current Joomla Override Challenge #joc
- https://twitter.com/hashtag/JoomlaOverrideChallenge

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

https://caniuse.com/css-grid

## Example

On the following Animated Gif, we already have a first idea of what we can achieve:
- a total freedom on where I put which element (Title, Image, Text, Links, ...)
- different layouts according to the viewport

---

![cssgrid](%URL%.images/cssgrid.gif)

## 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 / ...** version

---

5. 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)
6. 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
7. 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 4

---

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

## 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 😊 )

<small>https://joomla.digital-peak.com/demo/dpc/en/event-details-view.html</small>

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.

## A more advanced example

In one of our current projects, we tried to go further and even have a more complex design:
- we don't want to have a linear display of the different elements of the Article (Title, Image, Text, Links, Pagination, ...)
- so we play with CSS Grid to get overlap, more empty spaces on desktop etc

See the live demo.

Or see the simplified version here on Codepen:

https://codepen.io/woluweb/pen/rNMMjMQ

## Easy to adapt to each project

Actually I had initially made this nice design on a website running
- Astroid Template
- made by JoomDev
- based on Bootstrap 4

Then I gave a try and simply copy-pasted my CSS on another (old) website running
- Helix 3 Template
- made by JoomShaper
- based on Bootstrap 3

---

And waouw! Even then it would work immediately (see live demo).

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.

## 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
- https://chenhuijing.com/blog/how-i-design-with-css-grid/
- result on codepen: https://codepen.io/huijing/pen/QQGBjY

The JoomlaShack complete guide to CSS Grid (23 lessons) and the book
- https://www.joomlashack.com/blog/joomla-news/css-grid/

---

A visual generator
- https://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/

And more generally
- a complete guide: https://css-tricks.com/snippets/css/complete-guide-grid/
- practical examples: https://gridbyexample.com/
- video tutorials: https://cssgrid.io/
- and in the near future, we will even have SubGrids: https://noti.st/rachelandrew/i6gUcF

## Get in touch

<i class="fa fa-desktop"></i> https://slides.woluweb.be

Any suggestion about this presentation ?<br />
Please feel free to contact me. I'll be happy to keep improving it 😊

<i class="fa fa-user"></i> <i class="fa fa-facebook"></i> [Marc Dechèvre](https://www.facebook.com/marc.dechevre) | <i class="fa fa-skype" aria-hidden="true"></i> <i class="fa fa-twitter"></i> [woluweb](https://twitter.com/woluweb)<br />
<i class="fa fa-mobile"></i> <i class="fa fa-whatsapp"></i> +32 474 37 13 12 | <i class="fa fa-phone"></i> +32 2 772 58 69

<i class="fa fa-send"></i> https://www.woluweb.be/contact

https://www.slideshare.net/woluweb