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.
I know what you mean, I don’t think the Background option is embedded that well in the latest version. It only sets the background colour of the page but leaves all the other colours untouched – including the footer-wrap colour which is what you need to change in style.css. Have a look for this code block:
/* Footer */
#footer-wrap {
background: #000;
}
Change the background value to a colour of your choice (#fff for white, #aabbcc for light blue, etc) and you’re good to go.
Hope this helps!
So, I actually also wrote to Graph Paper, who made the theme and they replied! In case others have this problem they sent the correct php. for the Full-Width template and said to replace the current full-width-page.php file with the one I’m attaching. PROBLEM IS, WHERE DO I FIND THE CURRENT PHP FILE? Is this possible if I haven’t paid to edit CSS and/or have workpress.com, not org.?
Here’s the code for you who need it:
<div id=”post-“>
” . __( ‘Pages:’, ‘modularity’ ), ‘after’ => ” ) ); ?>
<?php edit_post_link( __( 'Edit', 'modularity' ), '’, ”); ?>
Hi Liz,
I’m afraid this upgrade will only work on self-hosted WordPress.org blogs – it will not work on WordPress.com. Even if you pay for the Custom CSS upgrade, you won’t be able to change your themes PHP files – only add to the styesheet.
The version at WordPress.com is a proprietary version that does not follow the upgrades developers make to their themes – it would have been £frozen” at the time it has been incorporated into .com – they do this for security purposes. On self-hosted sites, the full-width-page.php is inside your theme directory, i.e. /wp-content/themes/modularity-lite/
If you’d like to get hosted, drop me an email and I can set you up for £60 + VAT pear year. Drop me a line if you’re interested.
Thanks for sharing the code 😉
Hello there,
I am trying to set up a slideshow on my header image but I only get a static image. I have tried to locate the modularity-lite/images/slideshow folder but it’s not there.
Help would be greatly appreciated.
Thanks a lot !
Peace !
Hi there,
I’m toying around with this theme and find it great.
Could you please tell me how to remove the transparent container from the ‘Home Page’ only, or from the Posts?
I’ve changed the repeater.png to be a bit lighter so it looks better on all the pages, but I don’t want it at all on any posts or the home page only. Yet on all the other pages I do, eg. ‘About’ page.