How to modify the Modularity Lite 1.2 from Graph Paper Press

If you don’t know this theme yet, you should check it out at Graph Paper Press.

Modularity Lite is Thad Allender’s freebie version of a larger framework. I was customising this theme for Jerry Hyde’s site recently, and thought I’d take some notes to share with you.

UPDATE January 2011: This article gained a lot of attention since it came out in January 2010. Code changes dramatically with each release, which is why I’ve written an updated version for Modularity Lite 1.3. This article is about version 1.2. Tweaks may NOT work in later versions.

How to add your own Background Image

The background image gets loaded via the style.css file in the following line of code:

The full path to the default background image is wp-content/themes/modularity-lite/images/bg.jpg. Change it to your heart’s contempt!

How to add your own Logo or Header

have a look at the header.php file and find the following section:

<!-- Begin Masthead -->
<div id="masthead">
<h4><a href="<?php echo get_settings('home'); ? rel="nofollow">/" title="Home"><?php bloginfo('name'); ?></a> <span><?php bloginfo('description'); ?></span></h4>
</div>

Delete the <h4> and <span> tags and replace them with a link to your logo like this:

<div id="masthead">
<img src="http://yourdomain.com/yourlogo.jpg">
</div>

If you’d like that logo to link to your home page, wrap it in a link like this:

<div id="masthead">
<a href="<?php echo get_settings('home'); ? rel="nofollow">/" title="Home">
<img src="http://yourdomain.com/yourlogo.jpg">
</a>
</div>

Image Sizes

If you’re hosting images in places other than your website (say Flickr) you may find that those images are too big for your layout. Rather than fiddle with that, let’s have imgaes automatically resize when they’re wider than your theme.

Have a look at the style.css file and find the /* Floats & Images */ section, under which you’ll find these three declarations:

img.centered...
img.alignright...
img.alignleft...

The last value on each line ends with

max-width:950px

Change that to a smaller value and your images will be resized automatically. You may also want to add

heigh:auto

to each line so your images don’t get squashed. I don’t know which image alignment you’re using when you embed an image, so for safe measure, amend all three of them. As an example, here’s the first line of code in its entirety changed to 500px width:

img.centered{display: block;margin-left: auto;margin-right: auto;max-width:500px; height: auto;}

Slowing Down the Slideshow

The slideshow is generated in Java Script. Have a look in your functions.php file and look for a code block under the heading // Load Dom Ready Javascripts – it looks like this:

In it, you’ll find two parameters:

  • SPEED which is in fact the cross fade duration,
  • and TIMEOUT which is the duration of each slide.

1000 is about 1 second, 2000 is 2 seconds, and so forth. Play with those and see what happens. If you’d like cuts instead of corss fades, change the SPEED parameter to 1. The PAUSE parameter doesn’t seem to do anything so leave it alone.

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

