Cu3er, A Quick & Dirty Tutorial

Overview

CU3ER unfortunately depends on both Flash 9 & javascript to work. So if you expect lots of your visitors to lack either of them, CU3ER is not for you. Having said that, CU3ER is way cool!

In nutshell, you will need to:

  1. Download and upload the necessary files onto your sever
  2. Include cu3er.swf, swfobject.js, expressInstall.swf, optionally font.swf
  3. Upload your images and note their absolute location.
  4. Add a div with alternate content in case js or Flash are not available
  5. Create a config.xml to communicate with your instance of CU3ER

A Quick Tutorial

Let’s get to it.

First, you need to dowload CU3ER, and upload the files to a folder on your server (e.g. “/cu3er”).

Second, you need include and configure the swfobject plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="path-to/cu3er/swfobject.js" type="text/javascript"></script>
 <script type="text/javascript">// <![CDATA[
        var flashvars = {};
        flashvars.xml = "path-to/cu3er/config.xml";
        flashvars.font = "path-to/cu3er/font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("path-to/cu3er/cu3er.swf",
            // Here you can set ID for the wrapper div
            "cu3er-container",
            // Here you can set the with for the flash application
            "564", "216", "9",
            "path-to/cu3er/swfobject/expressInstall.swf",
            flashvars, attributes);
// ]]></script>

Third, include the HTML for the CU3ER container and an alternative in case flash or javascript is disabled. The code below is not optimal, and it is not what I have on my homepage. You can place whatever HTML you’d like and I encourage to do so if you want to be able to tell your fwends your site is progressively enhanced.

1
2
3
4
5
6
7
<div id="home-slider">
<div id="cu3er-container"><!-- the cu3er container will be replaced by the Flash object, otherwise the content bellow will be displayed -->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!-- END replacement --></div>
</div>

The last step is to edit your config.xml file. This file basically passes all the parameters to your instance of CU3ER. Once you are acquainted with the available properties it will be a lot easier but the whole thing is pretty self-explanatory. Here is cropped version of the one I used for the animation on my homepage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
    <settings>
       
        <prev_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenIn width="40" height="40" alpha="0.4" />
            <tweenOver tint="0x000000" scaleX="1.1" scaleY="1.1" alpha="0.6" />
            <tweenOut tint="0x000000" />
        </prev_button>
       
        <prev_symbol>
            <tweenOver tint="0xFFFFFF" />          
        </prev_symbol>
       
        <next_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenIn width="40" height="40" alpha="0.4" />     
            <tweenOver tint="0x000000"  scaleX="1.1" scaleY="1.1" alpha="0.6" />
            <tweenOut tint="0x000000" />
        </next_button>
       
        <next_symbol>
            <tweenOver tint="0xFFFFFF" />
        </next_symbol> 
       
        <auto_play>
          <defaults symbol="circular" time="5" />
          <tweenIn width="30" height="30" y="25" x="539" alpha="0.4" />
          <tweenOut  />
          <tweenOver  />
        </auto_play>
       
        <description>
          <defaults  
            round_corners="5,5,5,5" paragraph_text_margin="-4, 0, 0, 10"
            paragraph_text_align="center" paragraph_font="Sansation Regular" paragraph_text_size="16"
         />
          <tweenIn tint="0x000000"  x="147" y="175" alpha="0.4" width="270" height="30" />
          <tweenOut alpha="0" x="32" y="300"  />
          <tweenOver alpha="0.6"  />
        </description>

        <transitions shader="none" z_multiplier="5" cube_color="0xCCCCCC" />

        <general slide_panel_width="564" slide_panel_height="216" />
           
    </settings>    

    <slides>
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/crrglobal.jpg</url>
            <description>
                <link>http://crrglobal.com/</link>    
                <paragraph>CRR Global</paragraph>
            </description>
        </slide>
        <transition num="1" direction="right" shader="flat"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/curveshamilton.jpg</url>
            <description>
                <link>http://curveshamilton.com/</link>    
                <paragraph>Curves Hamilton</paragraph>
            </description>
        </slide>       
        <transition num="1" slicing="vertical" direction="down"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/sageportfoliogroup.jpg</url>
            <description>
                <link>http://sageportfoliogroup.com/</link>    
                <paragraph>Sage Portfolio Group</paragraph>
            </description>
        </slide>       
        <transition num="1" direction="right" shader="flat"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/kellywatt.jpg</url>
            <description>
                <link>http://kellywatt.ca/</link>    
                <paragraph>Kelly Watt... writer</paragraph>    
            </description>
        </slide>
        <transition num="1" slicing="vertical" direction="down"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/palisades.jpg</url>
            <description>
                <link>http://palisadespointe.ca/small/</link>    
                <paragraph>Palisades Pointe</paragraph>    
            </description>
        </slide>
        <transition num="1" slicing="vertical" direction="down"/>
               
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/preferredrecyclingequipment.jpg</url>
            <description>
                <link>http://preferredrecyclingequipment.com/</link>    
                <paragraph>Preferred Recycling Equipment</paragraph>
            </description>
        </slide>
        <transition num="1" direction="right" shader="flat"/>
       
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/1A03.jpg</url>
            <description>
                <link>http://rodrigoflores.ca/1A03/</link>    
                <paragraph>Web Essay On Social Media</paragraph>
            </description>
        </slide>
        <transition num="1" slicing="vertical" direction="down"/>
   
        <slide>
            <url>http://rodrigoflores.ca/wp-content/themes/v2/cu3er/img/plaidpencil.jpg</url>
            <description>
                <link>http://plaidpencil.com/</link>    
                <paragraph>Plaid Pencil</paragraph>
            </description>
        </slide>
        <transition num="1" direction="right" shader="flat"/>
               
    </slides>
