Storefront Elegance Theme, add navigation to the slider

I was asked if it was possible to add some some Navigation to the Slider

It is possible to add Arrows fro Previous ans Next and Bullets for navigating to slides directly. It would be possible to add thumbnail navigation I believe but that becomes quite complicated as you need to change a bunch of page CSS to make room and also I find the Nivo thumbnail navigation a bit clunky when it comes to positioning. If you really need thumbnails it would probably be easier to strip out the Slider and add a different one.

First activate the Navigation

Luckily The Nivo Slider includes the code to make navigation possible. So first you need to make a couple of small changes to the slider settings in the homepage php file. Open tpl-homepage.php. If you have not done this before jump in these are very simple changes. In fact so simple I suggest you just do them by going to Appearance/Editor in WordPress and opening the file from the list. Of course if you have a proper code editor with line numbers etc go ahead and use it.
Around line 42 you will find the slider settings.

<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
		effect:'<?php echo $slidereffect; ?>', //Specify sets like: 'fold,fade,sliceDown,sliceUpDown'
		slices:<?php echo $sliderslices; ?>,
		boxCols: <?php echo $sliderboxcols; ?>,
                boxRows: <?php echo $sliderboxrows; ?>,
		animSpeed:<?php echo $sliderspeed; ?>,
		pauseTime:<?php echo $sliderinterval; ?>000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:false, //Next & Prev
		directionNavHide:false, //Only show on hover
		controlNav:false, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
      	        controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:<?php echo $sliderkeyboard; ?>, //Use left & right arrows
		pauseOnHover:<?php echo $sliderhover; ?>, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>

The highlighted lines are the ones of interest

  1. To turn the Previous Next navigation on set directionNav:true
  2. To set the Previous Next navigation to only appear on hover set directionNavHide:true. This one is optional, I also suggest you not set this one until you are finished setting up all of the navigation. It will make tweaking you navigations positioning easier if it is permanently visible.
  3. To turn on the numbered navigation which we will convert to bullets set controlNav:true

Ok go and reload the site and take a look. Pretty unexciting isn’t it! You should have The Words Next and Prev. stacked over each other on the left edge of the slider. There will also be tiny numbers spaced down the page. So time to jazz this thing up!

You need some graphics

I am posting some graphics here for users to download. You can use them as is, modify them, search the web for others, or create your own. These will give you an idea anyway. If you do use different graphics you may have to tweak some of the values, height, width and position mainly, in the CSS. I will comment it thoroughly to help.
I suggest you upload your images to the “images” folder in the elegance theme folder.

Lets make it Pretty

Ok now we need to get all of those juicy graphics in and that horrible plain text out.
This is what we want.

I will put the whole block of CSS here for you lazy folks to copy and paste. This goes in your custom.css file. See the note panel at the very end of this post. See below the code for an explanation of each section.

/*---------SLIDER-----------*/
#slider-frame, #slider {
     position: relative;
}
/* BULLETS */
/*move middle text down*/
#beneath-slider {
     margin-top: 40px;
}
/*bullet container*/
#slider .nivo-controlNav {
     background: none repeat scroll 0% 0% transparent;
     left: 50%;/*unfortunately manual horizontal adjustment*/
     position: absolute;
     bottom: 105%;/*position below the slider*/
     margin-left: -40px;
}
/*slider bullets */
#slider .nivo-controlNav a {
     background: url("images/slider-bullets.png") no-repeat scroll 0pt 0pt transparent;/*change to your image path*/
     border: 0pt none;
     float:left;/*so they sit beside each other*/
     display:inherit;/*over-ride block setting on slider also so they sit besid eeach other*/
     height: 15px ! important;/*small enough to show 1 just part of bullet graphic */
     width: 15px; /*adjust to fit your graphic*/
     margin-right: 17px;/*space between bullets*/
     text-indent: -9999px;/* move the text way way off screen*/
}
/* current slide bullet */
#slider .nivo-controlNav a.active {
     background-position: 0pt -18px;/*move the background up so dot shows and indicates curret slide*/
}

/* ARROWS */
/*slider arrows graphics*/
.nivo-directionNav a {
     background: url("images/slider-arrows.png") no-repeat scroll 0% 0% transparent;
     border: 0pt none;
     display: block;
     height: 45px;/*area of graphic visible adjust for your arrows*/
     width: 45px ! important;/*area of graphic visible, adjust for your arrows*/
     text-indent: -9999px;/* move the text way way off screen*/
}
/*left arrow*/
a.nivo-prevNav {
     left: -40px;/*set horizontal arrow location*/
}
/*slight move on hover*/
a.nivo-prevNav:hover {
     left: -42px;/*2 pixel move*/
}
/*right arrow*/
a.nivo-nextNav {
     background-position: -45px 0pt;/*move background to reveal right arrow*/
     right: -40px;/*set horizontal arrow location*/
}
/*slight move on hover*/
a.nivo-nextNav:hover {
     right: -38px;/*2 pixel move*/
}

Lines 1-9
First I set the Slider container to position relative so we can position the other items in relation to it. Then I push the Homepage Middle Text area down a little to make room for the bullets.

The bullets

Lines 10-17
Position the container which holds all of the bullets, clear any background and set positioning to absolute, position values will be in relation to slider.

