How to style Modularity Lite 1.3 by GraphPaperPress

Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website SoundCredit.tv.

My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.

Instructions Included

Your first port of call when tweaking this theme is to check out the included instructions. They can be found as handy HTML file in /wp-content/themes/modularity-lite/instructions.html. So if your website is www.yoursite.com, and WordPress is installed in your root directory, you can read them browsing http://www.yoursite.com/wp-content/themes/modularity-lite/instructions.html

It’s essential reading. Tells you a lot – but not everything 😉

Dynamic Slideshow

The new dynamic slideshow pulls in images from your last 5 posts and displayes them. For this to work, you’ll first have to enable the slideshow by ticking the box in Appearance – Theme Options.

I had some trouble getting images to show up, so here’s what I’ve learnt:

  • Images need to be associated with posts. If you add them to a page, or if you upload them via the media uploader without associating them to a post, those images will not show up in the slideshow.
  • Your slideshow is 950×425 pixels by default. If you upload images that are smaller than this, they will not show up.

To reiterate: Slideshow images MUST BE exactly 950×425 pixels or larger. Smaller images WILL NOT show up. Don’t ask me why – I’m just the messenger 😉

Slowing Down the Slideshow

Again this has slightly changed from previous versions. Those transition effects are done with something called Jquery Cycle Plugin. For our purposes, we need to have a look at the functions.php file and find this bit of code at the bottom of the file:

The “timeout” value is the one we want to change. Change it to 5000 and your slides will show for 5 seconds, 10000 will show them for 10 seconds, etc.

The “speed” value is responsible for the transition duration. The default looks good to me, but try 5000 for sloooower transitions, or even 1 for cuts between pictures.

Static Slideshow

I wanted to build a brochure site with static pages and didn’t need the punch out catalogs,CMS or “posts” part of the website. By default however, the slideshow only displays when you show “your latest posts” on your homepage. It disappears when you show “a static page” (you can select this under Settings – Reading).

My first idea was to only show one post on the front page and be done with it – however this will only display the image from the post shown. Images from Posts that are not shown are not incorporated into the dynamic slideshow. Bugger!

This leaves us no option but to re-write the code that used to work so well in Version 1.2. Let’s do that. First, let’s create a folder for our images:

  • in the theme folder (/modularity-lite/) find the /images/ folder and create a new one called /slideshow/ – just like in the old version you’ll end up with /modularity-lite/images/slideshow
  • find 5 suitable images you’d like to use for the slideshow (950 x 425px or larger)
  • name them “image1.jpg”, “image2.jpg” and so forth amd upload them into the slideshow folder

Next, edit the page.php file and find where the get_header() statement is executed. Right underneath it we’ll call the slideshow images by adding this bit of code:

<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('name'); ?>

 

This will rotate our new images on each and every page – no questions asked.

If you would like to use the static slideshow on your “blog” page instead, then insert the above code in the index.php file (again underneath the get_header() statement).

Conditional Slideshow – only show it on certain Pages

Making the above principle of the Static Slideshow conditional is a tad more tricky because it requires more coding; say you have 5 static pages and you only want the slideshow to show up on one of them, that sort of thing. Here’s what you need to do:

  • take the above slideshow code and put it in an empty text file
  • call it “slideshow.php”
  • upload it into the theme’s directory (in our case the full path is wp-content/themes/modularity-lite)
  • find out which page ID you’d like the slideshow to appear on – I’ll explain how this works in a minute

Next, open your page.php file and add the following conditional statement underneath the get_header() statement. For this example, we’ll assume your page ID is 11:

This snippet will check if we’re on the right page, and if that is the case it loads the code from above via the file you’ve uploaded. If we’re on any other page it simply ignores the file and no slideshow is displayed.

To find out your page ID, go to Pages and hover your mouse over the page titles. Keep an eye on your browser status bar at the bottom – you’ll see the value change where it says “…?post=11” – that number is your page ID.

Changing the Slideshow Height

Would you like to adjust the height of the slideshow? That’ll turn it into animated headers – very swish indeed! All you need to do is take a look at the style.css file and find the following snippet (it’s towards the end):

