Code Block Styling in an Oxygen Builder Blog Post

February 7, 2021

With this blog, many times I will want to paste code snippets. Building the blog content and adding a code snippet is easy within the Gutenburg editor. When displaying in my Oxygen Builder Post template, the default code block styling was looking like:

The code in the middle is hard to differentiate from the paragraph text - top and bottom line in the image.

Oxygen does not provide a means to customise the code block styling from within the UI, but this can easily be changed within a stylesheet. I always create a 'CustomCode' stylesheet from the Oxygen 'Manage' menu:

I want to change the styling of the code block to make it stand out more and to change the code display font to Courier. Add this to your CustomCode sytlesheet:

.wp-block-code {
  border: 2px solid darkgrey;
  background-color: #E6E6E3;
  padding: 10px
}

code {
  font-family: "courier new";
  font-weight: 600;
  font-size: 16px;
}

and this is the result:

Much clearer I think you'll agree. Of course, you can vary the styling to get the right effect for yourselves.

UK Registered Company 13193470
10 Oakwood Court, Hartley Wintney,
Hampshire. RG27 8UR. UK
Copyright © 2023 Web X Design Studio UK Ltd
crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram