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. Hi Its me again.

    Thanks again for having this page up to help solve problems with the theme.

    Kindly take a peek at http://www.kiweze.com the slideshow on the home page does not work for me. Any idea what the issue is? I think it is somewhere in the header.php file.
    Thanks

      1. Hello Jay? Yes you are right. Still have a problem with that slideshow as well. Ca you help with this one.

        1. Hi photonovice,

          the F8 theme is a bit off topic I'm afraid. I had a quick look though and found that in order to activate the slideshow you have to go to Appearance – Theme Options and select either Minimalist Slideshow or Overlay Text on Slideshow. It's switched off by default. The images for the slideshow do not reside in a seperate folder anymore, but are selected from your latest 5 image uploads.

          Hope this helps πŸ˜‰

    1. Yes there is. Depending on where you’d like this information to appear, there are two things to amend. If you’d liketo see the author when people click on the post, have a look at the single.php file and find the following line of code:

      printf( __( 'This entry was posted on %1$s. It was filed under %2$s%3$s.', 'modularity' ),

      Change it to these two lines:

      $author = get_the_author();
      printf( __( 'This entry was posted by ' . $author . ' on %1$s. It was filed under %2$s%3$s.', 'modularity' ),

      If you’d like to post the author information on the front page/posts page, have a look at the blog.php file and find this line of code:

      printf( __( '%1$s | Categories: %2$s %3$s | ', 'modularity' ),

      Change it into these two lines:


      $author = get_the_author();
      printf( __( $author . ' on %1$s | Categories: %2$s %3$s | ', 'modularity' ),

      Hope this helps πŸ˜‰

  2. Hi Jay,
    Thanks so much for this great page — tons of great info. I've been using a prior version of Modularity Lite (I installed it and built my page in January of 2009) and need some help. I know you've talked quite a bit about how to get the slideshow up and running on a page that is separate from the blog postings page, and my question is related.

    My site is http://www.kellycreedon.com. When I started, I didn't want it to look like a blog, so I hacked away at the functionality and made a slideshow only home page and a bunch of sub-pages that I link to through the nav. But now, I'd like to use the blog functionality and I don't know how to put it back in.

    What I'd like is to keep the slideshow only on the homepage, and have a separate blog page display all my posts. The problem is, I don't know how to generate the blog page, or what the url would be. I will eventually add a tab in the nav section to go directly to the blog, and I think I know how to do that, and I think I know from your other posts how to direct the homepage to the slideshow page.

    Could you help me figure out how to generate the blog page, or where to look for it? I hope this is clear, if not, let me know and I can try to clarify my question. Thanks again so much for this great resource!

    Kelly

    1. Hi Kelly,

      first of all: I think you’ve done a great job tweaking the theme – your site looks very simplistic and clean. I’ll be no problem getting that blog part up and running too. And here’s how:

      First create a new page that shall host your blog. We’ll call it “blog” for this example. Leave it blank, then hit Publish.

      Next have a look under Settings – Reading. This will allow you to select which page will display your front page, and which one will display your blog posts. For the latter option, choose your new “blog” page from the dropdown and hit save.

      Now what’s the URL to that new blog page? The answer depends on how your Permalinks are setup. I’ve had a quick check on your site and it looks like you’re using the default “ugly” structure. That’s to say pages and posts are addressed by their post id like this: http://kellycreedon.com/?page_id=312. You can change this to something more meaningful like http://kellycreedon.com/gallery etc. under Settings – Permalinks. We’ll leave it as it is for now as you can update the Permalink Structure later.

      Go back to your Pages and hover over some of your page titles here. See the number at the bottom of your web browser change? This shows you the Post ID of each page. Hover over your “blog” page and remember the number. Say it’s 47, then the URL to your blog is http://kellycreedon.com/?page_id=47.

      Hope this all makes sense – and good luck πŸ˜‰

  3. I’m using the full version of modularity and i’m having trouble figuring out how to make the homepage slider automatically scroll…any suggestions? Thanks a lot!!

  4. Hi Jay,
    I have been working with the Modularity Lite theme for a few weeks now and I am a novice developer. One think I am trying to accomplish is to make the semi-transparent container maybe 10-15% darker so the white text will display better. I tried to upload an edited version of the “repeater.png” image file as you indicated in another inquiry, however, I must be doing something wrong because it still does not change or the container disappears entirely. Also, if you had any advice to impart about the blogging feature for this theme I would greatly appreciate it. When I started creating pages from the home page I soon realized the blog was showing up on each and every page. I would like to have a very minimalist environment so I deleted the footer, comments, and possibly some other theme code so the Blog does not appear at all now. It there a way to get it to function on one page without building a custom child page? I think I am probably really out of my element on this one. I am really striving to learn the WordPress platform so I hope to hear from you. I actually have a number of other questions. Thanks and I will try to be more concise in the future.

    1. Hi Thomas,

      the repeater graphic is an overlay to the entire site, including the text – hence you don’t see an improvement when you change it. I guess removing it altogether will increase your font contrast. Then you can change the colours under Appearance to #fff (that’s pure white and should yield the highest visibility).

      It’s difficult for me to comment on your blog problem because I don’t know what you’ve deleted. I suggest you download the theme and install it “as is” in a new subdirectory, then check if you can get the blog to work and take it from there. If you make amendmends, you may want to create a child theme or if you’d rather like to hack the original code, safe your amendmends stage by stage.

      Good luck πŸ˜‰

  5. This page/thread has been an absolute life saver! Thank you! I am setting up my page and have the blog turned on. Wondering if there is a way to specify the number of blog posts that appear on the main page?

    Thanks for any and all help you might be able to provide me with!

    1. Thanks Greg, I’m really glad it helped!

      Yes you can specify the amount of posts that are displayed under Settings – Reading (Blog Pages show at most … posts).

  6. Hi!

    FYI this is a super impressive amount of information. Great job!

    I’m trying to get all of my sub-pages to match the layout of the initial page. my friend likes the amount of space that the BG image has on the front page, and wants that on all of the children. ive been eyeing over all the stylesheets, etc, and I can’t figure out where I’d set that. I’m sure its easy, but I’m just blind.

    Any help would be huge.
    All the best.
    ~ Dave

    1. Thanks Dave, much appreciated!

      You are referring to the start of the headline correct? It’s slightly lower on the front page compared to other posts and pages. I’ve had a look into the CSS but that’s rather difficult to style this seperately. The easier option is less accurate but done in a flash.

      Have a look in your single.php and page.php (and page-wide.php if you’re using that template). Right after

      <div class="content">

      insert one or two of these to make the content drop down a line:

      <br />

      It’ll make the headline of the post/page and its content start one line later. Try two and you’re near enough there so your content doesn’t interfere with yout header image anymore.

      Good luck πŸ˜‰

  7. Hi Jay!

    I have 2 questions.

    1) When I click “older entries” on the homepage of my site http://www.61northband.com, it brings me to the older posts, but the page is not styled. I tried attaching style.css as a in the archive.php file, but I didn’t have any luck.

    2) At the bottom of each individual blog entry on the homepage http://www.61northband.com, it says the date posted, categories, tags, and “leave a comment.” How can I remove the categories and tags and just leave the date + “leave a comment” link?

    Thanks so much! Love your site. You’ve already helped me out immensely with a question a few months ago.

    Alicia

    1. Hi Alicia,

      glad to hear you like the site, and good to hear those tips helped you! I’m totally stumped about issue no. 1 – I’ve tried to reproduce this on my test install, but the “older posts” section gets styled correctly. Try installing the theme in another directory and activate it there to see what happens. If all is well there, I’m afraid you’ll have to go through all your modifications again, or compare what’s different. If you haven’t modified the archive.php file then the culprit will most likely be in style.css somewhere.

      Issue no. 2 is simple to solve: Have a look at your blog.php file and see if you can find this piece of code:

      <?php
      $tag_list = get_the_tag_list( '| Tags: ', ', ' );
      printf( __( '%1$s | Categories: %2$s %3$s | ', 'modularity' ),
      get_the_time( get_option( 'date_format' ) ),
      get_the_category_list( ', ' ),
      $tag_list
      );
      ?>

      and replace it with this to remove categories and tags:

      <?php the_time('F j, Y'); ?>

      Good luck πŸ˜‰

        1. It’s in the directory where all the other Theme Files are – like header.php, footer.php, etc.

          By default, that directory is /wp-content/themes/modularity-lite/ – you’ll find blog.php right there.

        2. Okay gotcha. There seems to be something pretty strange going on. I looked in this folder /wp-content/themes/modularity-lite/ for blog.php and it wasn’t there! Which is strange, because I can remember seeing it at an earlier date. So I downloaded a fresh version of Modularity Lite onto my desktop and copied the blog.php file onto my server in the folder where it should have been. But when I make the above change to the tag_list, nothing happens. Also, when I delete the line it doesn’t go away. I wonder if my styling issue (from question 1) and tag issue (from question 2) are related? It seems like something isn’t talking to blog.php that should be, because my blog doesn’t want to acknowledge blog.php. Any thoughts?

  8. Aha! I found blog.php. It is filed under public_html/wp-content/themes/modularity_lite/library/apps/blog.php

    I edited the content and was able to remove the tags & categories from the blog posts. πŸ™‚

  9. Hi Jay

    For some reason when I last tried to locate you via this forum thread I kept drawing a blank. Either way, I’m very pleased to see that you have not disappeared!

    Some of my earlier problems appear to have been resolved in the recent theme and WP upgrade (1.3 & 3.0.3 respectively), although I still could not get my slideshow to work so I just replaced it with a static image of my blog logo. Not ideal but it looks OK and resolves the issue of getting my logo onto the homepage.

    As with these things I have inherited a new problem. I am unable to make the comments function work from my posts. When the link is clicked It just takes me to an error message reading ‘Whoops. Whatever you are looking for, cannot be found’. In Settings/Discussions, I have checked the box allowing comments. Also in each of the test posts I have uploaded so far, I have made sure that the comment function is enabled. I also tried deactivating all my plugins (without backing up beforehand!), but the comment function still would not work.

    In your infinite wisdom, is there anything you can suggest that I look at?

    Many thanks.

    Yann

    1. Hi Yann,

      good to hear from you again! Glad you found me – let me know that forum link and I’ll see if I can correct it next time. It may have to do with the fact that Matt Mullenweg doesn’t klike me using the term “wordpress” in my domain so I had to change it. But hey, now you can subscribe to commets on this blog, as well as new posts from me πŸ˜‰

      I’ve checked into your problem and it’s not the theme causing it. Sounds like a Permalink issue. Have you got a .htaccess file in your home directory? Make sure it’s writable, then go to Settings – Permalinks, select the second one from the top and hit the save button. Then try again.

      If you don’t know what a .htaccess file is or how to create one, check out this article I’ve written.

      1. PS: The code in this theme has changed so dramatically with every new release that I’ve decided to put up seperate articles for each revision. I’m currently writing one for Version 1.3 which is indeed very different from the version we were discussing earlier. Coming soon!

Comments are closed.