Framing My Work

People love to frame things. When your son or daughter graduates from preschool or kindergarten what do we do with the diploma? We frame it. You may not notice it but most pages in a book have a frame around it. Maybe we call it a border, or margin, but nonetheless, it still frames the words on the page. So the next part of our TuKod (Atahualpa) WordPress project is to build a frame around our work. Make it stand up and stand out and say, “Hey, I am important, they even put a frame around me!”

To do this we will make a few more adjustments in our ToKod (Atahualpa) Theme. So let’s get started… By now you know how to get into your Theme Options page. Find the section called “Overall Style & Config.” and click on “Body, Text & Links”.

Body Style

The default in “Body Style” looks like this…

font-family: tahoma, arial, sans-serif;
font-size: 0.8em;
color: #000000;
background: #ffffff;

If you read my post on Choosing Website Colors (Money.M143.Net), you will know that I already created a table of six website colors to use, based on “Dollar Bill Green.” For my background I will choose the 2nd to darkest color, and I will use that for my links too. Not to worry! They will be seen! My Chart in that post says that number is #417721 so I will paste it into my background like this…

background: #417721;

On the same page I am going to find “Link Default Color” and paste the same 417721 number!

Wow! A lot of stuff turned green (or whatever your color is) and the links in your main center page disappeared (unless you mouse over them). Not to worry, this will all change soon enough. This is your background color and it is bleeding through, we will change that, but first, let’s add a little space to the top and bottom while we are here. Still in “Body Style”, add…

padding-top:20px;
padding-bottom:20px;

This gives us just a little more space at the top and bottom. You can choose a different number than 20px to make your space larger or smaller…

Now I do not care for tahoma font and I choose to use a fixed font size rather than an em size. I’d like a little more space in my line-height and since I am building a frame, I want to center what is in it… So this is what I am using in “Body Style”…

font-family: verdana,arial,sans-serif;
font-size: 13px;
color: #000000;
background: #417721;
text-align: center;
margin: 0;
padding: 0;
line-height: 1.4;
padding-top: 20px;
padding-bottom: 20px;

Link Decorations

At the bottom of the “Body, Text & Links” page there are options to set how your links appear. Change what you like. Except for “Link Default Color” which I set to 417721 above, I chose to go with all the defaults.

“Style & configure LAYOUT”.

Right below “Body, Text & Links” click on “Style & configure LAYOUT”. This is where we will start to see our frame appear and colors start to take place the proper way…

Layout Width

We are going to adjust “Layout WIDTH and type (FLUID or FIXED)”. The default value is “99%” One of the suggested values is “92%”. Try different values! Set a value and then see what happens to your webpage when you view it. Set the value, “Save Changes” and then view your site (I keep my site on a different tab so I can easily switch there and reload the page! In fact, I have the Theme Options on one tab, this Post Editor on another tab, and the normal website on still another tab, just for ease of work!)

I think I will go with 95%

You will notice that the “Layout WIDTH and type” just changes the space on the right and left of your work, this is the start of your frame for your work.

At this point I have a green border all around my work, but my page is still an ugly green (or whatever background color you chose).

Layout Container Style

Scroll down the same “Style & configure LAYOUT” theme options page until you find where it says “Layout Container Style”. We are going to modify some CSS here… The default says…

padding: 0;

Obviously that will not do! To see what it would do, I changed it a lot…

padding: 20px;

20px, if you recall, is the same as I used above. Now I have a nice big border around my whole webpage… Where my little border was before! That may be useful later…

So that I can see this padding, as opposed to the above, I changed the background color again, this is the background inside of the border we made above… Just add…

background: #FFFFFF;

Because #FFFFFF is actually “white” or can be shortened to #fff I could have written any of these, they are all the same…

background: #ffffff;
background: #FFF;
background: white;

WOW! Now you can see our frame taking place!

I will add a little box-shadow…

box-shadow: 0 0 15px #111;
-moz-box-shadow: 0 0 15px #111;

Now do a little house keeping…

width: auto;
text-align: left;
display: block;

Here is the final result for the “Layout Container Style”

padding: 20px;
background: #fff;
box-shadow: 0 0 15px #111;
-moz-box-shadow: 0 0 15px #111;
width: auto;
text-align: left;
display: block;

If you use a lighter frame color, you may also want to lighten the box-shadow to something like #333.

Layout Container Padding Left/Right

One final housekeeping chore is to tell the theme how much padding we used… Just go down towards the bottom and find “Layout Container Padding Left/Right” and add the padding from above… I put in “20” because the padding I used was 20px!

I’ve Been Framed!

Don’t forget to “Save Changes” and that will complete our frame. Our page is beginning to look quite a bit more professional.

Congratulations!

 

Leave a Reply

Your email address will not be published. Required fields are marked *