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.
im stuck again, I tried editing all my Style sheet to match my wordpress.com theme and it made no change at all, so im thinking its something to do with the PHP files, do you know what file could have something to do with the blog text alignment, I think thats where the problem is, once thats sorted im sure it will contain my images too, but the text alignment is the main issue….
Hey Jay, I managed to get a bit further, Im using the Modularity theme now, and I'm more or less done, I've formatted the code so it looks like modularity lite, but the las thing I need help with is, there is a white line going down the edge of the side bar, and the bottom of the page, how do I make that black? also at the bottom it should be double-border.png and a slightly darker grey than the background, how do I do this?
Oh so you're using the Premium Version of Muodularity now? Good man! 😉
I haven't got that theme myself I'm afraid (yet) so can't really help you. Watch this space though, becasue I may invest in it.
However, if you'd like to see what a certain element of your website is called for further styling, I highly recommend the Firebug Add-on for Firefox. With it, you can hover over an element and Firebug will show you the corresponding piece of code. It makes investigaing a lot easier. Happy hunting, and let us know how it works for you!
PS: your site looks VERY cool – well done!
Hello. Thanks for all this info. I have tried ModLight in my free WP blog and looked ok then I downloaded and installed it on a paid regular hosting service and I see the version is not the same. The slideshow on the WP hosting shows the images from the latest posts but the downloadable one only show the images in the slideshow folder. The complete function "show images from latest posts in slideshow" doesn't exist. Is this possible? Have you heard of this difference? Am I missing some settings? Thank you very much!!
I'm afraid you're correct 🙁
It's because the theme has been refined several times after WP.com have integrated it into their version. So the developer can update his theme, but WP.com may not use the latest version due to possible security exploits.