The highlighted lines.

They position the container that holds the bullets. Unfortunately the bullets container must be centered manually. You will need to adjust this each time you add or remove slides. A little math required or just eyeball it.
In my case a 3 bullet container firebug told me my container was 96px wide. Thats 3 x 15px the width we set for bullet above, plus 3 x 17px for the 3 right margins = 96px. But remember that the last right margin is blank space so remove that. 96 – 17 = 79px. The bullet control container is set to position left 50%, so its left edge will be aligned with the center of our slider. Half the bullet container is 39.5 pixels, as we do not deal in half pixels, say 40. Just add a negative margin of 40px on the left side to pull it over into the center.
Of course if you don’t want to have to align it when you make changes, you could just align it a sort distance say 10 pixels from the left edge of the slider. left:10px; and leave out the negative margin.

Lines 18-28
This is the individual bullet containers. Add the background image to the container not repeating. Remember to set to your image path. Remove any border. Float the bullets left so they sit next to each other. Set display: to inherit to over-ride default block setting which stops them sitting beside each other.
Set the height and width of the container so that it only reveals the top half of the 2 part bullet graphic, the not selected version. Add margin right to put some space between the bullets.
Finally move the default text way way off screen.

Lines 29-32
Make the magic happen, when the slide that relates to this bullet is active move the background graphic up in its container to reveal the lower part of the graphic, the active look.

The arrows

Lines 34-43
This stuff effects both arrows. Set the background image to your arrows image which contains both left and right arrows. Set it to appear only once with no-repeat.
Remove any borders. Set the height and width of the arrow container so it only reveals one arrow. Finally move that ugly default text way way off screen.

Lines 44-51
Position the left arrow 40 pixels to the left of the slider edge. This is completely up to you, it could be over the slider if you like.
Add a slight 2 pixel move when the user hovers over the arrow. This is optional.

Lines 52-60
The same for the right arrow but we also have to move the background graphic inside the container so we see the right arrow.

That’s it!

Remember to go back into tpl-homepage.php and set directionNavHide: to true if you want it to only appear when the user hovers over the slider. If you want to adjust the vertical location of the arrows, which is currently the default mid point, just add top:??px to the .nivo-directionNav, the rule which governs both arrows.
Enjoy it should all look pretty good.

Custom CSS:

This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.

Tools:

You may also edit custom.css outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

4 Comments

  1. Glenn
    June 21, 2012

    Yes – thanks ! Changing the custom.css from the parent theme does work 🙂 I’m so used to dealing with child themes ONLY, it didn’t occur to me to try that 😛

    Your comments seem to be working fine now. Not sure if you want to enable comment notifications. (I didn’t get an email notification of your response.)

    Thanks again Mark !

    Reply
    • mgason
      July 9, 2012

      I am so busy I don’t get to give my own blog much love. You made me get it together. Subscribing to a thread and email notifications is now working. Now one day I might even add twitter and all that social stuff.

      Reply
  2. mgason
    June 20, 2012

    Hi,
    I think the custom.css may not load from your child theme. I have never tried to run a child theme on a WP e-Commerce site to be honest. Custom.css in the theme folder is in fact a empty file for adding your changes.
    Storefront themes do not update in the traditional sense. When there is an update it is a completely new theme. You install it, the old one is still there, you can switch back. You can copy your changes into the new one. Just copy the custom.css file into the new folder.
    If you add the css to the Custom CSS box on Storefront Options Panel/Style Tab it isstored in the database and will migrate to any update automatically.

    These are the theme update instructions….
    Updating theme
    Upload and activate the new theme. You can find it in your members area. Click your name at the top of the screen while logged in to the forums to access your members area.
    You will NOT lose any Storefront theme settings. BUT when you activate your Storefront theme again you will need to do 4 things.

    1. Go to Storefront Theme Options panel and just click “Save All Changes” you do not need to change anything, it just recommits the settings you had before.
    2. Go to dashboard menu Appearance/Menus, make sure your custom menu is assigned to be the main navigation and save. It usually becomes unassigned during update.
    3. Go to the dashboard menu again. click Settings/Store go to the Presentation tab, click “Flush Theme Cache” do it a couple of times. Do NOT click “move template files” This would over-write the Storefront files with default ones.
    4. If you have Custom CSS in the Storefront Options Panel/Style Tab it will be carried over to the new theme. If you have a custom.css file copy it from the old theme folder to the new one.

    Reply
  3. Glenn
    June 20, 2012

    Thanks for the great ‘fix’ for this ! I’d noticed it was a Nivo slider so I figured this was doable.
    But — I’ve just barely gotten started with this theme. Did all the setup first and just got around to styling today … and ran into hitch.

    I noticed you refer to the custom.css file at the end. I set up a child theme and tried modifying the custom.css and it is not overriding style.css. As a matter of fact I am not even seeing the custom.css changes show up in the FireBug style pane. However, custom.css it does show up in Appearance->Editor as SE960AChild: Stylesheet (style.css) (SE960AChild is my child theme.) So it is apparently being picked up by the theme.

    This is Storefront Elegance 1.4.5. Have you run into this before ?

    Anyway – you’ve got a great blog going here – and I’ll definitely be back 🙂

    Reply

Leave a Reply