Title: Nice Code blocks
Last modified: August 21, 2016
---
# Nice Code blocks
* Resolved [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/)
* Hi
I am looking for a way to add code to my blog.
* I would like a nice light grey background something similar to this website but
lighter to match my site.
* [http://www.unixnote.com/2010/06/how-to-mirror-root-disk-with-solaris-volume-manager-svm.html](http://www.unixnote.com/2010/06/how-to-mirror-root-disk-with-solaris-volume-manager-svm.html)
* My site is
* [http://www.unixtips.net](http://www.unixtips.net)
* On this post I have the markdown the way I want it using ` `.. copy past works
without any issues I just want the grey box with a border.
* [http://www.unixtips.net/2009/02/25/mem-hog/](http://www.unixtips.net/2009/02/25/mem-hog/)
Viewing 10 replies - 1 through 10 (of 10 total)
* Thread Starter [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159922)
* I found some plugins but it seems like overkill for waht I want to do.
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159923)
* You can generally do that using custom CSS (using the existing mark-up or adding
a class) or possibly look at using a plugin for posting code…
* [Webb7](https://wordpress.org/support/users/webb7/)
* (@webb7)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159925)
* Appearance – Background and change it there?
Or am I thinking this is too simple?
* Thread Starter [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159943)
* I have seen plugins but it seems like overkill for what I want to do. Plus the
plugins I found done do the “grey” back ground in the block code.
* I will keep looking.
* [Dave Naylor](https://wordpress.org/support/users/wpranger/)
* (@wpranger)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159947)
* I live edited your site in Firebug. Wrapping your content in
`
`
tags then changing the text color to #000 makes it looks like this screengrab:
* [http://screencloud.net/v/bbxJ](http://screencloud.net/v/bbxJ)
* Most of the code to do that is already in your theme’s stylesheet, look for:
* ```
pre {
...
}
```
* and then simply change the color as above.
* Thread Starter [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159949)
* Hi WPranger
* I think you were on while I was making changes. I added the following code and
that converted posts that have the
* into the blocks.
* I am still trying to strip it down a little I dont think I need all of those
options.
* ```
/* WP */
code {
color: #000000;
clear: both;
font-family: "Courier New", Courier, monospace;
}
pre {
display: block;
border: 1px solid #CCCCCC;
background-color: #f7f7f7;
color: #000000;
padding: 6px;
margin: 12px 0px;
clear: both;
font-family: "Courier New", Courier, monospace;
}
blockquote{margin:20px 10px 10px 5px;border-left:4px solid #DDD;padding:0 5px 0 5px;font-size:9px;text-align:justify;}
.commenttext blockquote{border-left:4px solid #B6B6B5;}
.wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;}
.wp-caption img{border:none;margin:0;padding:0;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;color:#111;margin:0;padding:0 4px 5px;}
.alignleft,img.alignleft{float:left;margin:5px 10px 5px 0;}
.alignright,img.alignright{float:right;margin:5px 0 5px 10px;}
.aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;}
abbr, acronym, span.abbr{cursor:help;border-bottom:1px dotted #000;}
table{margin:.5em 0 1em;}
table td,table th{text-align:left;border-right:1px solid #414246;padding:.4em .8em; color: #CCCCCC;}
table th{background-color:#1f2225;color:#fff;text-transform:uppercase;font-weight:bold;border-bottom:1px solid #35383d;}
table td{background-color:#3f4248;}
table th a{color:#d6f325;}
table th a:hover{color:#fff;}
table tr.even td{background-color:#2f3136;}
table tr:hover td{background-color:#25272b;}
table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;}
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
img.wp-smiley{border:0px;vertical-align:middle;}
```
* [code fixed by moderator]
* [WPyogi](https://wordpress.org/support/users/wpyogi/)
* (@wpyogi)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159950)
* Please make sure you are using the code buttons, not blockquote for posting code
here :).
* Thread Starter [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159951)
* opps
* After I added the code above everything that had the
* `
`
* Got converted.
* Thread Starter [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159952)
* ```
/* WP */
code {
color: #000000;
clear: both;
font-family: "Courier New", Courier, monospace;
}
pre {
display: block;
border: 1px solid #CCCCCC;
background-color: #f7f7f7;
color: #000000;
padding: 6px;
margin: 12px 0px;
clear: both;
font-family: "Courier New", Courier, monospace;
}
blockquote{margin:20px 10px 10px 5px;border-left:4px solid #DDD;padding:0 5px 0 5px;font-size:9px;text-align:justify;}
.commenttext blockquote{border-left:4px solid #B6B6B5;}
.wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;}
.wp-caption img{border:none;margin:0;padding:0;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;color:#111;margin:0;padding:0 4px 5px;}
.alignleft,img.alignleft{float:left;margin:5px 10px 5px 0;}
.alignright,img.alignright{float:right;margin:5px 0 5px 10px;}
.aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;}
abbr, acronym, span.abbr{cursor:help;border-bottom:1px dotted #000;}
table{margin:.5em 0 1em;}
table td,table th{text-align:left;border-right:1px solid #414246;padding:.4em .8em; color: #CCCCCC;}
table th{background-color:#1f2225;color:#fff;text-transform:uppercase;font-weight:bold;border-bottom:1px solid #35383d;}
table td{background-color:#3f4248;}
table th a{color:#d6f325;}
table th a:hover{color:#fff;}
table tr.even td{background-color:#2f3136;}
table tr:hover td{background-color:#25272b;}
table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;}
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
img.wp-smiley{border:0px;vertical-align:middle;}
```
* Thread Starter [rleon](https://wordpress.org/support/users/rleon/)
* (@rleon)
* [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159953)
* Thanks WPyogi ..
* You can delete the post where I added the code as code not block code.
Viewing 10 replies - 1 through 10 (of 10 total)
The topic ‘Nice Code blocks’ is closed to new replies.
* In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
* 10 replies
* 4 participants
* Last reply from: [rleon](https://wordpress.org/support/users/rleon/)
* Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/nice-code-blocks/#post-4159953)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics