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. I havent upgraded up to editable CSS yes, but I'm using Modularity Lite and would simply like to remove the transparent container/ layer that hovers over all the images and behind the text. If I get this accomplished, maybe I'd like to change the colors ot text in categoris widget… ty!

  3. Hi Jay,

    Thanks for the tip about changing excerpts to content – it was driving me mad having only excerpts on the index after the first blog post!

    My question is, how do I change the width of the container that holds the blog post? Reason being I host my images on Flickr and I’d like to use the image that is 640px wide. If I add the image to my blog currently, it overflows the box by about 30-40 pixels. Also the sidebar is too wide in my eyes, so narrowing the side bar and widening the content box would be ideal. I tried finding out where to change the width of the content box using Firebug but had no luck. Any advice?

  4. Jay, the new wp theme, modularity lite has a transparent layer that takes up less width than the whole screen but goes slightly over the edges around the page. the text is in front of this layer, but if you put a background image in, it overlays the background image, darkening it. to see my site (an example of that- go to <a href="http://www.fengshuiflorida.com” target=”_blank”> <a href="http://www.fengshuiflorida.com” target=”_blank”>www.fengshuiflorida.com I promise my question makes sense! Have been searching for answer. Thank you!

  5. Hi Nancy, you’ve done some great work to Modularity Lite – it looks so different than the default theme. Cool!

    I think I know what you mean now – it’s the grey box that’s all over your content, right? I’ve never noticed this before, but now that I’m looking into this I can see what’s going on. On the original (dark) version, this grey box sets a nice contrast and border around the slideshow and the “container” class. Of course that’s not such a nice effect in your modification.

    Have a look at the style.css file and find this bit of code (it’s failry high up under GLOBAL STYLES):

    .container {background:url(images/repeater.png) repeat;}

    This line loads an image with transparency which creates the effect. Delete this line or comment it out for future use.

    Eternal Happiness guaranteed 😉

Comments are closed.