</cu3er>

So, there you have it. I know it looks like a lot but I think it’s totally worthy, don’t you?

If you want to really dig into this technology, please visit the fabulous, official CU3ER documentation.

Trust me, after you do this once, doing it again will be a piece of cake.

If you know any other great galleries, please leave a comment and let me know.

Have fun!

break

Creating Complex WordPress Navs, Part 1

This nav is made up 2 sections: a main nav, and a subnav.

In this case, I didn’t have that many top pages, so I hard-coded the main nav and used the get_permalink() function to link to the right pages. The only thing you need is to know the IDs of the pages you want to target. To find out:

  1. Log into your WP Admin area
  2. Click on “Edit” under Pages (or under Posts)
  3. Mouse over the page whose ID you need, and
  4. Look at the status bar at the bottom of the browser.

The ID will be the last element in the URL (e.g. “…&post=65″).

The same technique also works if you want to find out a particular post’s ID.

The Main Nav

Below is the xHTML/PHP code for the hardcoded main nav, showing only one item. The one thing to note about it is that when you don’t use a function like wp_list_pages(), you also have to add the current_page_item class manually.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="nav">
<ul>
    <!-- icon -->
    <li <?php if($post->ID == 6) { echo "class='current_page_item'"; } ?>>
        <a title="<?php echo get_the_title(6); ?>" href="<?php echo get_permalink(6); ?>">
            <img title="<?php get_the_title(6); ?>" alt="Portfolio"
src="<?php bloginfo('template_url'); ?>/img/icons/portfolio-nav.png"  />
        </a>
    </li>
    <!-- text -->
    <li <?php if($post->ID == 6) { echo "class='current_page_item'"; } ?>>
        <a title="<?php echo get_the_title(6); ?>" href="<?php echo get_permalink(6); ?>">Portfolio</a>
    </li>
</ul>
</div>
<!-- end nav -->

The Subnav

For the sub-navigation, I didn’t want dropdowns. Rather, I wanted the child pages to stay on only when you are on a particular section or on one of its child pages. So, I used conditional statements and the wordpress function wp_list_pages(). Within the function’s arguments, I filtered out the pages that belong to that particular section with the “child_of” parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php // check for current post and parent
global $post;
$cID = $post->ID;
$cParent = $post->post_parent;
?>

<div id="subnav">
<?php if($cID == 5 || $cParent == 5) : ?>
    <ul>
        <li<?php if($cID == 5) { echo ' class="current_page_item"'; } ?>><a title="Home"
            href="<?php echo get_option('home'); ?>">Home</a></li>
        <?php wp_list_pages(array(
                'title_li' => '',
                'sort_column' => 'menu_order',
                'child_of' => 5
                )
            ); ?>
    </ul>
<?php endif; ?>
</div><!-- end subnav -->

The CSS

Nothing surprising here, the li elements are floated left against each other. And both nav blocks are placed on the page using absolute positioning relative to their parent elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#nav-wrap {display: block; width: 570px; height: 48px; position: absolute; top: 41px; left: 384px;  }

#nav { display: block; }

#nav ul li {
    float: left; height: 48px; line-height: 62px; font-size: 17px; margin-left: 10px; margin-right: 10px;
    font-family:  SansationRegular, "Sansation Regular", "Century Gothic", Verdana, sans-serif;
    display: block;
}
    #nav ul li a { color: #999; } #nav ul li a:hover { color: #666; }
   
    #nav li.current_page_item a { color: #000; }
   
    #nav li.current_page_item a:hover { color: #000; }
   
    #nav .icon:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); }

#subnav { display: block;  }

#subnav ul { margin-left: 30px; }
   
#subnav li { float: left; margin-right: 14px; display: block; margin-top: 28px; font-size: 13px; }

    #subnav ul li a { color: #999; } #subnav ul li a:hover { color: #666; }
   
    #subnav li.current_page_item a { color: #4773BE; }
   
    #subnav li.current_page_item a:hover { color: #6894D2; }

Final Notes

I am very aware that this was probably “too much work” for this nav and very similar effects can be achieved using much less code, yet by doing it this way you can have full control over exactly how you want elements to behave. Not to mention, most of it will work even if javascript is disabled. Last but not least, the tooltip effect on the icons is a simple implementation of jQuery Tools. Just include their library and follow their excellent tooltip documentation.

Also, note that for SEO purposes, how you display your navigation is almost irrelavant as long as you don’t change the permalink structure of your URLs. If you have to do so, then you will experience the burden of having some links displayed in Google search results with broken links until a Google bot recrawls your site.

All said, on the next article in this series, I will build a very similar nav using the WP_Query object and you will learn a lot about implementing WordPress custom loops.

Stay tuned.

break

Current (First!) Poll

Which of the following do you think will have a greater impact on your final decision of hiring a particular web designer? (Pick two)

View Results

Website Designed & Developed by Rodrigo Flores © 2010