Our Tuesday session was a bit rough on some :-). For this reason we will build tonight a custom full width and full height SlideDeck Pro Skin, similar to the one in use in the header of this blog. As you know, I like it minimalist and bold — so, we will build a very simple but eye-catching slider skin.

To anticipate the session and for those who cannot assist, here is a tutorial:

While Dreamweaver may be the default editor for css files, we will just use our text editor, PSPad in my case.

Go File and select New — Cascading Style Sheet

Now save this empty file into a new folder called whatever the name of your skin is: in my case ‘semiomantics’ and name the file: skin.css

Now we start by entering the header information in form of a comment:

/*
Skin Name: Semiomantics 1024
Skin URI: http://shop.yorgonestoridis.com/wordpress/slidedeck-skin-1024-px/
Skin Type: fixed
Description: The skin is used at http://sd.xo2011.com - full width and height, no borders, no padding adapted for Semiomantics XO
Version: 3.1
Author: Yorgo Nestoridis
Author URI: http://www.yorgonestoridis.com/
Tags: slidedeck skin,flexible, full width,full height,no border,semiomantics xo, no spines
*/

Name your skin: Semiomantics 1024 — I gadded 1024 to the name as I will code in the style sheet the exact dimensions needed for my site.

Skin URI: Note I use my shop as the skin URI  :-).

Skin Type: this can be fixed or flexible: this skin is based on a flexible layout, but in fact it will end up fixed as I will customize it for my site where I wish to display slides of 1024 x 475 pixels.

Note: I have created a similar skin for posts and pages, again with fixed width and height corresponding to my layout: I don’t use spines, as spines impact on display and formats.

Version: I use the version number corresponding to the WordPress version for which it has been designed; you could also use the SD version number or create your own.

In order not to conflict with other skins or styles we create a class for our skin, I will call it

.skin-semiomantics

When creating a class, make sure to start with “skin-” then add your identifyer or name making sure to use only letters and hyphens or underscores, NO SPACES!

I could have called it for example:

.skin-semiomantics_1024

.skin-my-skin

.skin-bianca-one

.skin-semioxo

These are just examples and for the purpose of this exercise I remain with ‘semiomantics’

To define the frame within which we display the SD, let’s define the styles such as background, size, padding and margins; in this case, as we go wall to wall with our slides, there is no use for a background image, nor the need for padding. Margins may be needed to fit the SD properly into the XO layout.

I go for:

.skin-semiomantics {
 width: 1024px;
 height: 475px;
 margin-top:-30px;
 margin-bottom:1px;
 }

You see the DIV class in action (starting with a dot as it is a class). Also you find here the with and height as planned: 1024 x 475 pixels.

The negative top margin closes the gap between my header graphic and the SD frame; you may need to adapt this value, namely if your header graphic is higher than the default values on Semiomantics XO.

The bottom margin creates a little 1px space between the SlideDeck and the navigation bar.

Now we define the SD element which will sit in the defined frame: we need height and width. In fact, we only need the height as SD will expand to 100% automatically:

.skin-semiomantics dl.slidedeck {
 height: 475px;
}

We apply no padding!

Here again, only the height is needed and a padding set to 0 to fight defaults:

.skin-semiomantics dl.slidedeck > dd {
height: 475px;
padding: 0;
}

As we go wall to wall and in the absence of spines, no further style elements are needed.

