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.
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?
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. 🙂
Great – glad to hear it! Maybe the location of blog.php has changed with a version upgrade. So is everything good at your end?
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
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.