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!
Thanks for the great article! I had a couple questions if you have a moment…
I've replaced the photos in the slideshow with my own by updating the files on my server while keeping the same file names (image1.jpg, etc.). Now, I'd like to make the slideshow a clickable link to my home page. Any suggestions?
Also, I'd like to replace the 'categories' drop menu in the navigation bar with a 'home' link. So, removing the drop menu and just making it a hot link to the home page.
Thanks so much in advance! Great site!
Billy
Hi Billy,
no problem – let’s look at the slideshow first. You can turn the entire slideshow into a link by editing the slideshow-static.php file (it’s in /wp-content/themes/modularity-lite/library/apps/slideshow-static.php). You’ll see five <div> tags followed by a closing </div> tag. Above the very first one, start a link like this:
<a href="http://yoursite.com">Then at the very bottom, after the closing </div> tag you’ll close your link tag like this:
</a>Save the file and upload it back to your server. Now your slideshow is a hotlink to yoursite.com 😉
To replace the Categories drop down entirely and put a Home link there instead, edit the nav.php file (in wp-content/themes/modularity-lite/nav.php) and find the following bit of code:
<ul><li><span>Categories</span>
<ul>
<?php wp_list_categories('orderby=name&depth=-1&title_li='); ?>
</ul>
</li>
Replace it with this:
<ul><li><span><a href="http://yoursite.com">Home</a></span>
</li>
Voila – no more categories, and instead you’ll have a clickable home link back to yoursite.com.
Hi YBB,
I’m glad at least one issue is sorted – I’m still at a loss as to what’s happening with the slideshow. One static picture will certainly cure the problem, but it would be much nicer to get this going with a slideshow wouldn’t it?
Best I can suggest (if you have the time) is to upload Modularity Lite again in a seperate folder and start from scratch. I know it’s a pain. Alternatively, I can have a look at the site for you for a small charge – have a look under Support on this site. It’ll involve probing your site in depth a bit 😉
I really hope you love doing this, because you answer every question everyone ever has and you do such a great job doing it. Thanks so much for your help!
Billy
Hi Jay
Have learned a lot from your information posted here. Am attempting to change my navigation menu from the drop down "categories" to a "home" link. Works OK except now the dotted divider does not show up between "Home" and "Pages" link. Any way to correct this? Thanks again for your work.