Advertisement

Need help in styling Cassiopeia Default Template with CSS Topic is solved

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Fri Sep 27, 2024 7:21 am

Hi,

I need some help in styling Cassiopeia with user.css file.

What I am trying to achieve is to use Accordeon Menu CK and make it behave in the Sidebar-Left in as close way to how the default Joomla Back-End Menu behaves.

Basically when selecting the position Sidebar-Left, we would like the Accordeon Menu to always fill the sidebar left fully and stay close to the left edge, similarly to how it works in the back end Joomla Menu. We do not want the sidebar-left to expand with further gaps, using unnecessary width, so that the article's content displayed in the "message" position also aligns to the left, as close as possible to the Accordeon menu.

If the attached module positions for Cassiopeia - Default is right, then I suppose we would need to "remove" or reduce to zero the "body", the "site grid container", and the "blue area" I have marked.

We would then have to make sure that the sidebar left would always be the width of the accordeon menu without expanding when the browser window is made wider, and all the positions "breadcrumbs", main-top", "message", "component" and "main-bottom", should also always align to the left, next to the accordeon menu.

Do you think this should be achievable with some CSS override of the template, in order to obtain a similar behavior to what we have in the Joomla backend?

Thank you in advance.

Regards,
Adri
You do not have the required permissions to view the files attached to this post.

Advertisement
Mr. Wimpy
Joomla! Guru
Joomla! Guru
Posts: 571
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Need help in styling Cassiopeia Default Template with CSS

Post by Mr. Wimpy » Fri Sep 27, 2024 3:23 pm

See if this works...

Add the following CSS to your user.css.

This should do the following:
- Collapse the outside columns of site-grid, so your site is full width.
- Move container-sidebar-left to the left side of the screen, just like the left hand menu in the backend.

More CSS may be needed. I.e. on smaller screens sidebar-left is displayed after sidebar-right.

Code: Select all

.container-sidebar-left {
  /* Make sidebar-left span full width of the screen (for smaller screens) */
  grid-column: full-start / full-end;
}

@media (width >= 992px) {
  .site-grid {
    /* Collapse outside columns on bigger screens, but use the same number of columns and names from Cassiopeia */
    grid-template-columns: [full-start]0[main-start]repeat(4,1fr)[main-end]0[full-end];
  }
  
  .container-sidebar-left {
    /* Span sidebar-left over 2 columns, starting from [full-start] (declared above) */
    grid-column: span 2;
  }
}

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Sep 28, 2024 4:27 am

Mr. Wimpy, you are the man!!! :)

That is amazing, thank you so much, that did the trick perfectly! THANK YOU!

Please see the attached before and after results.

But please also see my next post, for further improvements that would make it perfect.

Thank you again,
Adri
You do not have the required permissions to view the files attached to this post.

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Sep 28, 2024 5:00 am

Mr Wimpy,

What would be great is to also make the following three more adjustments:

1) Removing the white area displayed outside the body, as marked in the attachment A. The joomla back-end does not seem to have this, see attachment B, and when I inspect it I cannot seem to understand how to remove that further gap around the body. See attachments C and D. For your information, I have added the following CSS code to make it clearer of what the body is.

Code: Select all

body {
    background-color: black; 
    color: #fff; 
}
2) Removing the white area displayed outside the Accordeon Menu in the SIDEBAR-LEFT position, as marked in the attachment A.

3) Finally, how can I control/limit the overall width of the SIDEBAR-LEFT area, as marked in the attachment A, so that it does not automatically expand to any larger that it needs to be. I would be happy to be able to set a maximum width value, beyond what the Sidebar-Left would not expand.

Thank you in advance for all your help, these final adjustments would make Cassiopeia a perfect companion template for Accordeon Menu CK to deliver a smooth looking left bar menu navigation!

I look forward to your valuable feedback.

Regards,
Adri
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31348
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Need help in styling Cassiopeia Default Template with CSS

Post by Per Yngve Berg » Sat Sep 28, 2024 8:11 am

Is Cassiopeia set to Static instead of Fluid?

Mr. Wimpy
Joomla! Guru
Joomla! Guru
Posts: 571
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Need help in styling Cassiopeia Default Template with CSS

Post by Mr. Wimpy » Sat Sep 28, 2024 8:52 am

Cassiopeia does not have padding on html. Not sure where that came/comes from or who or what added it. Check if remhoving it affects other pages and/or smaller screens.

@Per Looks like static layout. Fluid or Static layout does not matter in this case. As Fluid also adds an empty column on the sides. And the left sidebar needs to be located at the screens left edge.


1. Added 0 padding on html
2. Added 0 padding on .container-sidebar-left .card-body
3. Changed width of the column for sidebar-left

The new CSS with the changes looks like:

Code: Select all

html {
  padding: 0;
}

.container-sidebar-left {
  /* Make sidebar-left span full width of the screen (for smaller screens) */
  grid-column: full-start / full-end;
}

.container-sidebar-left .card-body {
  padding: 0;
}

@media (width >= 992px) {
  .site-grid {
    /* Collapse outside columns on bigger screens, but use the same number of columns and names from Cassiopeia */
    grid-template-columns: [full-start]0[main-start]minmax(max-content,17rem) repeat(3,1fr)[main-end]0[full-end];
  }
  
  .container-sidebar-left {
    /* Span sidebar-left over 2 columns, starting from [full-start] (declared above) */
    grid-column: span 2;
  }
}

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Sep 28, 2024 9:00 am

@Per, yes it was set as Static. I have tried Fluid but it makes no difference, so I have reverted back to Static, based on Mr. Wimpy's latest comment.

I will now try his latest suggested edit and report back.

Adri

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Sep 28, 2024 9:43 am

Mr. Wimpy you are amazing, thank you!

That did everything that I asked, thank you.

The only other thing I have now noticed is that there is a small outside gap to the Top of the Sidebar-Left, see marked spot in the Attachment A.

There is no gap to the left at all, which is perfect, and it would be great if we could remove that small top gap as well.

I have also added the Attachment B which has the Firefox Inspect details.

Is that easy to remove?

Thank you so much for all your help.

Regards,
Adri
You do not have the required permissions to view the files attached to this post.

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Sep 28, 2024 10:05 am

I just did it by adding the following

Code: Select all

.container-sidebar-left .sidebar-left:first-child {
  margin-top: 0em;
}
Thank you so much for all your help, it has been invaluable.

Regards,
Adri

P.S. I will keep this thread open for a couple of days, just in case I run into any more issues.

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Oct 05, 2024 6:21 am

Mr. Wimpy,

I have sent you a private message with credentials for accessing a test website.

I look forward to hearing back from you soon.

Regards,
Adri

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 17, 2008 11:39 am

Re: Need help in styling Cassiopeia Default Template with CSS

Post by adricist » Sat Oct 05, 2024 7:43 am

Mr. Wimpy,

I have now got it working by simply removing the following code

Code: Select all

#accordeonck110 {
width: 60px;
}
However, the the Top Level item do not display the Titles, see attached screenshot.

Is there a way to get the Titles of the top levels back?

Please check it at your own time and let me know if you have a better solution.

I look forward to hearing back from you soon.

Regards,
Adri
You do not have the required permissions to view the files attached to this post.

Advertisement

Post Reply

Return to “Templates for Joomla! 4.x”