Adjust the min-hight parameter to something like 200px and your slideshow loses some height. Regardless of how tall your pictures are they will be cropped automatically (and free of charge… nice!)

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

231 thoughts on “How to style Modularity Lite 1.3 by GraphPaperPress

  1. Hi

    I am using Modularity Lite v 1.3

    I would be really grateful if you could tell me how to edit the style for the background image for the page / body. I have set an image for the background but it is faded and the text should be white that also has a faded effect. I can’t for the life of me work out how to turn this effect off.

    Your help would be really appreciated

    1. Hi Derek,

      it’s probably the translucent image that is set as a background over the container. In the original styling it gives the theme a really nice dark rich look – but as soon as you start to modify it away from dark this effect is often just annoying.

      To solve the mystery, add this to the bottom of your style sheet:

  2. Hi there, I love the Modularity Lite theme, and have been using it for a while on my band website.
    I’ve just been doing a site update. I didn’t need to update my theme (I’m using Modularity Lite 1.3). But during the update, the quick link to the CSS stylesheet editor has vanished, along with the changes I’d made to reduce the H1 font size. I can’t find any reference to the H1 size in the stylesheet itself. Can you point me in the right direction?
    Cheers
    Ros

    1. Hi Ros,

      you’re right – I can’t find a reference to h1 tags in the CSS either. Which element are you trying to style?

      The CSS Stylesheet Editor may have been part of another plugin, such as Jetpack. You can always head over to Appearance – Editor, which will display the stylesheet of the current theme you’re using. Anything you add to the bottom of it will overwrite the existing styles. The downside of course is that with a theme upgrade your changes here would be wiped out.

      1. Thanks Jay – I was wanting to change the title font size. I tried adding something into the CSS stylesheeet itself, but it didn’t have any effect.

        Bizarrely, the stylesheet editor quick link has reappeared, so it’s resolved now!
        Cheers

  3. Newbie with no coding knowledge seeks a couple of answers. I can’t find a Facebook app/widget that works with the site. I’m sure it’s me. I can put buttons between the posts and can type a comment but can’t send. Seek to know what should work. Is there a way to put the search button on the site and still keep the one grid wide screen? Thanks

    1. Hi Ken,

      you can use the footer widgets for such things as the search bar and the Facebook box. That way your widgets show up at the bottom of the page, like your Archives Widget.

      As for Facebook, look into the Jetpack plugin, it contains a Facebook Fanpage widget, similar to the one on the right hand side here. I’ve installed Jetpack on another site with the Facebook box over at Pinkstone Pictures.

      Love your customizations by the way!

  4. My site quit loading pictures to the posts. They are there and look fine in the preview but only the picture link appears on the screen. The scrolling feature disappeared leaving a black hole and I turned it off. How ever I’m sure the two are related. I would appreciate input on any steps I can take. site is dead in the water now. Thanks

  5. Any new post fails to load the picture. I just left one as the first new post to show you. I did not caption the post but the picture is Emo Girl. I also noticed this happened right as I reached 1000 pictures on the site. Thanks

    1. Thanks, that gave me some insight. I don’t think it’s your WordPress installation, it appears to be the actual image data. This is direct a link to the media file which cannot be displayed in my browser (bypassing WordPress): http://i2.wp.com/www.kindawarped.com/wp-content/uploads/sites/2/2013/04/emo_girls-wallpaper.jpg. I’m getting this message: We cannot complete this request, remote data was invalid.

      A different image can be displayed without problems: http://i1.wp.com/www.kindawarped.com/wp-content/uploads/sites/2/2013/04/Chambord-Castle-France.jpg?fit=949%2C9999%20%3E%3E%20i1i1.wp.com/www.kindawarped.com/wp-content/uploads/sites/2/2013/04/Chambord-Castle-France.jpg

      My guess is there’s a problem with the system that’s hosting your images. Are you using a CDN? Perhaps you’ve run out of space there.

      1. I deleted 40 pictures and 50 old posts. That did not change anything. I don’t even know what a CDN is. I may be down to deleting either the theme and reinstalling or possibly reinstalling WordPress 3.5. As I am not that knowledgeable I am concerned with losing everything I have. I appreciate your direction on a good direction to go.

        1. I can’t even answer that until I can get my son on the phone. He provides me a free Linux host thru his work at small Business solutions in Phoenix, AZ. USA. If getting into the word Press for the site would help I can provide user/password in response to a personal e-mail from you to kindawarped@comcast.net

  6. No one uses the buttons on top of my home page! I suspect that it is because they don’t really look like buttons as they do not have a contrasting background. I use the WordPress official font widget but don’t understand the two boxes associated with colors. Should an alternate background be there for the buttons in Modularity Lite? If so is there a guide for the font widget.

  7. Hi Jay,
    First i tried to learn which Mod.Lite version i have……and i dunno :S
    I think i last changed theme a year and a half from now.
    I dunno s*** about css or html ( i couldn’t figure out how to use the link above “/wp-content/themes/modularity-lite/instructions.html” to read a little and find a solution by myself )…..and i didn’t bought the domain.
    You’re kinda my last resort….except browsing other themes and having to redo the whole thing….and find other stuff that i can’t figure out how to tweak :S
    Well…my question is about pages. WordPress says i can nest pages in pages but it doesn’t work.
    What i want to do is to have a page on the menu bar and nest other pages in it. I don’t want to show pages using the widget on the sidebar ( i want my layout to be as minimal as possible, but i need some widgets showing so i use the 2-columns front page ).
    So if you know how to tweak it…or links i should read….giv’em to me.
    Thanks!

    1. Hi Mel,

      Sorry for the delay in my reply – life has been busy. Let me see if I can help you.

      In a nutshell, there are two versions of WordPress, one of which can be used with the version of Modularity Lite that I was discussing in my article. Yours is the hosted version, and as such none of the tweaks I’ve discussed apply to your version – this is because your version is hosted at WordPress.com, not on your own server (and therefore you can’t make amendments to the files). Hence you couldn’t find the readme file. But that’s all good, because what you want to do works fine with your version.

      Nested pages is an older concept that means a parent page can have sub-pages which would show up underneath it in the menu. Nice this was extremely limiting, WordPress have since then introduced Custom Menus in which you can nest anything you like. The menu at the top of this page is done that way.

      Have a look at my podcast episode which explains how to set those up: https://wpguru.co.uk/2011/02/custom-menus/

      Hope this helps!

  8. Hi guru,
    i did exactly what you wrote about Dynamic Slideshow: images associated only with posts (five) & sized on 950×425 px. Nothing happened! Slideshow doesn’t appear! Of course i enabled it by ticking the box in theme options.
    How come?
    Tnx a lot!

  9. Hi guru,
    i did exactly what you wrote about Dynamic Slideshow: images associated only with posts (five) & sized on 950×425 px. Nothing happened! Slideshow doesn’t appear! Of course i enabled it by ticking the box in theme options.
    How come?
    Tnx a lot!

    1. Hi Gianfranco,

      it’s a tricky one. At first I thought that perhaps the theme being from 2010 (4 years ago) may have something to do with it. But I’ve just tried it myself, the slideshow still works fine on my local test site. Here’s what I did, starting with a fresh WordPress installation (3.5.2):

      • download Modularity Lite 1.3 from http://wordpress.org/themes/modularity-lite
      • activate the theme
      • head over to Appearance – Theme Options, and activate the slideshow, then “save options”
      • create a new post and insert an image into it, anywhere will do – beginning, middle or end, doesn’t matter
      • publish the post and head to the front page – see the lovely slideshow

      One thing that’s important is the image size. They need to be 950×425 or larger (mine were all 1300×1000). Images must be hosted on your server and inserted via the “add media” button when you’re writing your posts. No special category is necessary, but an image needs to be present in a post for this to work.

      Images won’t show up when inserting links from external sites (like Flickr) or when inserting images hosted on your site that are associated with posts other than the latest ones. When you add images, it doesn’t matter what size you insert them as – for example, you can upload a 1000×1000 image, and then only insert the 150×150 thumbnail into your post. Modularity Lite will still use the high res image for the slideshow.

      Works for me, I hope you can work it out.

Add your voice!