[oik] plugins.com

WordPress plugins and themes

  • Home
  • About
    • lazy shortcodes
    • smart shortcodes
    • oik base plugin
      • oik – donate
      • oik PayPal buttons
      • oik installation
      • oik Button Shortcode button
      • oik changelog
      • oik FAQ
      • oik plugins on SVN
      • oik plugins on GitHub
  • Plugins
    • oik base plugin
    • FREE oik plugins
    • WordPress plugins
    • Premium oik plugins
    • Bespoke oik plugins
  • Shortcodes
    • Shortcode examples
  • Blocks
    • Block examples
  • APIs
    • ALL action and filter hooks
  • Blog
You are here: Home / oik-nivo-slider – [nivo] shortcode for the Nivo slider / oik-nivo-slider FAQ / Centering the slider with a wider caption

Centering the slider with a wider caption

Here we develop some custom CSS to position the slider in the middle of a div with a caption that is wider than the slider images. This page has been updated for oik-nivo-slider version 1.7. The examples have been changed to use the default271 theme.

before

1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front
[nivo post_parent=2155 theme=default271]

after

1976-Blind-Dog-at-St-Dunstans1977-Better-By-Far1980-The-Album1983-Back-To-Front
[nivo post_parent-2155 class=nivocenter theme=default271]
Since the nivo slider jQuery code’s animation logic works with chunks of images all starting from position 0,0 we can’t just attempt to centre the images in the slider area as the animation will be in the wrong place. So we need to adjust the slider area to fit the images then adjust the caption. This is the custom CSS used for this example:

div.nivocenter { margin: 0 auto; width: 300px;}
div.nivocenter div.slider-wrapper { margin: 0 auto; width: 200px; }
div.nivocenter .nivo-caption {margin-left: -40px; width: 140%; }
div.nivocenter { border: 1px solid gray; }
div.nivocenter div.slider-wrapper { border: 1px dotted gray; }
 
Notes:
  1. The first line of CSS positions the main div for the slider in the centre
  2. The second line positions the slider wrapper in the centre of the main div and sets the width to the width of the images we’re displaying
  3. The third line adjusts the caption’s width and repositions it to make it look as though the slider images are centred.
  4. The border stlyes in lines 4 and 5 are just to help you see how the divs are arranged.

Published: November 5, 2012 | Last updated: December 1, 2020

Information

Component:
  • oik-nivo-slider – jQuery nivo slider
Letters: C

Recent plugin updates

oik v4.7.2 oik v4.7.2 includes a fix to the logic to render blocks for Content and Excerpts in the bw_pages shortcode. ...
oik v4.7.1 Upgrade to oik v4.7.1 for bw_pages rendering blocks for Content and Excerpts, and support for post_name attribute for shortcode which query posts ...
oik-shortcodes v1.41.1 Upgrade to oik-shortcodes v1.41.1 for a couple of minor changes. ...
oik-bob-bing-wide v2.2.2 Upgrade to oik-bob-bing-wide v2.2.2 for improvements to bw_dash examples and fixes to some SVG icon's visibility. ...
oik-bwtrace v3.3.1 Upgrade to oik-bwtrace v3.3.1 to measure plugin load times and ad hoc action timing points. ...

Plugins

  • All Plugins
  • oik base plugin
  • FREE oik plugins
  • WordPress plugins
  • Premium oik plugins

Themes

  • FREE themes
  • Bespoke themes
  • Premium themes

Blocks

  • All Blocks
  • Block examples
  • About Blocks

Shortcodes

  • All Shortcodes
  • Shortcode examples
  • About Shortcodes

Reference

  • About APIs
  • All APIs
  • All Classes
  • All Files
  • All Hooks

Support

  • Contact
  • Cookies policy
  • Get API key
  • Privacy
  • Request support
  • Sitemap
  • Stay informed
  • Terms and Conditions
oik-plugins
Email: [email protected]

Weight shipping plugins

Find out which cart weight shipping plugin you need for your WooCommerce site.
Which cart weight based plugin do I need?

Site:  www.oik-plugins.com
© Copyright oik-plugins 2011-2022. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress and oik-plugins