Let's state it once and for all, the backend in Joomla is quite boring, but what if you can give it a more interactive and interesting look. This is quite easy to do using the backend modules and CSS.
The reason for this article offsprings from a Youtube Video that shows the benefits of haveing an customized backend, and it explains the steps on how to do this. I will give you some other solutions and my own thoughts here, but the basis is the same.
How do i add an module to the Backend?
In the backend you will be able to ad an module as simple as doing it in the frontend. See this article on how to do this "How to create an Module in the Backend".
So what can i do? - This question is better answered by saying: - What would you like to see in the backend. If you like an Module to be displayed with a Custom look, you can add CSS to the Custom Module, to do this you go into the Backend template that you use.
The first thing to do is to add a CSS file to the backend template. The images below shows the steps to take to go to the backend template and create a file called "custom.css". You must use this name to get the customize CSS to work. The file is built in by default to almost every templates both frontend and backend.
{{snippet add-files-to-a-template}}
How to give the Mainpage of your Isis Backend a new look
Joomla out of the box has the opportunity to have custom a design in the Backend too. You don't have to create your own template or download any templates to do this, just use the Custom Module to display your content. JoomlaForever's Main Backend page now looks like this:
This is made by adding pictures with links to important bacikend pages, all by copying the links within the menues of Joomla Backend top menu. We add styles to page by refering to the styles class that is setup. The easiest way to do this is by wrapping the content parts into a DIV class, makeing sure that the class added don't exsists in the Joomla Core as default. and put your costomized content within this.
This way you can controll how the styles appear with the master class. You can read about this at MDN. To explain this i will give an example of my own Custom Module:
The Main Page of the Backend contains several Modules by default, to put an extra Module into the Mainpage, it's important to use the position "cpanel", this will display your Custom Module on the Backend's Mainpage. You can read more about how to create an Module in the Backend here
Code of the Custom Dashboard Isis template (the HTML)
The [image] needes to be replaced with your own image
<ul class="j-links-group nav nav-list"><li class=""><a href="/administrator/index.php?option=com_content&task=article.add"><img src="/[image]" alt="New Article"/></a></li><li class=""><a href="/administrator/index.php?option=com_content"><img src="/[image]" alt="Article List"/></a></li><li class=""><a href="/administrator/index.php?option=com_media"><img src="/[image]" alt="Media Manager"/></a></li><li class="jf-logo "><img src="/[logo]" alt="JoomlaForever Logo"/></li><li class=""><a href="/component/jmap"><img src="/[image]" alt="seo"/></a></li><li class=""><a href="/index.php?option=com_sh404sef"><img src="/[image]" alt="growth"/></a></li><li class=""><a href="/index.php?option=com_akeeba"><img src="/[image]" alt="backup"/></a></li></ul></div>
<p>
</p>
<div class="welcomescreen-homepage">
<h1><span style="color: #ff0000;">WELCOME TO JOOMLAFOREVER.COM! - BACKEND</span></h1>
<p>This site is meant for giving the audience a new and more fun approach to Joomla. There will be articles that inspire others to begin with the awesome CMS-system Joomla is!</p>
<p> </p>
<div class="alert alert-success">
<h5 class="card-title">INFO MESSAGE</h5>
<p class="card-text">Don't display in admin<br />#system-message-container .alert-success{display: none;}</p>
</div>
<div class="alert alert-info"> </div>
</div>
If you change the main classes ".top-useful-links" for the Images and ".welcomescreen-homepage" for the Welcome Message, remember to change it in the CSS to
The CSS for the Mainpage
We also hide the "success"-message with CSS, but not the Error messages.
.top-useful-links {width: 100%;padding:2rem 0 0 0;} .top-useful-links ul {line-height: 1.5;vertical-align: middle;} .top-useful-links ul {display:flex;justify-content: space-between;}.top-useful-links ul li {list-style-type:none;padding-right: 2em;font-size:1.5rem;} .top-useful-links ul li {padding-right: 1.5rem;} .top-useful-links ul li .j-links-link {height: 25px;width: 25px;} .top-useful-links ul li img {height: 25px;width: 25px;} .top-useful-links img {width:100px;height:100px}
The main classes that we use is ".top-useful-links" for the Images and ".welcomescreen-homepage" for the Welcome Message. You can pick your own, but remember to use a value thats not in use in Joomla core.
Create a new look on other Backend pages
You can also change the look of your other pages, just by adding the same code or something else into an module with position "toolbar".
Our article list page now looks like this:
How to reorder the placements of things in Joomla
The order of things in Joomla is the same principle for all things (Modules, Plugins, Articles, and Categories), by default is set to descending (Desending - This means that the highest placement comes first on the page), but its posible to change this order.
By clicking the two arrows, you can drag the order of your Modules to be displayed.
Based on this Youtube Video from Basic Joomla Tutorials
