Advertisement
Need help in styling Cassiopeia Default Template with CSS Topic is solved
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.
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.
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Need help in styling Cassiopeia Default Template with CSS
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
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
-
- Joomla! Guru
- Posts: 561
- Joined: Fri Dec 02, 2005 10:46 am
- Location: The Netherlands
Re: Need help in styling Cassiopeia Default Template with CSS
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.
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;
}
}
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
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
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.
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
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.
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
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;
}
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.
- Per Yngve Berg
- Joomla! Master
- Posts: 31334
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: Need help in styling Cassiopeia Default Template with CSS
Is Cassiopeia set to Static instead of Fluid?
-
- Joomla! Guru
- Posts: 561
- Joined: Fri Dec 02, 2005 10:46 am
- Location: The Netherlands
Re: Need help in styling Cassiopeia Default Template with CSS
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:
@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;
}
}
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
@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
I will now try his latest suggested edit and report back.
Adri
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
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
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.
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
I just did it by adding the following
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.
Code: Select all
.container-sidebar-left .sidebar-left:first-child {
margin-top: 0em;
}
Regards,
Adri
P.S. I will keep this thread open for a couple of days, just in case I run into any more issues.
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
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
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
- adricist
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Sep 17, 2008 11:39 am
Re: Need help in styling Cassiopeia Default Template with CSS
Mr. Wimpy,
I have now got it working by simply removing the following code
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
I have now got it working by simply removing the following code
Code: Select all
#accordeonck110 {
width: 60px;
}
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