To find out where everything goes in Cassiopeia, I pulled the HTML from Cassiopeia's index.php and styled it a bit.
Cassiopeia Positions
body
header (wrapper)
below-top
grid-child container for brand/logo & description
menu
search
site-grid (wrapper)
top-a
top-b
container-component
breadcrumbs
main-top
actual content component
main-bottom
bottom-a
bottom-b
back-to-top & debug
Some notes...
Sticky menu
If you choose to make the menu sticky, it will make the whole "header" section sticky...
Sidebar width
If you want to change the width of a sidebar, you will have to tinker with the CSS for the "site-grid" section. It is initially styled as a CSS grid, like this:
.site-grid {
display: grid;
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
grid-gap: 0 1em;
}
And on larger screens, like this:
@media (min-width: 992px)
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
}
Making the side bars smaller can be done like this:
.site-grid {
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 17.875rem) repeat(2, minmax(0, 21.875rem)) minmax(0, 17.875rem) [main-end] minmax(0, 1fr) [full-end];
}
or whatever width you prefer. The total max-width determines the width of the content area - in this example, I kept the same total in rems.