155 thoughts on “How to modify the Modularity Lite 1.2 from Graph Paper Press

  1. Jay

    You’re a super-star, that seems to have worked. It would have been pretty pointless to have a blog with no comments function! I look forward to your 1.3 version. Although I might see if I can find some queries in-between, to stop you from getting bored!!

    Have a great New Year.

    Yann

  2. I love this theme, especially the slideshow. But I don’t want to display posts on my home page. Unfortunately, of course, that’s what drives the slideshow.

    Is there a way to keep the slideshow on my home page but not display the posts with the photos there?

    1. Hi Joachim,

      I had the same problem for one of my client’s sites – there are two options to deal with this. Either, only display one post on the front page and make that your Welcome message (like you already did). You can set this under Settings – Reading. Create more posts for other pictures in the slideshow.

      Or create posts solely for the slideshow and set a static page to be displayed as your front page (also under Settings – Reading).

      Hope this helps 😉

  3. I’m new to WP and making a very basic web site using this theme. It has this great feature I have been searching for and didn’t see on any other templates– putting widgets on some pages but using the full page on other pages. Problem is, when I set to have Full-Page the background color on the page is all black, rather than the background color I chose. Is there an easy fix for this?

    1. I know what you mean, I don’t think the Background option is embedded that well in the latest version. It only sets the background colour of the page but leaves all the other colours untouched – including the footer-wrap colour which is what you need to change in style.css. Have a look for this code block:

      /* Footer */
      #footer-wrap {
      background: #000;
      }

      Change the background value to a colour of your choice (#fff for white, #aabbcc for light blue, etc) and you’re good to go.

      Hope this helps!

      1. So, I actually also wrote to Graph Paper, who made the theme and they replied! In case others have this problem they sent the correct php. for the Full-Width template and said to replace the current full-width-page.php file with the one I’m attaching. PROBLEM IS, WHERE DO I FIND THE CURRENT PHP FILE? Is this possible if I haven’t paid to edit CSS and/or have workpress.com, not org.?

        Here’s the code for you who need it:

        <div id=”post-“>

        ” . __( ‘Pages:’, ‘modularity’ ), ‘after’ => ” ) ); ?>

        <?php edit_post_link( __( 'Edit', 'modularity' ), '’, ”); ?>

        1. Hi Liz,

          I’m afraid this upgrade will only work on self-hosted WordPress.org blogs – it will not work on WordPress.com. Even if you pay for the Custom CSS upgrade, you won’t be able to change your themes PHP files – only add to the styesheet.

          The version at WordPress.com is a proprietary version that does not follow the upgrades developers make to their themes – it would have been £frozen” at the time it has been incorporated into .com – they do this for security purposes. On self-hosted sites, the full-width-page.php is inside your theme directory, i.e. /wp-content/themes/modularity-lite/

          If you’d like to get hosted, drop me an email and I can set you up for £60 + VAT pear year. Drop me a line if you’re interested.

          Thanks for sharing the code 😉

  4. Hello there,

    I am trying to set up a slideshow on my header image but I only get a static image. I have tried to locate the modularity-lite/images/slideshow folder but it’s not there.
    Help would be greatly appreciated.
    Thanks a lot !
    Peace !

    1. Hi Jade,

      those instructions are for Version 1.2 of the theme, you are likely running the latest version which is 1.3. The static slideshow doesn’t exist anymore – to all our disappointment.

      I’m in the middle writing some instructions for Version 1.3 and coding a workaround plugin which will bring the static slideshow back to life. Watch this space 😉

  5. Hi there,

    I’m toying around with this theme and find it great.

    Could you please tell me how to remove the transparent container from the ‘Home Page’ only, or from the Posts?

    I’ve changed the repeater.png to be a bit lighter so it looks better on all the pages, but I don’t want it at all on any posts or the home page only. Yet on all the other pages I do, eg. ‘About’ page.

    1. Hi Jason,

      I’ve spent about an hour trying to get this going – and I partly succeeded! I’ve inserted an if/then query in header.php that tests if we’re in fact displaying a page or not. If we are, display the the div tag WITH repeater – if we’re not, display an alternate div tag that does not call the repeater.

      Trouble is, the latter aligns the content to the left not centre like it’s supposed to. Here’s the code for the header.php file. Delete the <div class=”navigation”> statement:

      <?php
      // checks if this is a page and displays the container
      if (is_page()) {
      echo "PAGE";
      }
      else {
      echo "NO PAGE";
      }
      ?>

      And here’s what you need to add to your style.css file:

      .container-no-repeater {
      width: 990px;
      }

      I’ll let you know if ever I figure out what the problem is – if not, please ask the friendly folk at GraphPaperPress.

  6. Hey Jay,

    I previously applied a fix that you detailed here that would show the full blog post (instead of just an excerpt without image) on the index – thanks for that.

    I’ve just come back to it after not working on it for a while (so I’m not upgraded to the newest version yet) but something odd has happened. A thumbnail now appears at the top of the second post, despite not having inserted one into the post. Any advice for how to remove it?

    Example: http://blog.charmainemok.com/

    1. Hmmmm… interesting!

      The thumbnail links to the full post which – like you said – does not seem to include the picture. The only thing I can think of is that it may be the Featured Image. If you edit your post, see if that option comes up on the right hand side and delete it.

      1. Hi Jay, I can’t seem to find a featured image field in the edit entry page. Very strange. I’ve added another post and the issue has popped up again. The image it chooses seems to be at random (it chose the 4th image down in the previous post, now it’s chosen the 3rd image). Is there anything in the coding that might be causing this?! Thanks for any insight you might have…

        1. I can’t reproduce the issue on my system. Must be something in your code – can you post an excerpt here – say a couple of lines before and after the_content()?

  7. hi jay
    How u doing…
    I need your help once again for my wordpress blog. the navigation shows correctly in IE and Opera browsers but seems piled upon one another in google chrome, firefox like browsers. How can i fix it.
    Hoping your suggestion if there is any
    Thanks

    1. Hi Nitin, doing great – thank you for asking 😉

      I’ve had a look on both IE and Firefox and I can confirm your problem… but I’m afraid I have no idea how to fix that or why this is happening. Have a word with the friendly folk at Graphpaperpress – maybe they can help you out.

      Good luck and all the best!

  8. Hey Jay, If you go to my site I want to change the top left hand logo where it says Macdaddy, thought maybe you could give me some insight, gimme a shout. Ciao.

    1. Hi Mark,

      I’ve described how to insert a logo at the top of this article – it’s the same for the 1.3 version which I think you’re using. Have a look at the header.php file. Good luck!

Comments are closed.