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 http://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!)

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

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

  1. Hi Jay,

    Perhaps you’ve already answered this question, but how do I make the Top Navigation Menu perform a drop down function when the mouse is over the page?

    I’m definitely a newb when it comes to using Modularity Lite. Twenty Ten seemed to do this automatically after selecting a Parent Page/Child Page, but I guess I’m not understanding the process.

    Thanks in advance,
    Jim

    1. Hey Jim,

      Yes that’s an easy fix: define a custom menu and activate it, that’ll bring your drop downs back to life. The old (default) hierarchy isn’t so useful anymore.

      In a nutshell, head over to Appearance – Menus and create a new menu. Call it anything you like. Next, activate it (top left). Now add pages, categories and custom link to the menu. Drag and drop them anywhere you like – move items slightly over to the right underneath another item to create “child” items. These will drop down.

      Save and refresh your front page to see the result. It’s magic 😉

  2. Hello. I have the modularity lite theme installed on my wordpress.com – blog, as you can see if you visit. I’m currently trying to move my blog to a new host, still wanting to use the modularity lite theme in wordpress. BUT there’s no option to have the white theme? Only black? Can you please help me out how to get the white theme? Thank you 🙂

    1. Hello Anne,

      The themes they use on WordPress.com are often modified versions of what is available from the theme developers. WordPress tweak them slightly so they fit in better with the overall infrastructure. I this case it includes a lovely colour options menu which is not available in the version from GraphPaperPress.

      They do make their versions available from time to time though, I’ve had clients who went for the Guided Transfer option (in WordPress.com under Store, at the bottom). You can always ask the WordPress.com Support Team if they can provide a link to those files: http://en.support.wordpress.com/contact/

      Let me know if they do.

  3. Hi Jay,
    I wonder if you have any ideas about a browser-specific problem I’m having with the slideshow on my site. I’m pretty sure it all worked fine before I updated to the most recent version (I didn’t check all the different browsers very often so I could have not noticed!). Now it still works fine on most browsers, but on Internet Explorer, it just shows all my slideshow images top to bottom down the page. I’ve probably done something stupid, but if you could help it would be extremely useful. The site in question is http://neuronspoiler.com.

    Thanks so much for any help
    Tim

    1. Not necessarily,

      If you say it worked before you’ve upgraded the theme then I’d say something in the theme may have changed which caused the problem. Which version were you upgrading from? If you have a backup see if restoring it may solve the problem.

      Having said that, Internet Exploder is one of the worst browsers when it comes to compatibility – and that includes IE9. If anyone can help it’s probably they guys at Graph Paper Press.

      I had a look at your site in Safari in iPad and it looks fine. I’d say if it looks good in Firefox, Chrome, Safari and Opera you’re doing OK 😉

  4. Hello hoping you can help. I use the modularity theme on a couple of sites of mine but the most frustrating thing about it is I can not get any kind of footer bar to appear. For example you can download plugins which show a social bar at the bottom of your site or the new EU Cookie Compliant pop up, but nothing I try will show. I do not have the option to change the theme and wonder if there is something I am missing out and need to do to the footer code to make these type of items appear.

    Thanks in advance

    1. Hi Emma,

      Modularity Lite has four widgetised footer areas so you can drag and drop widgets into place. You’ll find those under Appearance – Widgets, the areas are called Footer 1-4.. If you’d like to add your own code underneath those widgets you can amend the footer.php file which produces the text that by default reads “Theme: Modularity Lite by Graph Paper Press”.

      Hope this helps 😉

      1. Aware of the wigistised areas and that I can put code in, but that’s not the issue. The issue is that any kind of plugin, which will sit at the foot of the site, does not appear. So for example something like StreamPad’s bar would not appear, the same for the Cookie Control plugin: http://wordpress.org/extend/plugins/cookie-control/

        Anything I try which is a plugin which will sit at the tail end of the site will not appear but will show if I use another theme, but as I said, changing theme is not an option – the build is too new and the client does not want to change the look. And the theme works for most everything else we need.

        Thanks again for the help

        1. Oh I see, thanks for clarifying this. OK I’ve just tried both plugins on a test site with Modularity Lite 1.3 and both plugins work fine, even together. Cookie Control shows an orange triangle at the bottom left, and the StreamPad bar also appears as it should – i.e. both hovering at the bottom with the site scrolling behind them.

          Those are both CSS effects hence I wonder if it’s just your browser not showing it properly. I’d try a different browser just to make sure it’s the site and not the local client. Alternatively try clearing your browser cache, they do get into a pickle every now and again.

          If it’s not the browser see if another plugin on your site is getting in the way of the effect. This happens sometimes with conflicting JavaScript libraries. Try disabling all other plugins and see if this makes either Cookie Conrol or StreamPad behave correctly. It’s definitely not the theme causing them to fail.

    1. Hi Vincent, to remove the the title of Modularity Lite place this at the bottom of your style.css file:

      .logo {display: none;}
      .description {display: none;}

      This will remove both the title and the tagline. Hope this helps 😉

  5. Jay,

    Perhaps you can help me, I can’t seem to find an answer and your site has been very helpful. I’m running Modularity Lite on my website, and have resized the “slideshow” at the top. What I’d like to do is now move the sidebar widget up to the header so that it basically wraps around the slideshow with the menu going down from that point. My website is http://www.TarHeelLacrosseClub.com. If you go I think you’ll see what I mean, as of now there is just a black empty spot next to my slideshow that I want the whole widget sidebar area moved up to.

    Also want to make the search box a bit bigger as well so it is the same width.

    Thanks for any help!
    -Nick

    1. Hi Nick,

      I’ve had a good look into this but sadly it would mean so many tweaks that you’re probably better advised to get another theme instead. Maybe the makers of this theme over at GraphPaperPress.com can help, they have an excellent support community.

      All the best–

  6. Is it possible to comment out the code which displays the posts on the homepage? I’d like for it to just display the slideshow with each image linking to the full post page. If so, where is that code in the editor?

    Thanks!

    1. Hi Laura,

      yes there is – you’ll need to delete most of the blog.php file, namely after the first DIV tag up until the PHP call for the sidebar. I make that lines 9-50. You’re left with this code:

      Hope this works – it’s the first time I’m using Gist (which is the embedding thing). Just in case it doesn’t, here’s the link to the code on Github: https://gist.github.com/2929075

  7. Hi. A friend has asked me to put together a site for him and we’ve settled on Modularity Lite. He’s a photographer and would like his images in the slideshow to appear at camera format (on here that would be 950×713 pixels). Your tweak above shows how to crop the slideshow down even tighter but I tried increasing the height without success. Do you know if this is something I can do or is it not possible within this theme? Thanks for your help.

    1. Hi Stuart,

      yes I’d say all you need is to make sure the slideshow is displayed taller, just like we made it slimmer in the example above. Add this to the bottom of your style.css file and you should have a slideshow that’s 713 pixels high:

      #slideshow {
      height: 713px;
      }

      Hope this helps 😉

  8. Hi I wonder if you could help. I am currently designing a site in Modularity (not the lite version). I have set up for 5 categories to be displayed on the front page, each with a post title and abit of text under. At the moment I can click on the post title and it takes me to a designed page. However when I click on the Category Heading, it takes me to the same info, but a totally undesigned page. Any suggestions on what part of the coding I am missing or doing wrong? I understand HTML coding, but am not so hot on PHP.

    1. Hi Melissa,

      sadly I haven’t got a copy of Modularity (I’ve only every used the Lite version) – have you got a link to your site so I can have a look?

      If it’s not an option within Modularity then the only thing I can think of is that it perhaps uses the Category Description. Have a look under Posts – Categories, then edit the category. At the bottom you’ll find a small text box which some themes use prominently. It’s a long shot, Modulaity Lite doesn’t use it.

  9. Thanks I will have a look. I am designing a site for someone who wanted the Modularity theme. Usually I design completely from scratch using Dreamweaver, so I don’t have any restrictions! Hey ho. Thank you

Add your voice!