Sidebar – Styling
The sidebar container has a an assigned class of spacific-sidebar.
The width of this is set to 30.2% and managed under “Appearance > Custom CSS”.
This class also sets the background colour and level of padding allowing all containers assigned with this class to inherit these settings automatically if changed.
/* global variable declarartions for use in setting spacing */
:root {
--spacific-spacing: 10px;
--spacific-spacing-double: calc( var(--spacific-spacing) * 2 );
--spacific-spacing-triple: calc( var(--spacific-spacing) * 3 );
--spacific-spacing-half: calc( var(--spacific-spacing) * .5 );
}
.spacific-sidebar {
background-color: #E9EDF0;
--width: 30.8% !important;
--padding-block-start: var(--spacific-spacing-double) !important;
--padding-block-end: var(--spacific-spacing-double) !important;
--padding-inline-start: var(--spacific-spacing-double) !important;
--padding-inline-end: var(--spacific-spacing-double) !important;
}
@media only screen and (max-width: 768px) {
.spacific-sidebar {
--width: 100% !important;
}
}