How to make a custom box

Check out the “your tool box” box on the left sidebar. It’s a custom box I created with css that I placed in a text widget. This is how I created it.

Go to Dashboard —-> Appearance —->Widgets

I chose Sidebar 1 from the drop down menu

I added a text widget to the sidebar by clicking on “add” next to “text” I opened the text widget and inserted the following code…

<div id=”box1″> <h2>Your Tool Box</h2> <ul> <li class=”crayonImageHome”><a href=”http://www.febooti.com/products/iezoom/online-help/online-color-chart-picker.html”  title=”cool color picker app”><img src=”http://www.thesishacker.com/wp-content/themes/thesis/custom/images/colorchart.jpg” alt=”crayon image” />    </a></li>
<li class=”firebug”><a href=”http://getfirebug.com/”  title=”ananlyze code easily with this app”><img src=”http://www.thesishacker.com/wp-content/themes/thesis/custom/images/firebug.jpg” alt=”firebug image” />    </a></li>
<li class=”firefox”><a href=”http://www.mozilla.com/en-US/firefox/”  title=”The best browser for web development”><img src=”http://www.thesishacker.com/wp-content/themes/thesis/custom/images/firefox.jpg” alt=”firefox image” />    </a></li>
<li class=”aptana”><a href=”http://www.aptana.com”  title=”The best free code editor for all your needs”><img src=”http://www.thesishacker.com/wp-content/themes/thesis/custom/images/aptana.jpg” alt=”aptana” />    </a></li>
<li class=”smallhookmap”><a href=”http://www.thesishacker.com/?page_id=298″  title=”A map that shows where all the hooks go”><img src=”http://www.thesishacker.com/wp-content/themes/thesis/custom/images/smallhookmap.png” alt=”hookmap” />    </a></li>
<li class=”w3logo”><a href=”http://www.w3schools.com/default.asp”  title=”Learn web development here”><img src=”http://www.thesishacker.com/wp-content/themes/thesis/custom/images/w3logo.png” alt=”w3logo” />    </a></li> </ul> </div>

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*tool box */
.custom #box1 {
width: 11.4em;
position: relative;
padding: 1em;
background-color: #eeeedd;
margin-left: -.77em;
margin-top: .3em;
}
.custom #box1 ul {
margin:0;
padding: 0;
list-style: none;
}
.custom #box1 h2 {
text-align: center;
margin-bottom: 0.5em;
font-size: 1.5em;
}
.custom .crayonImageHome { margin: .5em 0 .5em .7em;}
.custom .firebug { margin: .5em 0 .5em .8em;}
.custom .firefox { margin: .5em 0 .5em .7em;}
.custom .aptana { margin-left: 2.3em; margin-bottom: -.5em;}
.custom .smallhookmap { margin-left: 3.3em;}
.custom .w3logo { margin: -1em 0 0 0em; }

Tagged as: box, custom, custom.css, custom_functions.php, function, hook, hook map, how t make a custom box, html, php, thesis open hook