xili-floom-slideshow : the mystery of css revealed !
A short description of the frame (div containing frame and images)
the divs of the demo - blue borders
In this snapshot (as in plugin’s post), some div html tags are visible. Outside, the div with id named « blinds-cont ». Just around the image, the div named « blinds ».
The corresponding extract of css is:
#blinds-cont { -webkit-box-shadow: 0 0 20px #000; background: url(bg.png) 0 0 no-repeat; margin: 20px auto; padding: 12px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 254px; -moz-box-shadow: 0 0 20px #000; width: 620px; } #blinds-cont #blinds { margin: 0 auto; background: url(spinner.gif) 50% no-repeat; height: 204px; width: 596px; } #blinds-cont #blinds .floom_slice { z-index: 10; } #blinds-cont #blinds .floom_caption { text-shadow: 0 1px 0 #fff; font-size: 1.0em; color: #333; font-style: italic; position: relative; text-align: center; width: 100%; top: 15px; } #blinds-cont #blinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; } #blinds-cont #blinds .floom_container { overflow: hidden; border-bottom: solid 1px #fff; border-top: solid 1px #666; } #blinds-cont #blinds .floom_vertical { float: left; }
In this horizontal demo case, the frame contains a shadowed border (visible in Safari or Mozilla) and a background frame image with a large bottom part for title of image.
Which are the characteristics here?
The ID (#) « blinds-contv2″ is set (and used in shortcode). the image (#blinds) div has height and width equal to size of series of images. The container (frame) is a little bigger to create a border especially on bottom for description.
Here before to create a new one, the frame don’t use image as background. It is only black.
The resulting second part of the floom.css is:
#blinds-contv2 { -webkit-box-shadow: 0 0 10px #000; background: #000; margin: 20px 30x 20px; padding: 10px 0 0 0; font-family: 'Georgia', 'Arial Narrow', 'Arial', sans-serif; height: 550px; -moz-box-shadow: 0 0 20px #000; width: 324px; float:left;} #blinds-contv2 #blinds { margin: 0 auto; background: url(spinner.gif) 50% no-repeat; height: 427px; width: 320px; } #blinds-contv2 #blinds .floom_slice { z-index: 10; } #blinds-contv2 #blinds .floom_caption { font-size: 1.0em; color: #ddd; font-style: italic; position: relative; text-align: center; width: 100%; top: 15px; } #blinds-contv2 #blinds .floom_progressbar { font-size: 1px; background: #131718; border-bottom: solid 1px #fff; height: 3px; position: relative; z-index: 1000; width: 0; top: 2px; } #blinds-contv2 #blinds .floom_container { overflow: hidden; border-bottom: solid 1px #999; border-top: solid 1px #666; } #blinds-contv2 #blinds .floom_vertical { float: left; }
Title and description
Custom Fields
As you know, each image uploaded to WordPress can be described with a title, a caption (alt) and a description. By default, embedding by plugin use title of attachment. To use both, custom field named ‘floom_title_desc‘ is set to 3. (1= title, 2=description).
To conclude temporarily…
Hope this short text will invite you to better understanding of this marvelous tool and ‘embedder’ xili-floom-slideshow plugin. But you need to create your own design adapted to your theme.
M. from dev.xiligroup
Tags: css, floom, slideshow
TrackBack URI
Leave a comment