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.
Hi Jay
Hopefully you can help me with probably the first of a few issues i'm having setting up my blog!
I eventually managed to change the initial theme images on the slideshow with some of my own. However, the images display down the page one after the other rather than blending from one image to the next as I believe it should.
Please can you assist me in resolving this. You help will be very much appreciated!
Yann
Hi mofizzy,
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>
Hope this helps ;-)
Hello. I'm a novice when it comes to all this so please forgive my ignorance in trying to learn what's going on! My initial issue is, I have managed to change my slideshow images, but now they just display one after the other down the home page, instead of fading from one to the next in the same place. Please can you point me in the right direction as to what I need to do, to amend this. Sorry but if you could explain as if to a child, so I have a chance in understanding.
Many thanks.
YBB
Hello again. On a separate issue. I changed the background (bg.jpg) image on the ftp server, in the same way I changes the images for the sideshow. Despite this, my blog (http://www.ybbblog.com), still seems to pick up the original image. Does anybody know why this might be? I'm sorry for the multiple queries, but despite spending days trying to work these things out myself, i'm going round in circles.
Many thanks.
YBB
Hello Yann,
I’ve just had a look at your site and I CAN see your new background image – so all appears to be well on that front.
This happens sometimes because of browser cache issues (I always assume I’m going insane, but all it needs is to clear the browser cache – this can rectify all kinds of issues).
As for the slideshow images I’m a bit puzzled myself. They seem to be in the correct location, they seem to be called the right names in that folder, yet they don’t display as they should. The only difference I can spot is that they’re the same width as the sample images, but not the same height (sample images are 950 x 425 pixels). Try to resize your images and upload them again to see if this solves the problem.
Good luck 😉