How to modify the Modularity Lite 1.2 from Graph Paper Press

Display Slideshow on pages other than The Blog

By default the Slideshow only gets loaded in the index.php file via the following statement:

<!-- Begin Slideshow -->
<?php include (THEMELIB . '/apps/slideshow-static.php'); ?>

This means it will only ever be displayed on your “home page” unless we insert that statement elsewhere. Insert the above code in your page.php file to display the slideshow on all pages, and/or in single.php to display it on every post. Put it right underneath the line

<?php get_header(); ?>

If you’d like to show the sldieshow only on one particular page or post, you need to find out its ID and write a little if…then statement like so:

<code>
<?php
if ($page_id == 11)
include (THEMELIB . '/apps/slideshow-static.php');
?>
</code>

This statement tests if the page ID is 11, and if it is, the slideshow will be displayed. To find out your page ID, you can go to pages (or posts) and hover your cursor over the one you’d like to query. In your browser status bar you’ll see the post ID as part of the URL.

Displaying more than 5 images in the Slideshow

For this task you’ll need to edit /library/apps/slideshow-static.php – it’ll list 5 images, just add more or use your own file names. The images for the slideshow are stored in the /images subfolder of your theme.

Changing the Height of your Slideshow

There used to be a handy theme option in Modularity LIte 1.1 where you could do that – but I think this has been removed in Version 1.2. Instead, have a look at the style.css file and find the following line of code at the bottom of the file:

/* Slideshow */
#slideshow {padding:0;list-style:none;margin:0 0 3em 0;overflow:hidden;min-height:425px}

The min-height parameter is the height of the slideshow, no matter what size your images are. Set it to something like 225px and see the results.

If you’d like to make the entire slideshow smaller, have a look at the very bottom of your style.css file and find the code that styles the slideshow. Replace the height and width values to make the slideshow smaller. I’ve opted for images 400×180 here.

/* Slideshow */
#slideshow {padding:0;list-style:none;margin:0 0 3em 0;overflow:hidden;min-height:180px;}
#slideshow .slide {padding:0;width:400px;text-align: center;min-height:180px; background:none}
#slideshow .slide h4 {margin: 0 0 .5em 0;text-transform:uppercase;padding:0 16px;}
#slideshow .slide img {display:block;max-width:400px;text-align:center;margin:0 auto;}

Note that this leaves some unused space on the right of the slideshow (good for a static logo or some text). You don’t necessarily need to change the size of your actual images on the server, however if you do your images may look a bit better and it takes the client’s browser less work do resize on-the-fly.

Tweaking the Navigation Menu

If you’d like to add or remove items from the Nav Menu, have a look at the nav.php file in the main theme directory. All dropdowns are CSS styled HTML lists, so amending them with your requirements shouldn’t be too taxing.

For example: say you’d like to replace the “Categories” tab with a clickable “Home” tab. Simply replace this code

<ul>
<li><span>Categories</span>
<ul>
<?php wp_list_categories('orderby=name&depth=-1&title_li='); ?>
</ul>
</li>

with this code:

<ul>
<li><span><a href="http://yoursite.com">Home</a></span>
</li>

Hover my Sub Menus

By default, you’ll have to click each tab in order to display the sub menu. If you’d rather display those when you hover, have a look in your style.css file and find the following bit of code:

#nav ul li.drop:hover ul { display: block; }

Then change it to this:

#nav ul li:hover ul { display: block; }

The “.drop” waits for you to click before the menu gets displayed and by deleting it the menu gets displayed upon hovering.

Modify the Credits

The Credits are part of the footer.php file, should you wish to add, remove or amend portions (maybe you want to add your affiliate link to Graph Paper Press). Please note that it’s good practice to give credit where credit is due, and if you’re using a free theme, why not give the author a link to say thanks.

If you’re after a ton of more functions out of the box, consider the full version of MODULARITY by GraphPaperPress. You’ll also get access to support forums and video tutorials on how to set this puppy up.

Have fun

Pages: 1 2

Tagged as: modularity lite, theme