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.
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.