Create slideshow theme

To customize a slideshow theme yourself you need to use some naming conventions to make full use of the views_slideshow_ddblock module functionality.

Naming conventions slideshow theme name:

vsd-[Theme name given]-[pager-type][orientation]-[Suffix]

  1. Parts of the themename are separated by a hyphen (-).
  2. A slideshow theme name starts with vsd.
  3. After vsd- comes your given name.
  4. After the given name the pager type.
    • 10 is for number pager.
    • 20 is for prev-next pager.
    • 30 is for text pager.
    • 40 is for image pager.
    • 50 is for image/text pager.
    • 60 is for scrollable pager.
  5. After the pager type the orientation:
    • p (p from portrait) for portrait slideshow theme layouts.
      When a portrait slideshow theme is chosen only pager top and pager bottom shows up.
    • l (l from landscape) for landscape slideshow theme layouts.
      When a landscape slideshow theme is chosen only pager left and right shows up.
  6. After the orientation an optional suffix can be used.

Naming conventions Sizes directory and file names.

For size CSS directories and iles the following naming conventions need to be used to get the sizes files detected automatically:

  1. Create a size-x directory in the slideshow theme directory.
    x is here the width of the slideshow layout.
  2. Create a views-slideshow-ddblock-cycle-[slideshow-theme-name]-size-x.css file.
    x is here again the width of the slideshow layout.

If you want to define e.g. three sizes which can be used with your slideshow you create:

size-460
-- views-slideshow-ddblock-cycle-[slideshow-theme-name]-size-460.css
size-700
-- views-slideshow-ddblock-cycle-[slideshow-theme-name]-size-700.css
size-940
-- views-slideshow-ddblock-cycle-[slideshow-theme-name]-size-940.css

Using the size css files
To use the size css file the following line of PHP code has to be added to the "// add Cascading style sheet" part of the content template file (views-slideshow-ddblock-cycle-block-content-[slideshow_theme_name].tpl.php) of the slideshow theme:

$slideshow_width=$settings['template_size'];
 
drupal_add_css($directory . '/custom/modules/views_slideshow_ddblock/' . $settings['template'] . '/' . $slideshow_width . '/views-slideshow-ddblock-cycle-' . $settings['template'] . '-' . $slideshow_width . '.css', 'template', 'all', FALSE);

so it becomes:
$settings = $views_slideshow_ddblock_slider_settings;
$slideshow_width=$settings['template_size'];
 
// add Cascading style sheets
drupal_add_css($directory . '/custom/modules/views_slideshow_ddblock/' . $settings['template'] . '/views-slideshow-ddblock-cycle-' . $settings['template'] . '.css', 'template', 'all', FALSE);
drupal_add_css($directory . '/custom/modules/views_slideshow_ddblock/' . $settings['template'] . '/' . $slideshow_width . '/views-slideshow-ddblock-cycle-' . $settings['template'] . '-' . $slideshow_width . '.css', 'template', 'all', FALSE);

Slideshow theme structure
A slideshow theme has the following directory and file structure:

custom/
--modules/
----views_slideshow_ddblock/
------views-slideshow-ddblock.tpl.php
------views-slideshow-ddblock-cycle-block-content-[slideshow_theme_name].tpl.php
------views-slideshow-ddblock-cycle-pager-content-[slideshow_theme_name].tpl.php
------views-slideshow-ddblock-cycle-vsd-default.css
------views-slideshow-ddblock-pager-content.tpl.php
------[slideshow_theme_name]/
--------images/
----------image files used in the slideshow theme
--------size-xxx/
----------views-slideshow-ddblock-cycle-[slideshow_theme_name]-size-xxx.css
--------size-xxx/
----------views-slideshow-ddblock-cycle-[slideshow_theme_name]-size-xxx.css
--------size-xxx/
----------views-slideshow-ddblock-cycle-[slideshow_theme_name]-size-xxx.css

Steps for creating a new slideshow theme from one of the example themes.

This example assumes that you want to make a new theme: vsd-mytheme-10p using the existing theme: vsd-upright-10p.

  1. Go to directory: sites/all/themes/[YOUR_THEME_NAME]/custom/modules/views_slideshow_ddblock
  2. Create a copy of views-slideshow-ddblock-cycle-block-content-vsd-upright-10p.tpl.php and save as views-slideshow-ddblock-cycle-block-content-vsd-mytheme-10p.tpl.php.
  3. Edit views-slideshow-ddblock-cycle-block-content-vsd-mytheme-10p.tpl.php.
  4. Replace all occurrences of vsd-upright-10p with vsd-mytheme-10p.
  5. Create a copy of views-slideshow-ddblock-cycle-pager-content-vsd-upright-10p.tpl.php and save as views-slideshow-ddblock-cycle-pager-content-vsd-mytheme-10p.tpl.php.
  6. Edit views-slideshow-ddblock-cycle-pager-content-vsd-mytheme-10p.tpl.php.
  7. Replace all occurrences of vsd-upright-10p with vsd-mytheme-10p.
  8. Create a copy of the vsd-upright-10p directory and save as vsd-mytheme-10p.
  9. Goto the vsd-mytheme-10p directory.
  10. Rename views-slideshow-ddblock-cycle-vsd-upright-10p.css to views-slideshow-ddblock-cycle-vsd-mytheme-10p.css.
  11. Edit views-slideshow-ddblock-cycle-vsd-mytheme-10p.css.
  12. Replace all occurrences of vsd-upright-10p with vsd-mytheme-10p.
  13. Clear the cache at: Administer > Site configuration > Performance.
  14. Goto the views configuration page and goto the styles setting of the Slideshow.
    The new custom views_slideshow_ddblock slideshow theme vsd-mytheme-10p should now show up in the template select box where a slideshow theme can be chosen.
  15. Select the vsd-mytheme-10p theme and save the view
  16. Now that your new slideshow theme is working, you can start editing the template files and the css files to get your desired slideshow layout.
  17. When separate cascading stylesheet files are used for sizing the slideshow make sure to add the line to the content template file, like described above under "Using the size css files".