Hi,
We are working on something similar for a client. They require the page content to have a white background that is in line with the width of the content on the rest of the site.
We are using this JavaScript (injected with a hook) …
add_action('wp_footer', 'twenty_twenty_one_wrap_content');
function twenty_twenty_one_wrap_content() {
?>
<script type="text/javascript">
(function () {
var entryContent = document.querySelector('.entry-content');
var entryContentWrapper = document.createElement('div');
entryContentWrapper.className = 'entry-content';
entryContent.parentNode.insertBefore(entryContentWrapper, entryContent);
entryContentWrapper.appendChild(entryContent);
entryContent.className = 'entry-content-wrapper';
}());
</script>
<?php
}
… and this CSS …
.entry-content-wrapper {
background-color: white;
}
@media (min-width: 482px) {
.entry-content-wrapper {
padding: 0 6rem;
}
}
… to achieve this.
Please note that we have only just put this together for page content and it will require development to get it to work with posts.
Does that help?
Oliver
Hi Oliver. Thanks for the reply.
I don’t really know anything about adding JavaScript to be honest.
I have found a temporary solution of changing the background colour to white and setting the bottom margin or each text block to 0 so it appears as one white box over the black background.
This will do for now and looks ok.
Appreciate you taking the time to help out.
Mike.
Because our client wanted the effect on all pages, we decided to try to find another global solution rather than changing the background for each element on the page manually.
Glad it works for you though.
We’ll be adding this as an option to our Options for Twenty Twenty-One plugin when it’s finished.
Oliver
Hi Oliver.
Great stuff I’ll keep an eye out for the update and apply it then.
Much appreciated.
Mike.
