fix double borders from thesis / wp-syntax css overlap

Been playing with WordPress recently, hence the deluge of WordPress-related “fixes”.

I’m using the Thesis theme (which kicks arse, btw), as well as WP-syntax for code highlighting within “pre” tags. Unfortunately, the css from WP-syntax and the standard css from Thesis don’t play together as nicely as I’d like. It’s not terrible, but since I have a minute I’m going to fix it. This is the way code snippets looked before:

I wanted to get rid of the extra border (actually the outer one created by WP-syntax, since I prefer the background color and border coming from the Thesis default css). While I was at it, I got rid of the extra margin from the WP-Syntax css that caused what I believed to be excessive space to show up below each code snippet, and also changed the font family and background color for the line numbers. To do all this, I added this into Thesis’s custom.css (and now this snippet, as well as all others on the site should demonstrate the way I want them to look):

.custom pre {
	font-family: monospace;
}
 
.custom .wp_syntax {
	border: 0px none #fff;
	margin: 0px 0px 0px 0px;
	background-color: transparent;
}
 
.custom .wp_syntax .line_numbers {
	background-color: transparent;
}
 
.custom td.line_numbers pre {
	background-color: rgb(221, 238, 255);
}

Quick and simple.

Cheers!

Tagged as: css, thesis, web, wordpress, wp-syntax