You can click the following link to enhance the reading of this article: Reading Blinds.

Continuing where we left off…

Once again, here is our final result.

In review of part 2, here is what we’ve completed already:

1. Formatted and uploaded our images for the jQuery slideshow
2. Found out how to get URL’s of Stiqr elements
3. Built and configured our jFlow Content Slider
4. Edit the CSS to position the jFlow Slider Navigation image links
5. Added jQuery fade-in/fade-out hover events to our sponsor images
6. Added CSS background image visibility and positioning on hover events to our social media images

Moving on with Part 3 finishes up our tutorial with some final touches.

Step 8. – Adding buttons to change the background image (Novice 15 min)

Again, let’s Photoshop some images.  I decided since this is a photography site to have a colorful background (our original) and an alternate gray-scale-ish image.

I added some clouds to the top banner area to lighten it up a give it some uniqueness.  I duplicated the existing background layer and then changed the layer blending mode to Saturation which turned everything monochrome.  To keep a tad bit of color I selected the lower portion of the image just below the lower black bar and deleted that portion from the monochrome layer revealing the colored layer underneath.  This finished our second background choice.  Choose to save for Web and Devices, jpeg quality 60-70% and give it a unique name.  Now upload this to your My Images via the Stiqr admin panel.

I then found a button by actually taking a screen shot of the Stiqr admin panel’s color picker and drew a selection around the circular colored ball (Using Photoshop again).  I inverted my selection and then cut the rest of the screen shot out.  I then selected only the circular color ball by ctrl+clicking on the colored ball layer.  I chose Edit>Copy and then chose File>New and used the automatic dimensions Photoshop chose for the size of data in my clipboard.  I then chose Edit>Paste to paste the copied colored ball data and then saved this as a transparent PNG24 as well.

I then went back to the image and chose Image>Adjustements>Hue/Saturation and adjusted the Saturation level to -100.

This will change our colored ball into a monochrome ball to be used as the link to change our background to the less-colorful one. (This should also allow our photo’s to look more vivid and clear.)

Upload the spheres to Stiqr and then add each to the page then position just above our content slider.

Now for the magic, first we need to get our background image URLs.  Go to the admin panel and choose background and then click the button to browse the images you have uploaded.  Select our current background image, click ok and then copy the link it reveals.

Now access the right-click edit menu of our first colored sphere.  Click on the JS tab and paste the following code:

Obviously, change the stiqr-id number and the actual URL of the background image to represent YOUR website.  This doesn’t do anything yet because the background by default is the colorful one already.  What this will do is provide a means of getting back to the colorful one after it has been changed to the monochrome background.

Now access the right-click menu of the monochrome sphere image.  Click on the JS tab and paste the following code:

Again editing of course the id and the URL.

What we are doing is having jQuery change/override the css rule for the current body background image.  Neat huh?

Save and refresh the page to test it out.

Step 9. – Adding another page, sharing common elements and creating the page links (Novice 15min)

Remember at the beginning of this tutorial we created 2 pages.  Well, we haven’t done anything on the other page yet and if we load it in our browser it will come up completely blank.  One thing I didn’t emphasize at the time was that the names were similar and I did that for a reason.  We want it to look similar to our site’s design right?

Our home page is stiqr.php and out about page is stiqr_about.php

This will make it easy to get the base content our second page.  On each item’s right-click edit menu under the General tab is an empty field called show on page.  If we put /stiqr* in this field and save the element, it will load on any page within the root of our web site that has “stiqr” as the first 5 characters in the name.  How cool is this.  Since you can’t right click on the current background you’ll have to open the manage my stiqrs menu from the admin panel and select edit for the default background item.  The other items I chose to load on all pages also included the 2 background switching spheres and my copyright link.  Keep in mind that moving, editing or deleting any of these “shared” elements on one page will also effect it on all other pages it appears via the matching criteria.  Optionally, you can choose the show on all pages check box under the right-click edit menu if you absolutely want it on all Stiqr enabled pages under your domain.

Hint – If you don’t want to make elements visible on all pages that match a certain criteria but you do want a similar layout on another page, another option is to use the save template/load template option found in lower area of the admin panel.  Doing this will load an identical layout of the current one on another Stiqr enable page.  You can log on to the other page and move elements around, delete them or add new elements without effecting the other page.

Finally, adding the link was easy.  I chose to add a text link via the admin panel and typed “About”  and then chose my font, size, color and added the link http://mydomain.com/stiqr_about.php.  I also added a “Home” link on my about page.

Step 10. – Save, Refresh your browser, and admire your work!

This completes our 3 part series on how to design and build a web page with advanced CSS and jQuery in Stiqr with minimal effort

If you enjoyed this post, make sure you subscribe to my RSS feed! You can also subscribe by Email and have new posts sent directly to your inbox. When you feel bored, follow me on Twitter.