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, I recently moved my blog over from .com to .org and I didnt see how much stress it could be,
I was using modularity lite over at .com I presummed the theme would be exactly the same at .org but its not.
all my posts since I imported them seem to be left aligned or have no alignment at all and are all over the place,
I just want my posts to be left aligned if i set it to be that way or center aligned and etc.
When I use the editor, my post looks exactly how i want it to be, but on the page it is not the same
this is my orignal page at wordpress.com http://andredeveaux.wordpress.com
and this is my new page
http://www.andredeveaux.com
I pretty much want my new page to follow the same format as my old one. seeing as its the same theme
ALSO
The images seem to over lap over the theme design on my self hosted blog… it didnt do that on wordpress.com the overlaping images became hidden.
I dont know whats going on, Ive tried playing about with the style sheet but to no avail, im wondering if it something deeper like a php file
@Greg
Oh that’s what you want to do! That is indeed a WordPress feature and not a theme issue.
The only way round it would be to use a plugin like Next Gen Gallery and then bactch upload images with that. To display them full size, all you have to do is set the thumbnail size in that plugin to the size you’d like your pictures to appear (say 500px wide).
@Andre
I didn’t even know they had Modularity Lite at WordPress.com. Most likely it’s a Stylesheet issue: I don’t know if WP.com themes get updated as the theme changes, probably due to security reasons. The trouble is that we can’t download the WP.com stylesheet and compare it to the one from Graph Paper Press.
What you could try though is to call the WP.com stylesheets in your self-hosted blog. To do this, have a look at the header.php file and then replace all references in the section under <!– Styles –>
For example, in your self-hosted site you find this code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/library/styles/screen.css" type="text/css" media="screen, projection" />
Replace that with
<link rel="stylesheet" href="http://andredeveaux.wordpress.com//library/styles/screen.css" type="text/css" media="screen, projection" />
Repeat this for all calls to Stylesheets. There’s no guarantee that this will solve your issues, but it’s something you can try.
Other than that, you may want to have a word with Thad at Graph Paper Press, they have an excellent support forum over there.
@Greg
Oh that's what you want to do! That is indeed a WordPress feature and not a theme issue.
The only way round it would be to use a plugin like Next Gen Gallery and then bactch upload images with that. To display them full size, all you have to do is set the thumbnail size in that plugin to the size you'd like your pictures to appear (say 500px wide).
Ah thanks, I'm gonna try that now, and thanks for such a quick reply, I'll probably be back if I get no where…