Another 3-Column WordPress Theme

Posted on by

Whilst I’m in the mood, here is another three-column theme for wordpress. This one is ‘Journ­al­ized Sand’ and is almost the same lay­out as Journ­al­ized Blue.

Click­ing the thumb­nail below will show you a full size screen shot of the theme in action.
screenshot of journalized sand theme
You can down­load the files from here: journalized-sand-theme-1.0.2.tar.gz (tar ball for unix or sim­ilar users) or journalized-sand-theme-1.0.2.zip (zip file for Win­dows users).

To install simply expand the archive on your local machine. You should have a dir­ect­ory called ‘journalized-sand’. Upload the dir­ect­ory and the files within it to your wp-content/themes folder on your server. Login to your blog’s admin­is­tra­tion pages and go to the Present­a­tion page. The new theme should be lis­ted there ready for you to select. If not check the per­mis­sions on your uploaded files.

You will need to tweak it a little. Not least to change the link cat­egor­ies in the calls to wp_get_links().
Enjoy! The theme is licensed under the GPL. So you may modify it and dis­trib­ute it. Please let me know if you use it, modify it, etc. If you have any ques­tions leave a com­ment on this post with your ques­tion. Com­ments are mod­er­ated so you won’t see your com­ment immediately.

Update: The per­man­ent home of this theme is now http://zed1.com/journalized/themes/journalized-sand

