Karlonia.com
For Gold, Peace, and Freedom

Karlonia.com

Independence Day Theme Installed

July 4th, 2007

As you have probably noticed by now, the visual theme of the site has changed. The new theme is called “Independence Day” and was created by JTk (yes, that is how he spells it) at imjtk.com. This seems like a good choice for now since it happens to be July 4th and I have been searching for something other than the default theme that I could easily use but still modify to my liking later.

I have already managed to make some slight modifications to the sidebar by removing some of the redundant text for the category titles (such as “Blog Entries”, “Blog Categories”, “Blog Archives”, etc.) and removing unnecessary links in order to conserve page rank and make the page look less cluttered. Fortunately, I can still change the theme to something else later if people don’t like it, but for now it makes a good “experimental” theme that allows me to figure out how to make simple modifications to the code and design, yet still stand out enough from all of those default-themed blogs to get noticed.


10 Responses to “Independence Day Theme Installed”

  1. comment number 1 by: Mom

    Are your fonts showing up as a little small or is it just my browser?

  2. comment number 2 by: Karlonia

    Yes, the font size does seem a little small. This is one of the first things that I want to change as soon as I figure out how to do it. I also wouldn’t mind changing the font type itself to something that people would find pleasing to read. I was thinking about something similar to the style that Claire Wolfe uses on her blog.

    By the way, you should be able to preview your comments before posting now. I’m trying out a new plugin.

  3. comment number 3 by: JTk

    Yes, that is how I spell it :)

    If you want to change the font for the post, open up style.css and locate the .entry section and increase the number for the font size.

  4. comment number 4 by: Mom

    First just change font size - type of font might be ok - let’s see size change first. Contact Cork tomorrow-easy redo.

  5. comment number 5 by: Karlonia

    I did as JTk suggested and went into the theme editor, opened style.css and found a .entry section. There are two lines in this section that currently read:

    font-size: 13px;
    margin-left: 15px;

    I tried increasing the font-size number in small increments, saving the changes, and looking at the site, but there does not seem to be any noticeable effect even after going as high as 18px.

    Unfortunately, I’m still in the “clueless newbie” stage with some of this stuff, so it’s possible that I am overlooking something obvious. But as long as I can keep my brain functioning reasonably well, I should be able to figure this out eventually.

  6. comment number 6 by: Clark

    I would suggest you to increment the font-size by 10 or 20 each time, saving the changes, and looking at your site. Changing the font from 13px to 18px will not make much of a difference, because 1 px is equal to one point or pt. One pt equals to 1/72 of an inch. For example, the title at the top of this site, “Karlonia.com” has a font size of 40px, so it would be better if you could try 20 or 25px for the body of the webpage. Simply open your style.css and edit the “.entry” section to a different font size.

    Also in your CSS code,

    #blog_slogan {
         position: absolute;
         left: 50px;
         top: 70px;
         color: #344480;
         margin: 0;
         padding: 0;
         font-weight:bold;
         word-spacing: .2px;
         font-size: 10px;
         z-index: 12001;
         font-size: 13px;
         font-weight: bold;
    }

    You set the font-size twice. One being the 10px and the other is 13px. By default the browser will use 13px font size because the font-size: 13px; comes after the font-size: 10px;. It is a good practice to keep the code clean and initialize your font size once within your “#blog_slogan {…}”.

    One other suggestion… When leaving a reply, I noticed how the textbox area seems too small to work with. When you can, try and have the textbox to span 100% in width so that it will be wide enough view but not overlapping the right margin.

    Enjoy,
    Clark

  7. comment number 7 by: Karlonia

    I tried editing the .entry section again for larger increments of font sizes, this time going all the way up to 40px. There is STILL no difference at all, so perhaps there is some other line of code that needs to be changed.

    I did remove that redundant line of code (font-size: 10px;) in the #blog_slogan section and kept the line for 13px. This was a good find.

    I understand what you mean about the text box width; I will try to fix this later if I can figure out exactly what I need to edit. Right now I am still trying to catch up on the content and don’t have much time to mess around with this, but thank you for your suggestions!

  8. comment number 8 by: Karlonia

    Update: I have managed to fix the issue with the text box width. I went into comments.php and found the “textarea” line that seem to control the parameters for the text box area. I have increased the “cols” figure to 72% (from 50%) and increased the “rows” figure to 16 (from 6). This took some tweaking around with the numbers, but it seems to look much better now and gives us more space to view the comments.

  9. comment number 9 by: Frequent reader

    Checked in IE- text appears larger. Suggest Cork check code - why not working in Firefox?

  10. comment number 10 by: Karlonia

    You probably checked it during the period when I was changing things. I have been tweaking fonts, sizes, etc. for the last hour or so. It has been giving me lots of headaches, but I think that I am finally figuring out some things through the old trial and error process.

    Apparently when I was increasing the font size before in the .entry section it was actually working, but only displaying initially in the IE browser. I never even thought to check this before because I don’t really use IE anymore. After I discovered that the changes were actually making a difference in IE, I went back to Firefox and refreshed the page, and then the changes magically appeared in Firefox also!

    After that I just started tweaking everything font-related until I figured out which sections of the code controlled each area of text. I have the predominant font display changed from Trebuchet MS to Verdana (I think that it looks better, but this is usually a matter of personal taste) and increased the text size of everything that I could find code for except for the footer.

    I am reasonably satisfied with the way things look now as far as font goes, but we can always change it later. Right now I’m tired of messing with all of this and need to get to bed, but at least we seem to be making some progress.

Post Your Comments, Opinions, or Suggestions Here:

Name

Email (optional)

Website (optional)