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 photonovice,
the F8 theme is a bit off topic I'm afraid. I had a quick look though and found that in order to activate the slideshow you have to go to Appearance – Theme Options and select either Minimalist Slideshow or Overlay Text on Slideshow. It's switched off by default. The images for the slideshow do not reside in a seperate folder anymore, but are selected from your latest 5 image uploads.
Hope this helps 😉
Is there a way to add the "by: author"
Yes there is. Depending on where you’d like this information to appear, there are two things to amend. If you’d liketo see the author when people click on the post, have a look at the single.php file and find the following line of code:
printf( __( 'This entry was posted on %1$s. It was filed under %2$s%3$s.', 'modularity' ),Change it to these two lines:
$author = get_the_author();printf( __( 'This entry was posted by ' . $author . ' on %1$s. It was filed under %2$s%3$s.', 'modularity' ),
If you’d like to post the author information on the front page/posts page, have a look at the blog.php file and find this line of code:
printf( __( '%1$s | Categories: %2$s %3$s | ', 'modularity' ),Change it into these two lines:
$author = get_the_author();
printf( __( $author . ' on %1$s | Categories: %2$s %3$s | ', 'modularity' ),
Hope this helps 😉
Hi Jay,
Thanks so much for this great page — tons of great info. I've been using a prior version of Modularity Lite (I installed it and built my page in January of 2009) and need some help. I know you've talked quite a bit about how to get the slideshow up and running on a page that is separate from the blog postings page, and my question is related.
My site is http://www.kellycreedon.com. When I started, I didn't want it to look like a blog, so I hacked away at the functionality and made a slideshow only home page and a bunch of sub-pages that I link to through the nav. But now, I'd like to use the blog functionality and I don't know how to put it back in.
What I'd like is to keep the slideshow only on the homepage, and have a separate blog page display all my posts. The problem is, I don't know how to generate the blog page, or what the url would be. I will eventually add a tab in the nav section to go directly to the blog, and I think I know how to do that, and I think I know from your other posts how to direct the homepage to the slideshow page.
Could you help me figure out how to generate the blog page, or where to look for it? I hope this is clear, if not, let me know and I can try to clarify my question. Thanks again so much for this great resource!
Kelly
Hi Kelly,
first of all: I think you’ve done a great job tweaking the theme – your site looks very simplistic and clean. I’ll be no problem getting that blog part up and running too. And here’s how:
First create a new page that shall host your blog. We’ll call it “blog” for this example. Leave it blank, then hit Publish.
Next have a look under Settings – Reading. This will allow you to select which page will display your front page, and which one will display your blog posts. For the latter option, choose your new “blog” page from the dropdown and hit save.
Now what’s the URL to that new blog page? The answer depends on how your Permalinks are setup. I’ve had a quick check on your site and it looks like you’re using the default “ugly” structure. That’s to say pages and posts are addressed by their post id like this: http://kellycreedon.com/?page_id=312. You can change this to something more meaningful like http://kellycreedon.com/gallery etc. under Settings – Permalinks. We’ll leave it as it is for now as you can update the Permalink Structure later.
Go back to your Pages and hover over some of your page titles here. See the number at the bottom of your web browser change? This shows you the Post ID of each page. Hover over your “blog” page and remember the number. Say it’s 47, then the URL to your blog is http://kellycreedon.com/?page_id=47.
Hope this all makes sense – and good luck 😉