by Marc Dechèvre
JoomlaShack Conference, 9 & 10 December 2020
Did I already tell you that Joomla is sooo powerful ?
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:
To get inspiration for Overrides / Alternate Layouts, see for example
and -why not- join the current Joomla Override Challenge #joc
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
On the following Animated Gif, we already have a first idea of what we can achieve:
This way of making Overrides is very handy for different reasons:
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.
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
In the corresponding CSS you will see
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.
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:
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
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.
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
A visual generator
And more generally
Any suggestion about this presentation ?
Please feel free to contact me. I’ll be happy to keep improving it 😊