My changes to the Freshy WordPress theme

I’ve had some questions about my changes to Jide’s Freshy theme and thought that I should comment on them so that others can use them if they want (in true open-source manner of course :) ). Bear in mind though that I am NOT a web developer in anyway, so there could be – and probably are – better and more correct ways to write the CSS, but it looks ok in the browsers I’ve tested using BrowerShots.org.

I can’t recall exactly everything that I changed, but I basically changed the following:

  • sidebar (used some of the style from Bosco theme)
  • sidebar calendar (used some of the style from Contempt theme)
  • date output for posts and paged
  • separator between posts

Sidebar

Bosco theme, which was the my #1 pick prior to Freshy, had a sidebar that I really liked so I just had to get.

Complete modified CSS: here
Sidebar background GIF: here

Had to explicitly use the id for the different widgets since sidebar widgets don’t use div tag in a standardized way.

#sidebar {
font-size:.9em;
}

#meta,
#categories,
#pages,
#yammyamm-menu,
#recent-posts,
#recent-comments,
#peters-date-countdown,
#calendar,
#scrobbler,
#links {
background: #eee url(images/sideboxbg.gif) top left repeat-x;
padding: 25x;
margin: 5px;
border: 1px solid #ddd;
}

#sidebar ul,
#sidebar ol {
padding:0;
margin: 0px 10px 0 15px;
}

#sidebar form,
#sidebar p {
padding:0;
margin:0 0 1em 0;
}

#sidebar h2 {
padding: 4px;
margin: 5px 5px 5px 5px;
font-size: 0.95em;
font-weight:bold;
/*	text-transform:uppercase; */
color:darkgray;
text-align: left;
}

Sidebar Calendar

Used the calendar style from Contempt. Initially, I had some tricky problems with it not being viewed correctly in IE6 (much larger text, not centered etc). After banging my head with the IE6 issue for quite some time I felt like just dropping the issue – after all I’m Firefox guy :) Luckily, I got some help in the WordPress IRC channel – thanks!

#calendar { /* IE */
text-align: center;
}

#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
font-size: 0.9em; /* ie */
text-align: center;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
font-weight:bold;
color:black;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff;

Date Output Format for posts and pages

I did not like the original Freshy date output format for posts and pages since

  1. one more or less had to look for it (to the right of each post) and
  2. it was hard to read the top-down, different-size and different-style text

So, I changed it to something very basic; simple (“December 12, 2006″) immediately under the blog post. For regular pages I changed so that the page’s last update date is shown (e.g. “Last update: October 9, 2006″). The change included some minor changes to the php code get the basic output that I wanted and some even more minor changes to the CSS. I also seem to recall that Freshy didn’t make use of the “Default date format” WP option (not entirely sure!), but I hard-coded the date format that I wanted. Have a look at the generated html code to see what the slightly changed html looks like (preferably using the great View Source Chart Firefox extension) and let me know if you need the php code as well.

15 thoughts on “My changes to the Freshy WordPress theme”

  1. can you help me, i’m looking on to how to replace in the main menu, categories instead of pages, another thing… is in Freshy 1. I’ve seen that you know very well your way with the Freshy theme, please!! can you helpme!!

  2. @bluepanjeet: It was along time ago when I did this so I can’t recall the details. My advice is for you to compare the source code between my mod and the original Freshy theme. I did some minor changes in the html code as well as in style.css.

  3. hi jim. i’m also using freshy theme. I noticed that you changed your date output on post. can you tell me and give me (if there’s any) information on how to change this. The current date output actually gets in the way of my photos and videos.

    I will very much appreciate it if you will reply. thanks again jim.

  4. Hi,

    No, I haven’t made anymore relevant changes to it. I moved out some personal stuff from my theme (e.g. Technorati stuff), so I should be able to create a zip/tarball of the freshy theme catalog now for others to use.

    However, I saw something recently on the single post page that I don’t like.
    The part which contains Actions, Informations and x responses it a bit to big and gray (see top of on this page – immediately after the actual post). I’m going to change that so it plays well with the rest of the theme.

    Have anyone had any experience with the Freshy theme (or my mod of it) and WordPress 2.1? I’m quite curious to hear if there have been any issues.

  5. Jimi –

    Hope all is well with your training. Just curious if you made any updates to ‘Freshyola’ and (this could be answered by jide, too) — how do I remove (and add) items to the main menu bar in the theme? I don’t want it automatically adding my pages to it, either.

    thanks,
    PLG

  6. Well, it took me a while to figure out what Jide had done as well :)

    I’ll try to create a zip file of the my branded Freshy theme during the weekend (X-mas means free time and free time means more time for hacking – right?) and provide it here.

  7. JS –

    No worries…I’m just sitting here scratching my head on how you corrected the date thing with the posts LOL

  8. Jide,

    Thank you for your fine words. Don’t know about the professionalism, but stubbornness often helps :) Also, bear in mind that I had a good original to work with thanks to you.

    Of course, feel free to add it to your site! I don’t know if I’ll be able to help people if they have problems since I’m really not a XHTML/CSS kinda-guy…

    I have one thing that has been on my todo-list which I really want to fix before it’s added to your site. I want the theme to output time as well for blog posts since it is not uncommon for bloggers to have more than one post a day and it helps readers to know when it was posted.

    How do you want to make it available on your site? I guess a tarball/zip would be best since I’ve done some changes to some php files as well. Let me know if you want me to change the name of the theme slightly (i.e. “Freshy” something) so that people can differ the two if they report bugs etc.

  9. Hi Jimisola. Waoh ! What a nice mod ! And code is so clean ! I should put this version on my blog for those who like it, since this one is really professional. Are you okay for this ? (i bet yes)

Leave a Reply