Quantcast
Channel: Joomla! Forum - community, help and support
Viewing all articles
Browse latest Browse all 2018

Templates for Joomla! 4.x • Re: Need help in styling Cassiopeia Default Template with CSS

$
0
0
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:

.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;  }}

Statistics: Posted by Mr. Wimpy — Fri Sep 27, 2024 3:23 pm



Viewing all articles
Browse latest Browse all 2018

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>