Publishing System Settings Logout Login Register
How to make a Codebox for your Wordpress Blog
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on February 9th, 2008
1422 views
Wordpress
To make a codebox it�s fairly simple, all you need to do is use a little css and make an image in Photoshop, or some program like that. So for making a codebox for your blog you need to know a little css and how to make a simple image im Photoshop� Here are the steps.

First create the css(you can copy and manipulate mine below), it will look like this below:


.codebox_wrap{
width:90%;
border-left: 3px #f5a100 solid;
border-right: 1px dashed #f5a100;
border-top: 1px dashed #f5a100;
border-bottom: 1px dashed #f5a100;
}
.codebox{
background: #fce9a6;
color: #69604f;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:100%;
padding-top:2px;
padding-bottom:5px;
text-align:justify;

}
.codebox_top{
background: #f5c200 url(*put link to background image here*) left no-repeat;
border-bottom:2px solid #f5b800;
width: 100%;
height:25px;
}
 


Now that you have the css done, put it in your stylesheet for your theme your using� (Just so you know, you need to create the image for the codebox_top, other wise it would be a plain color�. All you need know is the code to put in your post and here it is:

<div class="codebox_wrap">
<div class="codebox_top">&nbsp;</div>
<div class="codebox">
code
</div></div> 


And thats all you need to do�
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
ACDC

my blog that has tutorials and facts about things I do in my daily life...
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top