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,
    Hoping you can help with my problem. I have moved the top menu so it is under the slideshow, but now on posts it is in the centre of the page over the top of content. If I enable wordpress slideshow it creates a black space where header should be. I would like to disable the wordpress slideshow and have the menu bar moved to the top of the page on posts only. Hope I’m making sense here. I not very experienced with coding.

    1. Are you saying you would like to remove the menu from the front page altogether, and just make it show up on posts and pages? I seem to remember there was a discussion about this in earlier comments in this thread.

  2. I am using this theme for my new site and I am hoping you can help me how to adjust the width of the background image to fit any type of screen. I uploaded an image for the background but it doesn’t seem to cover the whole screen (width and height). I tried selecting the different options provided on the background option (left, enter, no tile, fix, horizontal) but still the top or bottom of my image get cut out and the side(width) have some empty space.

    Please help me.

    Thank you!

    1. Looks like you need a bigger background image. If you want to make sure it covers every monitor out there I’d day pick one that’s at least 1200 x 1600 pixels in size – beware though that a large image may take longer to load in your visitors’ browsers, make sure the file size isn’t over 500kB.

      Have you got a link to your site so I can take a look?

  3. Hello I use modularity lite for my blogg and i would lite to take away the bottomline under each post, or if it’s not possibly at least make the black box a little less exposed (changing colors or make it smaller).

    1. Hi Turtex,

      yes you can add this to the bottom of your style.css file and override the colours of the bottom strap:

      .postmetadata {background: #aaaaaa;}

      Replace #aaaaaa with the hex colour of your choice and all will be well 😉

    1. Hi Chris,

      No those customisations are only possible on self-hosted WordPress.org blogs because you have to tweak the PHP files in many cases. WordPress.com is a closed system and as such they won’t let you do this.

      There are certain styling tweaks you can do even with WordPress.com if you pay for the CSS customisations package, but these are limited to changing fonts and colours.

      Hope this helps!

  4. I want to add a pinterest button linked to my account there.
    Can you add plugins to this theme?
    Like the Sexy Bookmarks plugin? … to add the social media buttons?

  5. Hi Jay,

    Great to see so much info on Mod Lite! Having read all tips at least twice we have been able to tweak the template a little bit more to our liking. After yesterday a double “overlay”, if this is the correct term, appeared on the footer of the main page and the same double “overlay” appeared on all the category pages footer and body (http://drivingthrougheurope.com/category/denmark/) as well.

    As this is the first page we’ve ever done we’re happy getting this far. But these last little things are so annoying as we cannot figure out where we’ve gone wrong.

    Ideally we would like the “overlay” to be as wide as the rest of the body so it continues as one, but I couldn’t figure this out by searching the web.

    Looking at http://validator.w3.org/unicorn/ it seems loads more issues need fixing, but I do not know where to find these lines of text. Neither do I know if these would solve the “overlay” issue.

    If you could help us or even point us into the right direction we would be very happy!

    Thanks for you time and help,
    Ken

    1. Hi Ken,

      sorry for the delay – I’ve just moved continents 😉

      I see what you mean, there’s a slighty translucent outer border, followed by the same effect just where the text begins, correct? Double overlay is a very good description for it. I think it may be leftovers of the footer doing this. Add this to the very bottom of your style.css file and see if this works:

      #footer-wrap {background: none;}

      I wouldn’t worry too much about the other validator problems… if the site looks good to the human eye, that’s usually good enough (for humans by humans) 😉

  6. For the life of me I can’t hide the page title without actually deleting the post name from the post admin page (make the post, then remove the title leaving it saved as (no title)). The problem I read with this route is that search engines read the page titles, and having a blank one isn’t good.
    I have google searched my fingers off, trying everything out there with no success. Does anyone know how to do this?
    Thanks in advance.

    1. You can leave the page title blank, and instead tweak the “slug” to match what title you’d like to display to search engines. Alternatively you can use the Title function of some SEO plugins. Themes such as Thesis have this built in. That way you can give whatever appears at the top of your browser a different title than your post.

      Suppressing the page title with CSS (with display: none) will still make it visible to search engines as they do not execute the CSS as far as I know.

      Another (last resort quick fix) option is to live with the page title, but tweak it with CSS to have the same colour as the page background, rendering it invisible. But that’s the same as suppressing it via CSS.

      1. Thanks for replying Jay.
        I am using the Modularity Lite v1.3 template and it appears as if there is something different about it compared to most since nothing I have read and tried worked yet. As you probably know, there is no built in setting to remove it.
        For instance, I wanted to do this workaround and even though I correctly identified the post number and inserted the code, it didn’t hide it
        http://botcrawl.com/how-to-hide-or-remove-single-wordpress-page-and-post-titles-with-css/

        Another example I thought might work was this one –
        http://wpmu.org/wordpress-hide-page-title-or-post-title-on-a-case-by-case-basis/

        The problem here is that when I inspect the page, the title didn’t even have a class associated with it (inspected with firebug), which I found odd. Without the class, I couldn’t use the fix.

        To be honest, I could live with the slug method and a blank title, but the fact that it still leaves a space at the top is driving me nuts. I would like my banner graphic to fit snugly against the top of the floating body if possible. I am going to go put the words “Welcome to P.R.O.O.F.” as my post name (what I want to completely disappear, along with the space it uses), maybe you can identify where I might change this. The page is http://www.proofevidencereview.com
        I really appreciate your effort.

        1. Hi Adam,

          Now that I’m fiddling around with this, I’m beginning to see the problem. Modularity Lite does not distinguish between posts and pages. I’ve added this to the bottom of my style.css:

          .content h2 {display: none;}

          Works a treat – it hides the page title and pushes the content right up to where that title used to be. This would be a global change to all your page titles, not sure if that’s what you’re looking for though. What’s more it also hides every single post title on the front page.

          To make this more specific you can hide individual posts or pages like so:

          .content #post-2 h2 {display: none;}

          Replace #post-2 with your desired post or page obviously. If you want to hide multiple pages just copy and paste that line underneath each other on a new line, then change the numbers appropriately.

          Let me know if this works for you.

        2. Morning Jay,

          That didn’t work, but it did help me to solve it since it lead me in the right direction. I am new to wordpress and my last coding experience was in simple html, so just logically understanding all of this was the primary problem. After your last post, it all “clicked”, and I was able to solve it through trial and error.
          Here is what worked –
          .content h2 {
          display: none;
          }

          This also removes the title from the pages as well, but that’s fine with me as it actually gives me more flexibility, and I can just repeat each page title in the page itself when I write it.

          Another note, I found that I could remove the blank space at the top of the floating container with the following:
          .container-inner {
          display: none;
          }

          So all in all I am very happy, thanks so much for the help.
          Adam

  7. Well I had to do a facepalm after my last post because it blew everything else on my website which uses h2, LOL!
    Sooo, after some more digging with firebug, I found this was the style.css entry it was using:
    a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;

    So I appended the following to my style.css and it is finally gone:
    a {
    display: none;
    }

    1. Try

      .container #footer-wrap {background: none;}

      Looks like one of your modifications went a bit south. On the stock Modularity Lite my previous fix works for both the front page as well as category pages.

      1. Hi Jay,

        You wouldn’t happen to know which modification is causing trouble?
        The main page: drivingthrougheurope.com still shows the wrapper in the footer.

        I have noticed some irregularities in the categories. Looking at http://drivingthrougheurope.com/category/finland/ I see the footer appearing in the sidebar, while http://drivingthrougheurope.com/category/norway/ shows nothing in the sidebar and displays all in the footer.

        Thanks again and happy new year!
        Ken

        1. I just noticed that the footer text is displayed differently on http://drivingthrougheurope.com and http://drivingthrougheurope.com/we-are-here/ or any of the other pages. On the home page the footer only appears in the wrapped area, without having any sort of border to make it a little more elegant.
          While in the pages it does not seem to have a boundary and is displayed over the whole width of the website.

          I hope this might reveal the underlaying issue which could resolve all. 🙂

          Thanks again Jay!

Leave a Reply to Jay Versluis Cancel reply