Cassiopeia Sidebars 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
b4pjoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Sat Sep 05, 2009 10:14 pm

Cassiopeia Sidebars

Post by b4pjoe » Wed Oct 13, 2021 10:33 pm

Is there a simple way of making the sidebars smaller in width so the center section is wider?

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia Sidebars

Post by Pavel-ww » Thu Oct 14, 2021 6:52 am

b4pjoe wrote:
Wed Oct 13, 2021 10:33 pm
Is there a simple way of making the sidebars smaller in width so the center section is wider?
Hi. The only way to do this is only through CSS.

b4pjoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Sat Sep 05, 2009 10:14 pm

Re: Cassiopeia Sidebars

Post by b4pjoe » Thu Oct 14, 2021 1:31 pm

Yes and I assume by using either flex-shrink or flex-grow but where in the CSS?

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 477
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Cassiopeia Sidebars

Post by Jaydot » Thu Oct 14, 2021 1:43 pm

No, the (responsive) width is defined in the CSS Grid definition for the class .site-grid (site-grid is the wrapper for sidebars plus main content), which is divided into four equal-width columns this way:

Code: Select all

.site-grid {
grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
}
The sidebars each take up 25% of the available space if they're used, and the main content takes up the rest.
That's the code you need to tinker with in your user.css...
(Sorry, haven't got time right now to figure it out for you).
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia Sidebars

Post by Pavel-ww » Thu Oct 14, 2021 2:09 pm

b4pjoe wrote:
Thu Oct 14, 2021 1:31 pm
Yes and I assume by using either flex-shrink or flex-grow but where in the CSS?
It is not suitable, as the main page layout is built on CSS Grid, but not on Flex Box.
Try this code.

Code: Select all

.site-grid {
	grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 16.875rem) repeat(2, minmax(0, 22.875rem)) minmax(0, 16.875rem) [main-end] minmax(0, 1fr) [full-end];
}
Set up the sizes of the sidebars and the content part as you need
1.jpg
You do not have the required permissions to view the files attached to this post.

b4pjoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Sat Sep 05, 2009 10:14 pm

Re: Cassiopeia Sidebars

Post by b4pjoe » Thu Oct 14, 2021 3:02 pm

Jaydot wrote:
Thu Oct 14, 2021 1:43 pm
No, the (responsive) width is defined in the CSS Grid definition for the class .site-grid (site-grid is the wrapper for sidebars plus main content), which is divided into four equal-width columns this way:

Code: Select all

.site-grid {
grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
}
The sidebars each take up 25% of the available space if they're used, and the main content takes up the rest.
That's the code you need to tinker with in your user.css...
(Sorry, haven't got time right now to figure it out for you).

Thank you for the that info.

b4pjoe
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Sat Sep 05, 2009 10:14 pm

Re: Cassiopeia Sidebars

Post by b4pjoe » Thu Oct 14, 2021 3:04 pm

Pavel-ww wrote:
Thu Oct 14, 2021 2:09 pm
It is not suitable, as the main page layout is built on CSS Grid, but not on Flex Box.
Try this code.

Code: Select all

.site-grid {
	grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 16.875rem) repeat(2, minmax(0, 22.875rem)) minmax(0, 16.875rem) [main-end] minmax(0, 1fr) [full-end];
}
Set up the sizes of the sidebars and the content part as you need
Thank you. This worked perfectly!

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 477
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Cassiopeia Sidebars

Post by Jaydot » Thu Oct 14, 2021 3:35 pm

Pavel-ww wrote:
Thu Oct 14, 2021 2:09 pm
...Try this code...
Thanks from me too :).
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 452
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia Sidebars

Post by Pavel-ww » Thu Oct 14, 2021 5:11 pm

You are welcome


Post Reply

Return to “Templates for Joomla! 4.x”