As I don’t want to use spines, nor the active corner, nor any SD design graphic element, I do not need to add such style elements. It just has to be crystal clear, that this skin will only be used without spines or active slide corner. (SD settings in your SD editor in the WP dashboard.

Now, let’s have a look at vertical sliding: again, I do not want padding, margins or other styles, just plain slides and the little dots for vertical slide navigation(see 9 below).

By default the vertical slides take over the whole slide area. No style is needed. Just for the record, if you wish to add padding, use the following for example 5px padding — otherwise just don’t add anything to your skin.css:

dl.slidedeck dd.slide ul.slidesVertical > li {
 padding: 5px;
}

Note the 'ul' and 'li' tags: this shows that the slides are organized in unordered lists and list items, like navigation bars.
<h3>9. Vertical Slide Navigation Container</h3>
Let's position the container for the little dots for vertical slide navigation. I choose to put them on top right, 10px off the top and right border:

[php]

dl.slidedeck dd.slide ul.verticalSlideNav {
 top: 10px;
 right: 10px;
}

This is the container for a navigation link in the vertical slide navigation element. You can adjust the width and height of this element to accommodate for a larger vertical navigation button.To increase the space between vertical navigation links, increase the bottom and/or top padding of this element.

dl.slidedeck dd.slide ul.verticalSlideNav li {
 position: relative;
 z-index: 2;
 margin: 0;
 padding: 0 0 3px;
 width: 12px;
 height: 12px;
 overflow: hidden;
 line-height: 12px;
 list-style: none;
 font-size: 1px; /* Stupid IE */
}

This is the element that slides behind the default navigation link list to show which is the current vertical slide being viewed. This should be given similar dimensions to the vertical slide navigation links.

dl.slidedeck dd.slide ul.verticalSlideNav li.arrow {
 position: absolute;
 display: block;
 z-index: 1;
 width: 10px;
 height: 10px;
 padding-top: px;
 padding-bottom: 0;
 overflow: hidden;
 left: 0;
 border: 1px solid #333;
 background: #444;
 background-image: -moz-linear-gradient(top, #000, #444); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #444)); /* Saf4+, Chrome */
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -khtml-border-radius: 3px;
 -o-border-radius: 3px;
}

Note the trick with the background :-).

These are the vertical slide navigation links. By default these are a small square that uses a sprite background image replacement method to hide the default text that is placed in the link (“Nav 1″, “Nav 2″, “Nav 3″).To change the appearance of the navigation elements, you will need to use a background image replacement as the text for the links cannot be changed.
Each vertical slide navigation link is given a unique class so they can be styled individually. For example:

dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_1

dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_2

dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_3

and so on

Here is the code I use:

dl.slidedeck dd.slide ul.verticalSlideNav li a {
 position: relative;
 display: block;
 width: 10px;
 height: 0;
 overflow: hidden;
 padding-top: 10px;
 background: #fff;
 outline: none;
 text-decoration: none;
 border: 1px solid #ccc;
 opacity: 0.5;
 -moz-opacity: 0.5;
 -webkit-opacity: 0.5;
 -khtml-opacity: 0.5;
 -ms-filter: "Alpha(opacity=50)";
 filter: Alpha(opacity=50);
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -khtml-border-radius: 3px;
 -o-border-radius: 3px;
}

[/php
<h3>13. Vertical Slide Navigation Link Hover State</h3>
Just a little hover effect, playing with opacity:

[php]

dl.slidedeck dd.slide ul.verticalSlideNav li a:hover {
 opacity: 0.75;
 -moz-opacity: 0.75;
 -webkit-opacity: 0.75;
 -khtml-opacity: 0.75;
 -ms-filter: "Alpha(opacity=75)";
 filter: Alpha(opacity=75);
}

The ski.css reads as follows:

/*
Skin Name: Semiomantics Skin for SlideDeck
Skin URI: http://shop.yorgonestoridis.com/wordpress/slidedeck-skin-1024-px/
Skin Type: flexible
Description: The skin used at sd.xo2011.com - full width and height, no borders, no padding adapted for Semiomantics XO
Version: 3.1
Author: Yorgo Nestoridis
Author URI: http://www.yorgonestoridis.com/
Tags: sd skin,flexible, full width,full height,no border,semiomantics xo
*/
.skin-semiomantics {
 width: 1024px;
 height: 475px;
 margin-top:-30px;
 margin-bottom:1px;
 }

.skin-semiomantics dl.slidedeck {
 height: 475px;
}
.skin-semiomantics dl.slidedeck > dd {
 height: 475px;
 padding:0;
}
dl.slidedeck dd.slide ul.verticalSlideNav {
 top: 10px;
 right: 10px;
}
dl.slidedeck dd.slide ul.verticalSlideNav li {
 position: relative;
 z-index: 2;
 margin: 0;
 padding: 0 0 3px;
 width: 12px;
 height: 12px;
 overflow: hidden;
 line-height: 12px;
 list-style: none;
 font-size: 1px; /* Stupid IE */
}
dl.slidedeck dd.slide ul.verticalSlideNav li.arrow {
 position: absolute;
 display: block;
 z-index: 1;
 width: 10px;
 height: 0;
 padding-top: px;
 padding-bottom: 0;
 overflow: hidden;
 left: 0;
 border: 1px solid #333;
 background: #444;
 background-image: -moz-linear-gradient(top, #000, #444); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #444)); /* Saf4+, Chrome */
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -khtml-border-radius: 3px;
 -o-border-radius: 3px;
}
dl.slidedeck dd.slide ul.verticalSlideNav li a {
 position: relative;
 display: block;
 width: 10px;
 height: 0;
 overflow: hidden;
 padding-top: 10px;
 background: #fff;
 outline: none;
 text-decoration: none;
 border: 1px solid #ccc;
 opacity: 0.5;
 -moz-opacity: 0.5;
 -webkit-opacity: 0.5;
 -khtml-opacity: 0.5;
 -ms-filter: "Alpha(opacity=50)";
 filter: Alpha(opacity=50);
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -khtml-border-radius: 3px;
 -o-border-radius: 3px;
}
dl.slidedeck dd.slide ul.verticalSlideNav li a:hover {
 opacity: 0.75;
 -moz-opacity: 0.75;
 -webkit-opacity: 0.75;
 -khtml-opacity: 0.75;
 -ms-filter: "Alpha(opacity=75)";
 filter: Alpha(opacity=75);
}

Save the file and upload your skin folder into the WP plug-in folder under Slidedeck — skins and start using it by creating a new SlideDeck, select autoplay, no spines, your skin and load images with the size of 1024 x 475 pixels and finally embed your scriptlet into the header.php of your XO.

That’s all.

PS: Bianca will take you through this as I will not be at the call: I MUST to attend the Basketball Euroleague quarter finals where Panathinaikos faces Barcelona (probably the two best teams in Europe these days). Wish you lots of fun and if you face a problem, just comment here below :-).

Related posts:

1. Ycademy Online Seminar March 2011
2. Christmas Skin for XO 2011 WP Theme
3. SlideDeck Pro on XO
4. Semiomantics XO Media Slider goes Mobile
5. Build your Flash Website with Gene

Ostrich Products at Bushman Curios in Mossel Bay

Lion Rugs and Skins as well as Antelope skins available at Bushman Curios Mossel Bay

Bushman Curios Shop Oudtshoorn

Experience the wildest shopping extravaganza with Bushman Curios, situated in the heart of the Klein Karoo – Oudtshoorn. For decades Oudtshoorn has been referred to as the ostrich capital of the world, blooming with rich ostrich produce, feather palaces and natural beauty, encircled by the majestic Swartberg and Outeniqua Mountains. Bushman Curios invites you to share this breathtaking environment and make sure you do not leave empty handed.

Ostrich Products at Bushman Curios in Oudtshoorn

We are known as the most popular curio attraction in town; offering a wide range of exquisite ostrich products, catering for the needs of any individual. We offer you a range of Ostrich Leather products such as bags, wallets, purses, belts and shoes; Ostrich Feather Products including dusters, boas and feathers and Ostrich Eggs.

Lion Rugs and Skins as well as Antelope skins available at Bushman Curios Oudtshoorn

Our other products include Lion Rugs – male and female, Shoulder Mounts and Antelope Skins, Semiprecious Stone articles and Gold Jewellery collections.Export Permits Available – Experience extreme shopping with Bushman Curios.