Joomla 4 Cassiopeia template customization tips - JoomShaper

Joomla 4 Cassiopeia template customization tips

05 March 2018
Hits 19,752
3 min read
Joomla 4 Cassiopeia template customization tips

Joomla 4 Cassiopeia frontend template is the new default Joomla template specially designed and developed for Joomla 4. Already in the latest alpha releases of Joomla 4, we have experienced Cassiopeia template. Lots of amazing features and awesome functionalities have been introduced in Joomla 4. Among them is the Cassiopeia template. Today we are going see how we can do basic customizations in the Cassiopeia template.

Joomla 4 Cassiopeia template comes with integrated Bootstrap 4 to introduce faster and smarter responsiveness and mobile view. The template has more beautiful modern and trendy look and design style than the previous default Joomla templates. The layout building structure of Joomla 4 is well paneled to give the users an easier experience of template customization. The workflow is now much faster as the template is developed with SASS. Now let’s have a quick basic view of how you can customize the Cassiopeia template.

Default options

There are some default inbuilt options you can use to edit Joomla 4 cassiopeia template. You can change the logo and the title of the page from the provided options. To change the logo, go to Templates > Styles. Now select “cassiopeia” template. Here in the “Advanced” tab you will find the options to change the basic stuff like logo.

Joomla 4 Cassiopeia template customization tips

To change the logo, click the “Select” button in the logo options. Use Joomla 4 media manager to upload the image and select the image to add.

Joomla 4 Cassiopeia template customization tips

You can also add a title and description of your site using the default option. 

Change background color

You can also change the header color of the template. To do that, you have to do some custom CSS. We have changed the background color of our Cassiopeia template like in the below image.   

Joomla 4 Cassiopeia template customization tips

For adding the custom CSS, you have to add a custom.css file to the template CSS folder and add the custom CSS code there. We have customized with the following CSS to get the desired result.

.container-header {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    background-color: #434178;
    background-image: linear-gradient(135deg, #578e8e 0%, #14382c 100%);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

Change module position

 You can change the module position from the frontend of the website. Here we are going to change the menu items module position. We need to click on the edit module icon in the menu module.

Joomla 4 Cassiopeia template customization tips

Now, here you will get some default options to edit the module. Find the option "Position". Click on the option. Select your desired position from the drop down menu. Here we have selected the position "menu".

Joomla 4 Cassiopeia template customization tips

Here is how it looks after the module position changes.

Joomla 4 Cassiopeia template customization tips

 So, these are some basic customization tricks for Joomla 4 Cassiopeia template. We will gradually add some advanced tips and tricks. So, stay with us! 

Comments (9)

S
ssnobben
This comment was minimized by the moderator on the site

Looking forward to new Joomla with SP Pagebuilder & Helix Ultra!

Paul Frankowski
Paul Frankowski    ssnobben
This comment was minimized by the moderator on the site

so for what, you are waiting for. Go and install Helix Ultimate + SPPB.

Andreas
Andreas
This comment was minimized by the moderator on the site

Or just install SP Page Builder and go nuts...

pepperstreet
pepperstreet
This comment was minimized by the moderator on the site

Sorry, are you seriously publishing an article about a super-early alpha version of the next J!4 default template?! Hence the first screenshot. It's not even worse to talk about it (yet). Honestly, this is the most unnecessary article in Joomshaper's blog history.

Paul Frankowski
Paul Frankowski    pepperstreet
This comment was minimized by the moderator on the site

Thanks for critic, but maybe for some users in near future it will be more useful.
We used Alpha2, admin template will stay probably this same in beta/RC/stable.

pepperstreet
pepperstreet    Paul Frankowski
This comment was minimized by the moderator on the site

I did not want to sound too harsh. But I believe it does not make any sense to post this type of article for an ALPHA version. I am sure, the ALPHA term has a quite different meaning compared to JoomShapers own roadmaps... you are probably right with the custom.css file, but there is nothing set in stone for the frontend template, nor the admin template. Especially the latter one will change a lot, IMHO.

JG
Julius Gashumba
This comment was minimized by the moderator on the site

Thanks for the article! I just think that the Joomla community as a whole is not very exciting at the moment. No news of the current state of Joomla 4 development coming from anywhere!

I
intodanish.com    Julius Gashumba
This comment was minimized by the moderator on the site

Hi Julius, I'm not sure where you look but there is plenty of news / information about J4...

The Joomla Community isn't as showy as others but it's quite present, and alive.

JE
Josef Eisner
This comment was minimized by the moderator on the site

It is not custom.css but user.css

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.