Support » Theme: Twenty Twenty-One » Changing Blog Background & Text Colour

  • Resolved Mike Hindle

    (@mikehindle)


    Hey there.

    I have my site set as a black background, and would now like to start adding blog posts with a white background and black or dark grey text.

    I’ve not been able to find a way to do this as yet.

    Any help would be very much appreciated 🙂

    Thanks,

    Mike.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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

    Thread Starter Mike Hindle

    (@mikehindle)

    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

    Thread Starter Mike Hindle

    (@mikehindle)

    Hi Oliver.

    Great stuff I’ll keep an eye out for the update and apply it then.

    Much appreciated.

    Mike.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.