Change the Background of Code Snippets

Open 1 reply customization theme theme-vantage

7 years ago · Last reply by Alex S 7 years ago

Hi!

First of all, I want to say thanks for making an awesome plugin! I would not be able to build my blog without its intuitive interface and the awesome support offered at these forums.

However, I was not able to find an answer my question and was hoping you could help me out.

I have a blog post, which contains some R code snippets, you can access it via thislink.

I would like to change the background color of the snippet and remove the the gray outline around each line of code. I have already tried adding the following to Custom CSS of the Vantage theme, but none of them seem to work.

pre, code{
	text-align: left;
	background: #114b5f;
}
pre {
	background: #114b5f;
}
code {
	background: #114b5f;
}

Could you please help me find the disable the name of the element, so that I may customize it? It would also be great if I could make code prettify plugin to run.

Many thanks,
Kamran.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

.entry-content pre, .entry-content code { background: #114b5f; /* Other default styling */ font-family: "Courier New", Courier, mono; border: 1px solid #d9d9d9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09); overflow-x: auto; }

Replies

Alex S Staff 7 years, 10 months ago
Hi Kamran,
Thank you for the very kind words! :)
Unfortunately, I can’t seem to access the linked blog post, but that should be fine as the CSS below will work with the base Vantage theme so unless you have a plugin changing things, it’ll work.
If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
```
.entry-content pre, .entry-content code {
	background: #114b5f;
	/* Other default styling */
	font-family: "Courier New", Courier, mono;
	border: 1px solid #d9d9d9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
	overflow-x: auto;
}
```
You might also need to install the SiteOrigin CSS Editor.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.