Debt • Finances & Money • General

Web Tutorial: Creating Your Own Debt Scales

Many of you have asked me how you can create your own debt scales similar to mine (see the sidebar). I used to just refer you to the site where I got edumacated myself, but that site was surprisingly scrapped by the owners. Well I guess I’ll need to write out my own tutorial.

First, though, I’ll warn you that you need to be using WordPress as your blog platform, at least with my instructions. Also, you need to be familiar with editing your site’s template. You’ll be touching your style.css and sidebar.php files (or adding a widget if you use those). I’ll give you the starter code and tell you where to place it, but you’ll need to do the final formatting yourself.

Step 1: Inserting the Stylesheet Code (Style.css)

In WordPress, the stylesheet tells the web pages how to display the html tags, including colors, font sizes and even images. Thus, it’s where you need to insert the code that tells your scale how it will look.

Assuming you know how to edit your template (e.g. via your WordPress admin panel, click Design, then Theme Editor), edit the style.css file. At the end of the file, paste the following code (the stuff in bold) and then save the file:

/* Debt Meter Start
———————————————– */
.goals {
padding: 10px;
background: #363636;
border: 1px solid #616161;
margin-bottom: 15px;
}

.goals li {
margin: 0;
padding: 0;
font-size: .9em;
list-style: none;
color: #999999;
border-bottom: 1px solid #616161;
padding: 3px 0;
}

.goals li.first, .goals li.last {
border: none;
}

.goals li strong {
color: #ffffff;
}

.graph {
position: relative; /* IE is dumb */
background: #000000;
border: 1px solid #616161;
color: #ffffff;
}

.graph .bar {
display: block;
position: relative;
background: #D94616;
text-align: left;
height: 1.5em;
line-height: 1.5em;
font-size: 1em;
border-right: 1px solid #f5f5f5;
}

.graph .bar span {
padding: 0 .5em;
color: #ffffff;
}

/* Debt Meter End
———————————————– */

Step 2: Inserting the Sidebar Code

Assuming you want this file to appear in your sidebar, you’ll then edit your sidebar file (usually sidebar.php, right-sidebar.php or something similar). If you use widgets, you’ll just create a new widget that can just present HTML code and insert the following (the stuff in bold). Note that this code does not have a header, so you’ll want to create one for yourself:

Second Mortgage Start: $77,980
<div class=”graph”><strong class=”bar” style=”width: 89.91%;”>$70,033</strong></div>
<br/>——————–<br/>
<strong>Total Non-Home Debt Start: $112,890</strong>
<div class=”graph”><strong class=”bar” style=”width: 27.22%;”>$30,727</strong></div>
<br/>
<strong>Masters Degree Tuition: $5,000</strong><br/>
<div class=”graph”><strong class=”bar” style=”width: 50.26%;”>$2,513</strong></div>
<br/>
Student Loan (Mike) Debt Start: $19,733
<div class=”graph”><strong class=”bar” style=”width: 52.68%;”>$10,396</strong></div>
<br/>
Auto Loans Debt Start: $53,032
<div class=”graph”><strong class=”bar” style=”width: 63.67%;”>$17,818</strong></div>
<br/>
Original Credit Card Debt Start: $20,000
<div class=”graph”><strong>IT’S ALL GONE!</strong>
</div>

Step 3: Modify the Sidebar Code

I’ll assume that both your name isn’t Mike, nor do you have the exact same debt amounts and types that we do, so here are some tips for editing the sidebar code:

• Compare my code with my sidebar to see where to edit the text. For example, the text”Second Mortgage Start: $77,980” appears above the first bar graph.
• Copy everything from <div> to </div> and paste if you want more bar graphs.
• To edit the length of the line, change the width percentage. 100% means the bar will be completely colored.
• The last bar graph is different because I didn’t need to display any color. You can easily just leave the width at 0% if you want.

Step 4: Modify the Stylesheet Code (Optional)

I left this step for last because I wanted you to make sure your debt scales at least displayed properly first before you try to change up the colors. Now that it does show up properly, feel free to change how it looks, but I’ll leave it up to you to figure out which code will change what. That’s the fun of HTML programming…learning some stuff for yourself 😉