Category: Themes Toggle Comment Threads | Keyboard Shortcuts

Sometimes we have to dive deep into some scary code to make a theme or plugin do what we want. Here are some articles that deal with such things.

Keep in mind that software evolves fast and a tweak that worked a year ago may not work anymore today.

  • Jay Versluis 11:58 pm on June 14, 2011 Permalink | Reply  
    Categories: Themes, WordPress ( 25 )

    How to style the Motion Theme for WordPress 

    I had a closer look at this theme the other day when I made some upgrades on Nadia’s website.

    I really like the look and feel of Motion but I felt certain things were missing from this wonderful theme, such as drop down submenus.

    Let’s take a look at some tweaks and how you can make Motion your own.

    This article was written for Version 1.1.6 – these tweaks may not work in later revisions of the theme.

    (More …)

    • Marc 4:24 am on August 31, 2012 Permalink | Reply

      Jay, I am amazed at the length you go to supporting people that want to tweak the motion theme for wordpress, I love the theme and have tweaked several parts of it for my own site, however, I am scratching my head at one particular tweak i would like to achieve and wonder if you could help, I would like to make the menu buttons much darker than they are, I know they are filled with 1x1pixel images, would I need to edit them or would it be the opacity of them that needs altered? and if so how would i go about this? thank you in advance for your time πŸ™‚

      • Jay Versluis 11:34 am on October 8, 2012 Permalink | Reply

        Hi Marc,

        sorry about the epic delay – but better late than never. You have two options here: the first would be to tweak the actual image file (images/blacktrans.png) in Photoshop and make it as dark as you like. Then you upload it back to the server and see if you like your results. This image is used for other elements in this theme so you may get unexpected results.

        Alternatively you can give your buttons a different background colour in CSS. You’ll lose the transparency but perhaps that’s not a problem (your buttons would be solid black for example). To do this add the following code to the bottom of your style.css file:

        .primary_menu {background-color: black;}
        #top .top_menu li {background-color: black;}

        Hope this helps!

    • Marc 12:59 pm on November 22, 2012 Permalink | Reply

      hi just catching up with my emails lol, many thanks for the reply, after several attempts of editing the blacktrans.png and trying it out, i found that i did indeed lose transparancy in all tables etc, so i simply renamed blacktrans3.png to blacktrans.png, uploaded it and replaced with the original and got the effect i was looking for, thanks again πŸ™‚

    • Ben 8:16 pm on December 12, 2012 Permalink | Reply

      I’m trying to remove the page β€œtitles” from my Motion theme site and I was wondering if you could assist. I’ve been looking thru all kinds of forums on this topic and there are a bunch out there but not having luck finding any related to Motion theme. Not page names in top nav bar but β€œtitles” above the body.

    • Billkwando 11:49 pm on December 21, 2012 Permalink | Reply


      Could you tell me how to call up (and possibly darken/double up) the transparencies on text areas? I really like how this theme looks but posts and texts don’t seem to be benefitted by the darkened transparency (see link), so it looks like I’d have to darken my background image to compensate.


      • Jay Versluis 1:06 pm on December 23, 2012 Permalink | Reply

        Hi Billkwando,

        by default the theme uses the .posttop class to insert a translucent graphic behind each post:

        .posttop {
        background: url("images/blacktrans.png") repeat scroll 0 0 transparent;
        padding: 10px;

        You can soften the effect by adding an opacity parameter (like opacity: 0.5;) but you can’t make it stronger via CSS. The only way to do this would be to open blacktrans.png in an image editor and make it darker, then upload it back to the server. Or if you’re happy to lose the transparency altogether you can opt for a solid colour instead, like a near-black:

        .posttop {
        background: #111;
        padding: 10px;

        Hope this helps!

        • Billkwando 7:11 pm on December 23, 2012 Permalink | Reply

          As far as I can tell, it only shows behind the post title, not the actual post or page content.

    • Moda 3:25 pm on January 1, 2013 Permalink | Reply

      Motion is a good looking and functional theme. Thanks for the tutorial.

    • Marc 3:52 pm on February 11, 2013 Permalink | Reply

      Hi there I’m back with another wee question, how can I remove the big space between the top of my browser window and my header image to bring the header image up to the top of the window, I managed to get rid of the welcome message block in the header but i seem to be left with this space, thanks in advance πŸ™‚

      • Jay Versluis 4:01 pm on February 11, 2013 Permalink | Reply

        Hi Marc,

        this should do the trick, put it at the bottom of your style.css:
        #header {padding-bottom: 0px;}

        • Marc 11:07 pm on February 19, 2013 Permalink | Reply

          Hi Jay tried this and it made no difference at all, i tried setting all the values in the searchbox and submit button to zero but made a pigs ear of it, so i rolled it back, been fidgeting with it for a few hours and getting nowhere fast lol, 4am now, will try with a fresh head in the morning lol, will try completely removing all #top .top_menu – #top #search – #top .submitbutton and #header #logo stuff from my style.css tomorrow, because i dont use any of the features and never will, will i need to adjust my header.php if i modify the style.css in this way? thanks in advance

          • Jay Versluis 11:24 pm on February 19, 2013 Permalink

            Well you see, removing those elements from the syle.css won’t make them disappear. If there is anything you want to disappear which is currently being styled then you have to set it to display: none; then it will be hidden.

            You only need to amend theme files (such as header.php) if they are printing things out that you don’t want to see or items that are not styled and hence can’t be hidden via CSS.

            Sounds like you’ve got an adventure on your hands there – good luck!

    • Amanda 11:36 am on August 14, 2013 Permalink | Reply

      Hello! I hope you are still providing advice for this theme. This post has been very helpful so far.

      Is there a way for me to take that 50×50 pixel transparent image in the header, and make it large enough to be the entire header? Then, eliminate the text portion of the entirely? I’m making a site for a friend and wanted to use his name in a more stylized font as the header, and I created it as a transparent png, but I can’t seem to change the size from that default 50×50.

      • Jay Versluis 8:36 am on August 15, 2013 Permalink | Reply

        Hi Amanda, I guess there are several steps to what you’d like to do. First, replace a file called genericlogo.png with your own header file. It’s located in wp-content/themes/motion/images/. Make it as big as you like, but remember the dimensions. I’m making mine 70×400 for our example. This will repalce the “three-circle-graphic” in front of the text based title, but it won’t display at the right size just yet.

        Next add this code to the bottom of your style.css file to correct this. Replace the width and height values with the size of your own header image:

        #header #logo img {
        height: 70px;
        width: 400px;

        And finally, let’s suppress the output of the text based site title by adding this code just underneath in style.css:

        #header #logo h1, #header #logo #desc {
        display: none;

        Hope this helps!

  • Jay Versluis 9:05 am on April 7, 2011 Permalink | Reply
    Tags: buddypress, default theme   

    Categories: Themes ( 25 )

    How to style the BuddyPress Default Theme 

    Ray and I have been working on Livestatus, a status report system for television broadcasters. We decided that BuddyPress would be a superb platform to use for this and went with it.

    There aren’t many Themes available for BuddyPress so we went with the default theme which I think works best. However there’s still a lot of clutter we didn’t need so I made some quick amendmends.

    Here are my notes if you’d like to have a go.

    (More …)

  • Jay Versluis 4:03 am on January 7, 2011 Permalink | Reply  
    Categories: Themes ( 25 )

    How to style Modularity Lite 1.3 by GraphPaperPress 

    Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website

    My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.

    (More …)

    • Jade 2:08 pm on March 10, 2011 Permalink | Reply

      Thank you so much Jay ! You’re the man !!!

    • Jade 2:45 pm on March 10, 2011 Permalink | Reply

      Hi Jay,

      Do you know why the width of the table ony affects the first column ? The other ones keep having the same width…

    • Jade 4:23 pm on March 10, 2011 Permalink | Reply

      Hi again,

      By chance, do you know if the last change made on the typography part affects the fact that I can’t change the font size anymore ? I used to have a text editor above whenever I wanted to modify a page with font size which is no longer there…

      Thanks for your help

      • Jay Versluis 7:47 pm on March 10, 2011 Permalink | Reply

        I’m not sure I understand… which text editor do you mean? The code didn’t change the typography. The easiest thing to double check is to comment the line out and see if comes back.

        The width of the table is set for the entire table (i.e. 100%) and adjusts dynamically.

    • Jade 9:23 pm on March 10, 2011 Permalink | Reply

      Hi Jay,

      The “th, td” I added after “table” (“table, th, td”) seems to interfere with the width of the table.

      Regarding the font size function, I am still not able to get it back. Any thoughts on that ? Is there a plugin able to control the font size of the text of a page ?

      Thanks again for your time.

      • Jay Versluis 9:29 pm on March 10, 2011 Permalink | Reply

        Of course it does, why didn’t I think of this… you need two seperate entires then:

        table {border: 5px solid red; margin-bottom:1.4em;width:100%;}
        th, td {border: 5px solid red; margin-bottom:1.4em;}

        This will solve your width problems. Text size we haven’t touched here at all. How did you change the font size before?

    • Jade 10:58 am on March 11, 2011 Permalink | Reply

      Hi Jay,

      Thanks, I got my table working.

      I also figured out how to get the font size function back on my visual editor using TinyMCE Advanced Plugin. I already had it installed, just uninstalled and reinstalled it!

    • Enrico 11:34 am on March 16, 2011 Permalink | Reply


      How can i enlarge the title in modularity lite theme?


      • Jay Versluis 10:18 pm on March 19, 2011 Permalink | Reply

        Hi Enrico,

        the quick and dirty way is to edit style.css and find the following block of code:

        #masthead h4 {
        font-weight: bold;
        text-transform: uppercase;
        float: left

        Amend it into this:

        #masthead h4 {
        font-size: 2em;
        font-weight: bold;
        text-transform: uppercase;
        float: left

        Tweak the font-size parameter into anything suitable. Please note that this also increases the size of the tagline as the title is not referenced individually.

        • Enrico 4:34 pm on March 22, 2011 Permalink | Reply

          Thanks a lot…and another question how can i change the color of the font in the title and in the left menu…but separately (example: Title font color black, and menu font color white)?

          • Jay Versluis 7:56 am on March 23, 2011 Permalink

            Have a look in your style.css file. For the Title fon colour, find these lines and change the color attribute to the colour you want (say #f00 for red):

            #masthead h4 a {
            color: #fff;
            text-decoration: none;

            For the Nav Menu do the same thing to this block of code:

            #top div.main-nav a {
            border-right: 1px dotted #666;
            color: #eee;
            display: block;
            line-height: 15px;
            padding: 0 1em;
            text-decoration: none;

            Have fun πŸ˜‰

    • Philipp 3:20 pm on March 17, 2011 Permalink | Reply


      First thanks for your really helpful blog! I just managed to fix the slideshow for every static page. It didn’t work for the different blogarticles unfortunately… (all the slideshowpictures were beneath each other)

      But anyway… I’m thinking about something different. My blogarticle are usually about one country of our one year asiatrip. So I would like to add to every blogarticle a different slideshow with the 5 best pictures.
      Do you have any idea how a can add a slideshow to a specific blogarticle??

      Cheers, Philipp

      • Jay Versluis 7:47 am on March 23, 2011 Permalink | Reply

        Hi Philip,

        that’s a coding challenge πŸ˜‰ You’ll have to build a query to check which category you’re displaying, then add a specific slideshow block underneath each one so the pictures are different. I’ll sketch you in: have a look at archive.php and find these towards the top of the file:

        /* If this is a category archive */

        Underneath it we’ll build our queries (I’ll illustrate this with two categories):

        // query category
        if (is_category('Country 1')) {
        // specific slideshow code goes here
        <div id="slideshow">
        <div><img src="" /></div>
        <div><img src="" /></div>
        if (is_category('Country 2')) {
        // specific slideshow code goes here
        <div id="slideshow">
        <div><img src="" /></div>
        <div><img src="" /></div>

        Add more lines for more images and change values to the your actual Category Titles.

        Have fun πŸ˜‰

    • Enrico 4:56 pm on March 22, 2011 Permalink | Reply

      and also… how can i change the font (cause my theme is not supported by typekit) and i wanna change the font in “Old Standard”…

      and also how can i put the Tag Line into the custom header photo?

      I start to follow you so i can learn more about this theme of wordpress!

      Thanks for support

      • Jay Versluis 8:02 am on March 23, 2011 Permalink | Reply

        Old Standard is not a web safe font – so I wouldn’t reccommend changing it to that. Your visitors may not have it installed. Scour the style.css file for ‘font-family’ attributes – you can list the ones you’d like the browser to try in order like so (this is the h2 attribute for Modularity Lite – but there are more to be found):

        .content h2 {
        font-family: Old Standard, Arial, Georgia, serif;

        If you’re already using a custom header then I suggest you photoshop your tagline into the header – there’s no easy way to overlay the tagline onto the header image (it gets rid of both of you upload an image).

        Hope this helps!

    • Bean 9:56 pm on March 24, 2011 Permalink | Reply

      I’m just playing around with this template for now to see if it’ll work for me.
      I have a static home page. I want the flash to show up on that page only.
      I have a very nice (non-flash) header for the rest of my pages.
      Everything is working well except the home page has the non-flash header on the home page THEN the flash header underneath it.
      I THINK I followed your instructions. That’s the remaining issue I have.
      Is there a way to pull this off?
      Many, Many, Many thanks

      • Jay Versluis 11:20 am on March 25, 2011 Permalink | Reply

        Hi Bean,

        assuming you’ve added the static header via Appearance – Header we can put a query in to ask “Are we displaying the home page? Because if we are, please do not display that header”. Head over to your header.php file and find this bit of code at the bottom:

        <?php if ( get_theme_mod( 'header_image' ) ) : ?>
        <div id="header-image">
        <img src="<?php header_image() ?>" width="950" height="200" alt="" />
        <?php endif; ?>

        This is responsible to insert the header if one is uploaded. We’ll amend it to this to include the home page query:

        <?php if ( get_theme_mod( 'header_image' )) :
        if (!is_home()) { ?>
        <div id="header-image">
        <img src="<?php header_image() ?>" width="950" height="200" alt="" />
        <?php } endif;

        That should do the trick πŸ˜‰

    • Bean 4:23 pm on March 25, 2011 Permalink | Reply

      I DO have the static header set (appearance > header)
      I added your most recent changes to the header.php file (in addition to my original changes of
      adding ‘slideshow’ folder with images
      the ‘slideshow.php’ file and
      changing the page.php with the slideshow qualifier (in my case:

      But still have the double header problem on the home page.
      I’m sure I’m missing something painfully simple.
      Thanks SO much for helping me.

  • Jay Versluis 1:22 pm on October 15, 2010 Permalink  
    Categories: Themes ( 25 )

    How to style AutoFocus by Allan Cole 

    One of my all time favourite themes is AutoFocus by Allan Cole – it’s a superb portfolio theme that lets your pictures to the talking. Great for sites that show off images.

    I wanted to use it over at Cloud-TV but thought that a different colour scheme would better suit my pictures – so I took some notes on how to amend certain aspects of the theme. You may find these useful if you’d like to style the theme to your own needs.

    Please note that at the time of writing AutoFocus is at Version 1.0.1 – it is likely to be the final standalone theme and it’s no longer under active development. These tweaks will NOT work for Autofocus Plus or Plus Pro.

    (More …)

    • Nydia 12:05 am on January 17, 2011 Permalink

      Hi Jay,
      This is one of the best tutorial/style tips for this fantastic theme on the internet! Thank you!

      To say I’m a “newbie” to all of this, is an understatement — I’m more of a zygote when it comes to CSS and even a photography website. I’m just getting started in this industry. As of today, I literally just have one post and one image so far …

      I’ve followed most of the tips in your post. I’m loving the removal of the duplicate image in the post. I don’t very much mind the small title. However, I just have a couple of questions:
      1) is there a way to add the code to copyright my images
      2) how can I get this theme to stop repeating my images in the cropped front page grid?

      Thanks a bunch!
      (here’s my website incase you need to see it: (

      • Jay Versluis 2:46 am on January 30, 2011 Permalink

        Hi Nydia,

        sorry for the late reply, your comment had accidentally been caught by Akismet and landed in the spam folder. Looks like your website has grown a bit since you’ve posted this – glad to see it. Thank you very much for your kind remarks πŸ˜‰

        Images tend to get tiled/repeated when the original is smaller than the crop that is generated on the front page. For example, if you’d upload a 100×100 pixel image and the first box is 595×300 pixels the image will be repeated to fill the space. The only way to avoid this is to upload images larger than 600 x 300. Looks like you’re now doing that – I can’t see the issue happening on your front page at the moment.

        Autofocus (standard) has a copyright overlay by default however it’s not showing up on your site. I’m not sure why… Try installing Autofocus in a seperate folder and activate it – see if it displays the copyright overlay then.

        Having said that, these are only overlays so the copyright message is not really part of the picture; if someone were to download it the message wouldn’t be there. It’s therefore better to add such things before you upload the images to your website.

        Have fun πŸ˜‰

    • DaveH 10:10 pm on January 17, 2011 Permalink

      Hi there Jay. I happened upon your site while trying to diagnose a problem with my Autofocus + Pro site. It sounds simple, but I’m trying to change the site width from 800 pixels to 1000. However, no matter what I do I can’t get the blog-grid to function correctly. I wonder if you have any ideas? I’ve been trying to get this to work for hours .

      This is what I have done :

      I’ve edited my autofocus style.css so all 800 pixels are removed from “layout” section (added +200 to these values). I haven’t removed all the “800”s however.

      /* Layout
      ————————————————————– */
      body {min-width:1032px}
      #header {width:1000px; margin:22px auto;}
      #access {position:relative; overflow:hidden;}
      #wrapper {position:relative;z-index:20}
      #main {width:1000px; margin:0 auto; padding:0;overflow:visible; position:relative;z-index:25}
      #container {width:1000px;display:table;padding:0; margin:0 0 66px;}
      #content {margin:44px 0 0; width:1000px; overflow:visible}
      .main-aside {width:392px; float:left; position:relative;}
      #secondary {clear:right}
      #footer {clear:both; width:1000px; margin:0 auto}
      #subsidiary {width:1000px; margin:0 auto; overflow:hidden}
      #siteinfo {clear:both; }

      I’ve made changes to the default-layout.css (as this is Autofocus +Pro) in order to try and ensure that the 1000 pixel table is adhered to but this doesn’t seem to reflect in the blog-grid as it’s now back to 800pixels.

      .blog #content .hentry.p1 {width:664px;margin-right:5;}
      .blog #content .hentry.p2 {width:330px;}
      .blog #content .hentry.p3 {width:330px;margin-right:5;}
      .blog #content .hentry.p4 {width:330px;margin-right:5;}
      .blog #content .hentry.p5 {width:330px;}
      .blog #content .hentry.p6 {width:330px;margin-right:5;}
      .blog #content .hentry.p7 {width:665px;}
      .blog #content .hentry.p8 {width:664px;margin-right:5;}
      .blog #content .hentry.p9 {width:330px;}
      .blog #content .hentry.p10 {width:664px;margin-right:5;}

      Should i restore these lines back to their defaults, I get a wider grid (the top box is by default set to 100% and so fills 1000 pixels), but the remainder are staggered as if I am missing posts (but I’m not). No matter what I do, I can’t get the images in the blog-grid to line up properly. I haven’t changed any other files. Do I need to make other changes to the style.css to achieve this 1000 pixel width?
      My site is at

      Thanks, Dave

      • Jay Versluis 11:09 am on January 18, 2011 Permalink

        Hi Dave,

        have a look further up in the comments – yesjorn wanted to extend his Autofocus Pro Theme to 900 pixels and has done quite a bit of digging. We figured in out together and he’s kindly posted the code he found. Looks like there’s quite a bit of interest in the Pro version – I’ll write up a new article soon to bring all those “Pro” tips and tricks together. Good luck in the meantime!

        • DaveH 12:02 pm on January 19, 2011 Permalink

          Thanks for the replay Jay. Yesterday I did figure out a few things and I think I just about have a working 1000 template now. I hadn’t altered all the relevant lines under style.css (beyond the layout section). I also went back into default-layout.css and played with the .blog #content .hentry.px {width:abcpx;} containers until I found values which were accepted and adhered to the grid. The width seems OK now.

          I have one more problem to solve on Autofocus+ Pro – how to get the images both in the blog-grid and at the top of the single-post page to display at 1000 and not the defaults. Any ideas how to do this? I’m going to dig thru the function files today and see if I can find something.

          Cheers, DaveH

    • Polo 10:13 pm on January 17, 2011 Permalink

      Thank you very much it was very very useful !

    • Mary 11:31 pm on January 18, 2011 Permalink

      On a single page post …. Can anyone tell me how to make the post title show up large directly above the text of the post and have the date also show up large above the meta? So that the title is more in line as part of the post (just above the beginning of the post text) and so the date shows up in the same large font over on the right.

    • Nathalie Quirion 10:53 pm on January 19, 2011 Permalink

      How do we go about removing the date from showing up when we mouseover the photos on the home page? I am using the Autofocus Pro version.

      • DaveH 12:31 am on January 20, 2011 Permalink

        Nathalie – there’s an option in AF+ Pro which allows you to select what you see on your blog-photo-grid. It’s under your dashboard, Autofocus+Pro Options, then there’s a radio-box for “Show the Title on hover only. (Also removes dates from single Photo pages)”

        Hope that helps.

        • Nathalie Quirion 5:14 pm on January 20, 2011 Permalink

          Hi Dave, well I would have preferred to keep the title of the post visible and have the date disappear at mouseover, but it is one way of doing it. Thanks a lot, I really appreciate this forum. Nat

    • shirakiphoto 8:40 am on January 29, 2011 Permalink

      I love autofocus and ever since I started to shoot for Lamborghini my blog has been getting a lot more traffic. My ONLY gripe about the layout is that in the actual post the pictures are small and have to be clicked on to enlarge.

      I’ve noticed that Autofocus+ PRO can produce larger images. Does Autofocus+ do this as well?

      Thanks in advanced for any help someone can provide

      • Jay Versluis 12:16 pm on January 29, 2011 Permalink

        I’d suggest you try Autofocus Plus on a dummy site – it’s free and really easy to setup. See if you like the feel of it. Also, there are two demo sites (for the Plus and Pro versions) on the developer’s site – check them out here.

    • David Lundgren 7:56 pm on January 31, 2011 Permalink

      Great page!

      Do you have any idea how to get rid of the thin white line next to the photocollage on my startpage?


      • Jay Versluis 10:44 am on February 1, 2011 Permalink

        Hi David,

        I’ve just had a look in both FIrefox and Internet Explorer – but I can’t see a white line on your start page. Maybe you’ve managed to eradicate it already – in which case: well done πŸ˜‰

    • David Lundgren 7:46 pm on February 1, 2011 Permalink

      Hi Jay!
      Sorry! After a fex hours i realized that the white line infact was a result of a poorly made photocollage..:)

    • David Lundgren 7:30 pm on February 3, 2011 Permalink

      Hi again Jay!
      Trying to find out how to change color and size of the navigation bar in the top right on my page (birds, landscape etc), but canΒ΄t figure it out and canΒ΄t find any info on the web.

      Best regards
      David Lundgren

      • Jay Versluis 8:09 pm on February 3, 2011 Permalink

        Hi David,

        you can set this in the style.css file under the header section:

        /* =header */
        #header {margin:55px 0 0;height:105px;text-transform:normal;width:600px;clear:none;float:left;}
        #header a:hover{text-decoration:none;color:#888;}
        #header h1 {font-size:1.8em;line-height:0.8em;padding:5px 0 0;}
        #header h1 a{font-weight:100;letter-spacing:-0.05em;position:relative;}
        #header #blog-description {color:#888;}
        #access {display:table;height:160px;vertical-align:middle;width:200px;float:right;}
        #access #menu {vertical-align:middle;display:table-cell;font-size:0.8em;}
        #access #menu ul {vertical-align:middle;display:block}
        #access #menu ul li ul {margin-left:10px;}
        #access #menu a{font-weight:800;}

        The last line in this block describes the navigation block. If you wanted to make it red and slightly bigger for example, replace the last line with this:

        #access #menu a{font-weight:800; color: #f00; font-size: 1.2em;}

        Add tags to your heart’s content πŸ˜‰

    • David Lundgren 1:08 am on February 5, 2011 Permalink

      Thanx! You made my day:)

  • Jay Versluis 12:59 pm on September 23, 2010 Permalink | Reply  
    Categories: Themes ( 25 )

    How to style Misty Look 

    The other day Richard moved his blog from over to The Guru Network – welcome Richard πŸ˜‰

    He was using Sadish Bala’s beautiful Misty Look Theme and wanted to stick with it. However, the self-hosted version doesn’t quite look like what he had on, so here are some code tweaks to adjust it.

    Please note that at the time of writing, the latest Misty Look version is 3.8RC – there may be a newer version with different code available. Keep that in mind when you’re trying to apply these tweaks πŸ˜‰

    (More …)

  • Jay Versluis 8:51 pm on August 25, 2010 Permalink | Reply  
    Categories: How To, Themes ( 31 )

    How to style WP Affiliate Platform 

    I’ve recently done some research on Affiliate Programmes that integrate with WP Ecommerce.

    I came across the excellent WP Affiliate Platform from Tips and Tricks HQ – it works beautifully and is very easy to setup. At only $39 it’s a steal – considering how much business it can generate for you. Thanks Ruhul!

    I wanted to make the front end integrate with my original site – which is just like tweaking a WordPress Theme. Let me talk you through it in this article.

    (More …)

  • Jay Versluis 11:46 am on June 3, 2010 Permalink | Reply
    Tags: mansion,   

    Categories: Themes ( 25 )

    How to modify MANSION by GraphPaper Press 

    I wanted to use Mansion for my Miami Beach Huts website. It was ideally suited, however all my images are portrait instead of landscape. Some tweaks were necessary which I thought I’d share with you for endless hours of fun.

    I wrote this for Version 0.2 of this theme. A few things have changed since then, especially the documentation. Keep that in mind while I’ll talk you through some tips and tricks of MANSION.

    (More …)

    • Jessica 10:22 pm on January 6, 2011 Permalink | Reply

      Hi Jay,

      I have already found the answer to one of my questions on here so thanks very much!

      I am a complete novice at this so sorry if I am asking something really simple! The problem I am having is that on the homepage, where the left hand side links are, the search bar is randomly floating above one of the links and is not in place underneath as it should be. Also, the thumbnails that are placed underneath this area are directly underneath the links instead of the correct spacing as shown on the mansion you know how to resolve this?

      Kind regards,


    • Jessica 11:27 pm on January 6, 2011 Permalink | Reply

      Yey! I figured it out! Thanks anyway πŸ™‚

      • Jay Versluis 2:42 am on January 7, 2011 Permalink | Reply

        Great, glad to hear it! The sidebar does behave weird sometimes: on the home page, it’s at the bottom of the sidebar where it should be – yet on a single post it hovers underneath the last item in the link list.

        May I say: I think this theme is a perfect match for your illustrations – looking gooood πŸ˜‰

    • Cristian Morales 11:07 pm on February 3, 2011 Permalink | Reply

      hi jay,

      IΒ΄m trying to add an image logo in the left top corner but i have problems i donΒ΄t know how to do it, please i need your help if you can show ho to do it a will be very greatful.

      • Jay Versluis 12:37 pm on February 4, 2011 Permalink | Reply

        Hi Cristian,

        you can add a header above the nav menu by editing the nav.php file. Add these lines of code above everything else in that file like this:

        <a href="<?php bloginfo('home'); ?>">
        <img src="">

        The first and third line make this image clickable and link to your home page. Make sure your image is only as wide as your nav bar – otherwise it’ll throw the image grid out of alignment.

    • Victor 12:36 pm on February 4, 2011 Permalink | Reply

      Hey – awesome tips! My mansion theme only displays 10 thumbnails on the homepage then starts to overflow onto the ‘next’ page is there any way to display more thumbnails as illustrated in the mansion demo?

      Thanks in advance! πŸ™‚

    • Victor 11:41 am on February 5, 2011 Permalink | Reply

      Hey – awesome tips! My mansion theme only displays 10 thumbnails on the homepage then starts to overflow onto the β€˜next’ page is there any way to display more thumbnails as illustrated in the mansion demo?

      Thanks in advance! πŸ™‚

      • Jay Versluis 1:56 am on February 6, 2011 Permalink | Reply

        Thanks Victor!

        WordPress is responsible for how many posts show up on your front page. Go to Settings – Reading and set the amount of posts you’d like to display (which in Mansion equals the amount of thumbanils). There is a limit of about 30 or so though – I’m not sure why (but believe me it’s plenty).

    • Puneet Rakheja 3:24 am on February 7, 2011 Permalink | Reply

      Hi Victor,
      thanks for the help!
      This is great.

      The logo addition didn’t work in nav.php but made it work in header.php

    • Ivan 5:40 am on February 12, 2011 Permalink | Reply

      Hey thanks for the info!
      I’m still tweaking my Mansion, is there a way of making the blog theme the primary one?

      I tried copying theblog style into the index.php and got everything scrambbled lol πŸ˜›

      Thanks again!

      • Jay Versluis 11:01 am on February 18, 2011 Permalink | Reply

        Hi Ivan,

        sorry about the delay, I’ve been working tirelessly on a great new backup plugin for WP – stay tuned on that one. But I digress – I’ve looked into your question and had the same problem at first with everything being scrambled up – but believe me there’s a fix for this:

        First, copy the entire contents of category-blog.php into the index.php file. I bet you’ve done that already and that caused some scrambling, right? Not to worry.

        Next have a look at the style.css file and find the block that begins with /* Blog */. Notice that every style tag begins with .category-blog? That’s what makes this load only when we’re using the category-blog.php file. We want this to be executed by default so we need to get rid of it like so:

        /* Blog */
        .box, .page-template-page-blog-php .box {background: #222;padding-bottom: 4px;}
        .blog a, .page-template-page-blog-php .blog a {text-decoration: none; font-weight: normal;}
        .box h2.posttitle, .page-template-page-blog-php .box h2.posttitle {padding:10px;font-size: 15px; font-weight: bold; padding-bottom: 0; margin-bottom: 0;}
        .box p, .page-template-page-blog-php .box p {padding:5px 10px 10px;font-size: 12px; line-height: 16px;}
        .col2 h2.posttitle, .page-template-page-blog-php .col2 h2.posttitle {font-family: Georgia, Times; font-size: 20px; font-style: italic; font-weight: normal;padding-top: 15px;}
        .col2 p, .page-template-page-blog-php .col2 p {font-family: Georgia, Times; font-size: 16px; font-style: italic; line-height: 20px;padding-top: 10px;}
        .datediv, .page-template-page-blog-php .datediv {font-family: arial;margin: 10px 10px 0; float: right; color: #666; border-bottom: 2px solid #333;}, .page-template-page-blog-php {font-size: 30px; text-decoration: none;font-weight: bold;display: block; padding: 3px 0;}
        span.monthyear, .page-template-page-blog-php span.monthyear {font-size: 10px; text-transform: uppercase;}

        Styling sorted. Now we have our frontpage looking exactly like the “blog” page with all posts being formatted “the way of the blog”.

        May I say that this is a wonderful idea and puts yet another very cool spin on Mansion.

        Enjoy πŸ˜‰

    • Victor 2:47 am on February 15, 2011 Permalink | Reply

      thanks for your help jay!

      If i load an image as the featured image… (thumbnail) then add another image into my actual post.. my homepage (the index) actually displays both the pictures… how can I stop this from happening?

      • Jay Versluis 12:56 pm on February 17, 2011 Permalink | Reply

        Hi Victor,

        actually in the latest version of Mansion the Featured Image overrides the first picture in the post. Older versions of Mansion (0.2 I remember) used to show all images in your post – which I would imagine includes the featured one.

        In a nutshell I reccommend upgrading to 1.2.1 or later. Hope this helps πŸ˜‰

    • Marisa 11:48 pm on February 25, 2011 Permalink | Reply

      Hi Jay –

      This is a great post, thanks so much for all the suggestions! I just started using Mansion (and wordpress) and I’m having trouble with my thumbnails…they’re all sized differently and are pixelated, even though the single page views look crisp.

      Do you have any suggestions as to how I can fix this?! If you need I can paste in my stylesheet.

      Thanks so much.


      • Jay Versluis 9:54 am on February 26, 2011 Permalink | Reply

        Thanks Marisa!

        The first thing that springs to my mind is how big the size of your thumbnails may be. You can check this under Settings – Media. You’re currently displaying images on the Mansion front page with a width of 160 – so if your thumbnail size is set to less than that Mansion will up-res to make them fit. You also need to tick the box that says “crop thumbnails to exact dimensions” – that way they will all be the same size on the front page (albeit cropped).

        Please note that this will only affect uploads you make from now on; to change your current thumbnails restrospectively, check out the Ajax Thumbnail Rebuild
        pluigin – it will do this for you.

        Good luck πŸ˜‰

        • Marisa 3:56 am on February 27, 2011 Permalink | Reply

          Thanks for getting back to me so quickly! I checked my thumbnail settings and they were set to 200 width x 150 height… I changed the 150 to 160, downloaded & activated the Ajax plugin and made sure the “cropped thumbnails to exact dimensions” box was checked but they’re still looking blurry!

          One thing I noticed was that for some of my images, Mansion would create thumbnails that cropped my pictures in a way I didn’t like. So I manually selected the areas I wanted to appear in the thumbnail and although that solved the cropping issue, it seems that some of but not all of the images I played with are either much smaller than the ones I didn’t play with, and/or they’re much blurrier.

          Do you have any additional thoughts or tips?!

          Thanks again. So much.

          • Jay Versluis 11:38 am on February 27, 2011 Permalink

            Just te be clear: you also need to run the plugin (I think it hides under Tools once it’s activated – it will rebuild all the thumbnails while you wait and then you can deactivate it again).

            One problem with any grid layout is that to make it look “good”, all pictures have to be cropped to the same pixel dimensions. If you manually crop the thumbnails then you run the risk of varying apsect ratios and pixel dimensions.

          • Marisa 9:42 pm on February 27, 2011 Permalink

            You are my hero, that fixed it! No more blurry thumbnails πŸ™‚

            I realized it’s only the portrait sized photos that are getting cropped funny (check out the image of the lady on the home page). I know your post details how to format the theme if all your photos are portrait, but do you know if there’s a way to format the theme so it works well with both portrait and landscape?

            Also…if I’d like to add another row or two of thumbnails per page, is there a way I can do that?

            Thanks again for all your help. I’ll stop bothering you soon πŸ™‚

          • Jay Versluis 10:06 pm on February 27, 2011 Permalink

            Glad it worked for you πŸ˜‰

            The only way I know how to make both portrait and landscape pictures look good is to crop them to a square. Alternatively you must decide for which format you prefer I guess… Another way is to use the “Featured Image” option I believe. In a post you’ll find the option on the right hand side with which you can set an image which gets shown as the thumbnail but doesn’t appear in the post itself. So you could go ahead and crop your perfect portrait out of a landscape, then show the landscape uncropped in the actual post. Try it out, I’m not entirely sure if this works on Mansion or not.

            If you’d like to show more thumbnails, head over to Settings – Reading and change the amount of posts that get displayed per page. The default is 10 – change it to more. I believe there’s a limit as to how many can be displayed – say you set this to 99 it will still only display about 30 or so. I’m not sure why but I’m looking into this.

            No bother – you can always buy me a cup of coffee to say thanks πŸ™‚

          • Marisa 9:22 am on February 28, 2011 Permalink

            Radness, now it’s displaying all the thumbnails I’d like. Thank you!

            It seems I may just have to deal with a few strangely cropped thumbnails because unfortunately for the portrait sized ones, I can’t crop them to a square otherwise I’ll lose part of the image and I’d like to avoid that. Unless there’s a way to use different files for the thumbnail & larger image (?!), it sounds like I may have to just deal with it. I tried the “featured image” option and unfortunately it didn’t help…just made the strangely cropped thumb bigger.

            Thanks for all your help!

          • Jay Versluis 9:40 am on February 28, 2011 Permalink

            I’ve just checked the Featured Image option and it may just hold the answer you’re looking for – what you post as Featured Image shows as thumbnail but not in the post, and conversely your post’s picture doesn’t show as thubnail of a Featured Image is set. That’s great newe because now you can simply use your favourite image editor, generate a crop you’d like to show as thumbnail, then upload that as the featured image. Meanwhile you insert the upcropped version into your post as normal.

            No auto cropping = Happiness

          • Dave 10:03 am on August 28, 2011 Permalink

            First of all thank you Jay for all the time you put into helping others out with this. I answered all of my questions but one by reading through the comments section. I was wondering if there was an answer to marissa’s question about making the theme work with both landscape and portrait pix? WP almost always seems to crop the portrait photos the way I don’t like it. I even tried importing the picture upside down (when I believed the thumbnail gets generated) and then flipping it end for end in the actual post but that didn’t seem to work. Any ideas? Thanks again

          • Jay Versluis 3:43 pm on August 28, 2011 Permalink

            Hi Dave,

            The problem lies in the picture grid: in order for it to look like a grid, every thumbnail on the front page needs to be cropped to the same dimensions, otherwise you’ll end up with a mess. Technically you could mix portrait and thumbnail images (i.e. non-cropped versions of your photos) but believe me that does not look good. Therefore, you either have to decide if you want to use portrait, landscape or square thumbnails and tweak the theme accordingly.

            Square is a compromise where your pictures get cropped no matter what (unless your originals are square to begin with of course). You can go ahead and create your own crop just the way like it and then set that as the featured image in your post – this will override the default crop. This pits you in control rather than an automation, however it means more work for you in Photoshop.

            Hope this helps πŸ˜‰

    • greyc 11:54 pm on February 26, 2011 Permalink | Reply

      I’m trying to have all the posts/thumbnails show on the blog page (the grid) and get rid of the pagination. Any help with that would be cool.

      • Jay Versluis 11:03 am on February 27, 2011 Permalink | Reply

        Hi greyc,

        Pagination is set in the footer.php file – have a look for this piece of code and delete it or comment it out:

        <div class="navigation">
        <div><?php previous_posts_link(__('Previous &raquo;')); ?></div>
        <div><?php next_posts_link(__('&laquo; Next')); ?></div>

        You can set the amount of posts that the front page displays under Settings – Reading, however there is an internal WordPress Limit is seems (only 35 or so posts can be displayed even if you put 99 in that box).

        • greyc 5:03 am on February 28, 2011 Permalink | Reply

          Thanks a lot!

  • Jay Versluis 9:24 am on June 2, 2010 Permalink | Reply  
    Categories: Themes ( 25 )

    How to style THESIS by DIYThemes 

    Thesis is one of THE most amazing premium themes there is. Nearly every element of your website can be amended and styled thanks to the use of hooks.

    It’s got a vast array or user options in the back end and I’m not lying when I say they’re the most sophisticated I have ever seen in a premium theme.

    When you decide to buy the theme, you’ll get access to a huge moderated members only forum so all your install/how-to/troubleshooting/styling questions will be answered promptly.

    At the time of writing, Thesis is at version 1.8. Consider getting it before version 2.0 hits the market – Chris Pearson has hinted at a hefty (and well deserved) price increase from then on – which won’t be applicable for version 1.x subscribers! You can get Thesis here.

    Whenever I built a new site, I often start with Thesis – which is why I often have to tweak some defaults to my liking. Here are the small bits of code I always forget where to find:

    (More …)

  • Jay Versluis 5:40 pm on June 1, 2010 Permalink | Reply  
    Categories: Themes ( 25 )

    Themes and where to get the Good Ones 

    There are literally thousands of WordPress Themes out there on the net. Here’s a list of repositories you can have a look at and see which one’s right for you.

    I sometimes review Themes and give you an in-depth description of the pros and cons – check out all I’ve written on this topic here.

    • – this is what you can access from within the WordPress Backend under APPEARANCE – THEMES – ADD NEW and SEARCH
    • DIYthemes – the makers of the amazing Thesis Framework. This website runs on Thesis. It gives you every bit of control over your layout without having to tweak much code. I use it more and more and reccomend it to my clients. It’s not free but worth every penny. You can also purchase this through my site right here and benefit from an added installation service πŸ˜‰
    • Woothemes
    • Graph Paper Press
    • Design Disease
    • The Buckmaker – I use Joe Fischler’s Aerodrome theme on Premier League News
    • Bavotasan – I use one of his themes for VIP Scoop
    • Template Monster

    If you’ve found your perfect Theme but don’t quite know how to add it to your website, check out this article for detailed instructions.

  • Jay Versluis 6:14 pm on May 26, 2010 Permalink | Reply  
    Categories: Themes ( 25 )

    Mansion: a Photoblogging Extravaganza 

    I’ve just come across this wonderful theme and wanted to share it with you immediately:

    MANSION by Chandra Maharzan is a Photoblogging Extravaganza. It automatically turns your site into a dimmed-out photo wall. Each thumbnail then links to the post it comes from – you don’t lift a finger to make it look super swish. And best of all: it’s FREE! (More …)

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc