How to modify the Modularity Lite 1.2 from Graph Paper Press

- by

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:

/************************* GLOBAL STYLES ***************************/
body {color:#eee;background: #111 url(images/bg.jpg) no-repeat center fixed;}

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:

jQuery("#slideshow").cycle({
speed: '2500',
timeout: '500',
pause: 1

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.

Pages: 1 2



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

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

  1. Good stuff with Modularity Lite. I’m really enjoying it in two columns.

    My modifications are calling for management of the slideshow into a smaller size – which I have done. Now, the slideshow is positioned correctly to the left but there is space to the right.

    I am hoping to fill up this space with a posted column of text, like a list of dates – as a band would do with their tour dates. I want to post dates + info in small text to the right of the slideshow on only my home page.

    I hope to fill up this space with, say

  2. hi Jay
    thanks for sharing this useful info!
    i’m struggling with trying to do the following: having a static page as my “home” page, and having the slideshow show ONLY on this page.
    you’ve mentioned something about a conditioning code which i have no idea how to implement. any chance to get a more specific guidance on this one?
    thank you very very much

  3. Hi Shai, as I said in my earlier email, there’s a few steps in accomplishing what you want to do.

    First things first: change you Permalink Structure to the default (under Settings – Permalinks, select the first option). We’ll use this to determine what the page ID of your home page is. Then head over to Settings – Reading and have WordPress display “your latest posts” (don’t worry – we’ll change this back when we’re done).

    Next, refresh your site in a new browser tab and navigate to the page you want to use as a home page. See the URL in your browser? It should now read something like "yourdomain.com?page_id=11"

    Note down the number it gives you, it could literally be anything. Let’s pretend it’s 11 for this example. Now it’s time to hack some code. If you’re using the internal WP editor, go to Appearance – Editor and select the “page.php” file from the list (make sure it’s writable on your server so you can save your changes). The first line of code you should see is where the file “header.php” is called. We’ll leave that alone. Just underneath that line, insert the following code:



    This will test if the current page is the one we’d like to display the slideshow on (i.e. page ID 11 – change that value to your specific page ID we found out above). Save your changes and refresh your site in the other tab. If all went well, you should see your slidehsow displayed on that very page.

    All you need to do now is change the permalink structure back to something sensible (the second option from the top works for me, i.e. “month and name”), and of course set your new slideshow page as the homepage.

    Let me know if that works for you 😉

  4. I really like the format that Modularity offers. I’m having one problem. WHen I catagorize a post, then go to that post through the catagory, only the “summary” shows up. I can’t get the summary to expand to the full post. Any suggestions?

    Sam

  5. THANK YOU!

    it works and you rock!

    funnily, i had to enter the code (and of course delete the original —

    — with BBEdit, while direct editing with wordpress’ on-board editor yielded some strange results

    anyway, it works and i thank you again

    p.s.
    i didnt got the email btw..

Comments are closed.