94 thoughts on “Another 3-Column WordPress Theme”

  2. Simply drop­ping a note here to say that I like the look of the new 3 colum theme. There’s some­thing about the sim­pli­city and col­ors that I appre­ci­ate. My first impres­sion was a pos­it­ive one.

    After look­ing about a bit the second impres­sion is, “Where are the Pages?”. It doesn’t look like there’s an area in the menus for it, but, the design seems to sup­port enough room for simple changes.

    G’day,
    ~Mysk

    Reply ↓

  6. Pingback: Blogging Pro » Blog Archive » WordPress Theme: Journalized Sand

  7. Great theme, Mike. I just installed the sand ver­sion on a new, and exper­i­mental, WordPress, blog that’s not pubic yet and may never be. I’m using the Blog­ger and Mov­able Type blog engines on the fam­ily Blue Heron site. Since the philo­sophy and atti­tude of the Word Press folks appealed to me, I put it up in a folder on the web server. The exper­i­ence of installing it was slick and clear. And I’m also impressed by the ease of chan­ging themes. If I ever get around to re-organizing the web­site, I think I’ll use WordPress to run it.
    Thanks.

    Reply ↓

  9. Nice! Looks like you basic­ally made the very theme I was look­ing for. Good three column design, low on graph­ics, readable.

    I installed it five minutes ago, and the one thing I noticed on the neg­at­ive side is that you for­got to call the wp_footer stuff. (I keep some import­ant links there.) I just added the <?php do_action('wp_footer'); ?> to index.php to get it right.

    Reply ↓

  10. Hi Johan,
    I’m glad you like the theme. It was ori­gin­ally a pre-1.5 theme (in fact it came from my b2 days), so it didn’t have that call in there. I’ll update it the next time I get a chance.
    Thanks,
    Mike

    Reply ↓

  11. hi, mike, great theme, im new to the blog world. any­ways, i decided to use yours. my ques­tion is this, in Fire­Fox it looks great, but in IE the cen­ter boxes over­lapp all the righ column boxes, how do i cor­rect this?

    thanks for your time.

    jimmy.

    Reply ↓

  14. Jimmy,
    I’ve dis­covered what is wrong. You site meter image is for­cing the right hand column to be too wide. If you remove or reduce the width of that image the prob­lem goes away.

    Mike

    Reply ↓

  16. Pingback: How To Blog

  17. Pingback: PigPog Blog » Blog Archive » PigPog’s New Colours

  18. Hi! I just wanted to take a moment to say thanks for Journ­al­ized Sand! I make my liv­ing as a type­set­ter and pre-press pro­duc­tion per­son, and I wanted a lay­out that was “news­pa­per­ish” in keep­ing with my print pub­lish­ing bent. Sand was just right and it was also in col­ors that I liked, so I loaded it up. I made a few moves of items but basic­ally I’ll keep it just the same – it’s the blog­ging I’m inter­ested in doing and not mess­ing around with the lay­out and such. Of course now that I’ve been tweak­ing at it, I haven’t actu­ally writ­ten any­thing yet. :/ Keep up the good work and thanks for mak­ing exactly what I was look­ing for.

    Reply ↓

  25. Hey Mike,
    Thanks so much for the hard work that I’m guess­ing went into design­ing these themes. They’re unique, clean, and they look great!

    I’m a kind of a dummy and was at a loss as to how to cre­ate more space between para­graphs in the con­tent area. Any advice would be greatl appreciated.

    Cheers…

    Reply ↓

  26. How do you insert space between the colum­nns for your three-column theme? Is it with the “Rap” in the CSSS? Or some­where else? Thanks for your response.

    Reply ↓

  28. JS was my first and only choice when I swtiched from blog­ger to wordpress. I’ve made a green­ish gray theme out of it and my views like it MUCH better.

    I do have an issue with pho­tos though. The blocks in the cen­ter don’t seem “smart” enough to size them­selves for pho­tos. In other words if there is a bunch of text in the block it works fine, but if there is just a photo the photo extends to out­side of the block and is cut off. Is there a fix for this?

    Reply ↓

  29. Still tweak­ing my JS.

    1) I got the header to dis­play a masthead graphic but the graphic doesn’t appear on the indi­vidual post (com­ment) pages.

    2) MSIE messes up “img src align=” com­mands which I like to use to wrap text around images in my posts. It briefly dis­plays the image but then hides the image behind the grey of the post body. Works fine in FF. I’ve tried style=“float: left;” stuff and that doesn’t work, either.

    Reply ↓

  30. Aaron,
    Another user, Kevin, solved that prob­lem (which only hap­pens in IE) here.

    Basic­ally add

    .storyContent img {
    position: relative;
    }

    to the style sheet.

    Mike

    Reply ↓

  33. Pingback: PigPog Blog » Blog Archive » WordPress Upgraded to 1.5.1.1

  34. Pingback: blogats » | Plantillas para Wordpress 1.5 [Wordpress templates, styles]

  35. I need some help please.
    I have been try­ing to use some css to have text wrap arround images, then in IE, the images do not show at all. Does any­body else have those prob­lems? What can I do to get this to work?

    Thank,
    Steve
    GeekTavern.com

    Reply ↓

  36. Hi Steve,
    This is a bug in IE, but there is a solu­tion: add

    .story­Con­tent img {
    pos­i­tion: rel­at­ive;
    }

    to the style sheet.

    I’m very close to releas­ing updated ver­sion of all my themes with this fix and sev­eral oth­ers. Look out for them over the next couple of days.

    Mike

    Reply ↓

  40. I love your Journ­al­ized Sand, and am try­ing to modify it, but am hav­ing prob­lems. Basic­ally I would like to remove the left column, expand­ing the con­tent to cover both areas, and then adding the former left column to the right of the cur­rent right column, such that the viewer has to scroll right to access that column.

    Is that pos­sible, and if so can you give me some point­ers? I have gone through UrbanGiraffe’s pro­ced­ure for modi­fy­ing a theme (http://www.urbangiraffe.com/2005/04/12/themeguide1/1/) but he uses float:left or right, and you use position:relative and position:absolute.

    I dont under­stand how relative/absolute work. When I try mak­ing the columns float, they drop to the bot­tom under­neath the content

    Reply ↓

  41. Hi Don,
    I’m glad you like the theme.

    The positon­ing of the three journ­al­ized themes is done with abso­lute pos­i­tion­ing for ver­tical loc­a­tion and mostly left/right mar­gins for hori­zontal pos­i­tion­ing.
    I know it’s not ideal, but at the time I think it was the only way. The ori­ginal was cre­ated when IE5.0 and NN4 were current!

    Any­way, I had a quick play and it’s pretty easy to do what you want. Start­ing with the latest Journ­al­ized Sand make the fol­low­ing changes to style.css

    line 264, rule #left­side
    change
    left: 20px
    to be
    right: -178px

    Then change all the 190px to be 10px in the mar­gin set­tings:
    line 38, rule h2
    line 121, rule #head­erb­lock
    line155, rule .center­eb­lock, .nav­ig­a­tion
    line 169, rule .nav­ig­a­tion (hmmm… duplic­a­tion here)
    line 215, rule .nav­ig­a­tion (more duplication!)

    Hope this helps,
    Mike

    Reply ↓

  43. If you are inter­ested, http://www.bushsupporter.org/wordpress/ is the cur­rent work in pro­cess. I still have a lot more to do on it. One thing that cur­rently has me stumped is that I can’t seem to change the size of type for the title of a post. I don’t know whether case is sig­ni­fic­ant or not. One place it seems to be story­Title and in another case story­title, but I have tried mak­ing it con­sist­ent, and it still does not change.

    Reply ↓

  46. Hi Don,
    There isn’t a spe­cific rule for story titles, so they are inher­it­ing the gen­eric set­ting for links.

    Rather than change that set­ting, I think it would be bet­ter to cre­ate a new set of rules for these. Try these:

    h3 a:link { font-size:16px; }
    h3 a:visited { font-size:16px; }
    h3 a:hover { font-size:16px; }
    h3 a:active { font-size:16px; }

    Mike

    Reply ↓

  47. What is
    .story­title {
    font: bold 28px verd­ana, arial, hel­vetica, sans-serif;
    mar­gin: 0px 0px 5px 0px;
    pad­ding: 0px;
    }
    .storyC­at­egory {
    font-weight: 400;
    mar­gin: 0px 0px 5px 0px;
    pad­ding: 0px;
    }
    .storyAu­thor {
    font-weight: 600;
    mar­gin: 0px 0px 5px 0px;
    pad­ding: 0px;
    }

    Notice I increased your 14 pt in story­title to 28, but it did nothing

    Reply ↓

  48. Don,
    .story­title (it should be lower­cased) is applied to the h3 in which the story title sits. How­ever for font siz­ing, the fact that it is an anchor brings in the anchor rule.
    So the rule for ‘h3 a’ will over­ride font set­tings for h3 with class story­title. But the mar­gins, for example, of the whole head­ing are still dic­tated by the .story­title rule.
    This ambi­gu­ity stems from the fact that the title of the post didn’t used to be a link in my ori­ginal theme. I changed this to be more WP stand­ard after 1.2, but didn’t fol­low everything through.

    .storyC­at­egory is no longer used in the theme and can be removed.

    .storyAu­thor is still used by the span sur­round­ing the author name.

    I’ll have to fix all these issue in all three themes and re-issue them soon.

    Thanks,
    Mike

    Reply ↓

  50. Pingback: The Politburo Diktat

  51. Pingback: The Politburo Diktat » Blog Archive » Carnival of Journalized Sand

  55. I am not a very smart pro­gram­mer, but i would like to add fam­ily links and favor­ite links on the right side. Could you help me get star­ted? I think the theme is awesome!

    Reply ↓

  58. Pingback: http://www.abdrohim.com » Blog Archive » Ganti Themes

  59. Hi!

    I have been using you theme for a while now, but I made some modi­fic­a­tions (some are a little but stu­pid…) and wanted to know where can I change the “(more) tag when using <! – more – >

    Other thing, in the “archives” part, the points before each mnth are out­side the column (mine is in the left) BUT in only hap­pens in Fire­Fox :S is there any­thing I can do?

    Thanks for the theme :)
    Alejandro

    PS: If you dont aprove the changes in your theme, let me know I will undo them :)

    Reply ↓

  60. Hi Ale­jandro,
    To change the word­ing of the more link you need to change the call to the_content() in index.php. You can use some­thing like:

    <?php the_content(‘read more of this art­icle…’); ?>

    Your site is down at the moment, I can’t dia­gnose your archives problem.

    As for changes you are wel­come to make changes, as long as you keep to the terms of the GPL. See the licence.txt file for details.

    Mike

    Reply ↓

  64. Hi Mike,

    I added the fol­low­ing to my stylesheet, but am still hav­ing issues see­ing images in my posts when view­ing with MSIE…any sug­ges­tions would be greatly appreciated.

    .story­Con­tent img {
    pos­i­tion: rel­at­ive;
    }

    Reply ↓

  68. Pingback: Greater Falls, Montana! » Site Update

  70. Hi Brian,
    As far as I know, my themes are com­pat­ible with 2.0, at least they were with an earlier beta I tested.
    The next ver­sion of the themes will incor­por­ate some new func­tion­al­ity based on 2.0. I’m work­ing on those now.

    Mike

    Reply ↓

  74. Down­load, installed. Looks good. BTW, any advice regard­ing edit­ing, place­ment of tags, code, javas­cript, html, or any thing of that sort. Or do you have gen­eral guidelines applic­able to most any Word Press theme.

    Warn­ing. My new edi­tion of Myth­us­mage Opines is going through playtest­ing, so it may have prob­lems from time to time.

    Reply ↓

  76. OK – I deleted the post that screwed it up and have repos­ted it without any prob­lems. If you have any more sug­ges­tions, I’ll take them as I am new to all of this. Right now, I’m all right. Thanks

    Reply ↓

  77. Now they are back again. I’ve determ­ined that one post screws it up and it’s not the same post. It is about the same sub­ject, but I don’t know what I am doing to force this to occur. Even if I straighten it out this time, I need to be reas­sured, it won’t hap­pen again.

    Reply ↓

  78. Hi Jacques,
    The prob­lem is in the “enron trial” post. Part of the way through is there is the para­graph which starts
    Berky even­tu­ally “passes the wit­ness”
    Just after that there is some really weird HTML which starts a script tag and then an open com­ment tag.
    Just before that there is, I think, an extra div tag which messes up the rest of the page.
    Also in Fire­fox the con­tent appears twice in the post.

    I pre­sume you are using copy and paste to paste your stor­ies into the blog from some­where. Basic­ally the HTML your are copy­ing is pretty poor, and if you copy just the wrong bit, e.g. miss­ing a clos­ing tag or some­thing, you get the prob­lems you are seeing.

    Reply ↓

  79. Mike
    I wish I could clone you and have you move in. Thanks loads. As you can see, not know­ing html is the pits.

    By the way, I think your lay­out is the best.

    Jacques

    Reply ↓

  81. Hi, Mike.

    I found your journalized-sand theme via alex king’s site a few months ago. Since I star­ted using it, I’ve received many com­pli­ments on the layout.

    I thought you’d appre­ci­ate know­ing there’s another sat­is­fied journalized-sand blog­ger so I found my way here to say ‘thank you.’

    That’s when I dis­covered that I’ve been using v1.00 and you’ve had a v1.0.2 out for some­time! I down­loaded the more recent ver­sion and have star­ted port­ing my older ver­sion over to the newer one.

    Not many things to do, really, but I was con­cerned because I’ve moved some of the left– and right-column ele­ments around a bit. I’ve also added just a bit of color to the h2 and h4 back­grounds; not enough to lose the essence of the ‘sand’ theme but enough to give it a cer­tain eye-appeal.

    Expect to be fin­ished with my port before day­break tomor­row and have already real­ized the bene­fit of your nav­ig­a­tion tweak to dis­tin­guish between single-post nav­ig­a­tion and reg­u­lar navigation.

    Thanks again for all the time and energy you’ve inves­ted in this theme!

    Reply ↓

  82. Pingback: Wat ta Blog! :: Some themes .. 3 Columns .. :: September :: 2006

  83. Pingback: Staffan Malmgrens blogg » Blog Archive » Switched over

  85. Pingback: Wordpress Column Themaları Önizlemeli 30 Adet & LugatSoft

  86. Pingback: WORDPRESS GOD:300+ Tools for Running Your WordPress Blog

  87. Pingback: 300+ Popular Plugins for Running Your WordPress Blog

  88. Pingback: Web Design Blog » 30+ WordPress 3-Column Themes

  89. Pingback: 30+ WordPress Beautiful 3-Column Themes for wordpress | INtellionics - Seo Services Company India

  90. Pingback: dyohanan.com » Great Tools To Use With Your Wordpress Blog

  91. Pingback: Site Template » Blog Archive » mm

  93. Pingback: 300+ Tools for Running Your WordPress Blog « Itz all neu

  94. Pingback: Free 3 Column Wordpress Themes | waysaroundit.com

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>