editing css within wp

I frequently use websites such as Stack Overflow and the Unix & Linux section of Stack Exchange. I like the way these websites format their code and this style is something I’ve also seen on several tech websites, when displaying either CLI input/output or parts of code are being shown.

The style and behavior of a website along with its content can be edited in a number of ways, one of the more popular choices being Cascading Style Sheets, or CSS for short. Using CSS practically all visual aspects of a website can be altered to suit the needs of the creator.

I did some research on the style I was looking for when I came across a few great articles, including CSS Style Pre Tags by Jeff Starr. The page is a detailed guide explaining how to create custom <pre></pre> tags with its properties changes using CSS. With some trial and error, I was able to implement and edit some of the examples presented on the website. The following describes my process of implementing this on my website:

Attempt No. 1

My first attempts were to try and edit the styles.css file of the theme. I hoped to achieve this by going to Appearance > Theme Editor > styles.css

I have tried to vary the CSS content for .pre / pre / code / .pre code, however it didn’t work at all in the way I had wanted. Since then I have removed the added line from styles.css.

Attempt No. 2

A bit of forum research indicated that a better option is adding custom CSS to the theme is a better choice. This feature can be located from the Dashboard: Appearance > Customize > Additional CSS

Using this option allowed me to paste in my custom CSS and see changes take place immediately on the website.

Even though the guide provided some examples, it was not quite what I was looking for. I wanted something similar to what he had used in his guide with <span style="code">, but implementing it with WordPress’ <code> tags. I had to do some digging through the article’s source code to find the location of the style.css file to get the <code></code> style working.

The 2nd attempt using the Theme customization has worked better and would be my recommendation to start editing and implementing style changes. Making changes within the Theme Editor may have severe consequences on the look and functionality of your website. I’m also adding my CSS customization for anyone who is interested:

pre {
	width: 100%;
	padding: 5;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 15px;
	line-height: 20px;
	color: white;
	background: #2E3436;
}

code { 
	padding: 3px; 
	color: white; 
	background-color: #2E3436; 
 	border-radius: 1px;
	vertical-align: middle;
}

Leave a Reply

Your email address will not be published. Required fields are marked *