jQuery Nivo Slider has broken effects within WordPress

I’m using the jQuery Nivo Slider plugin on a WordPress project. Keep in mind that this is the free jQuery plugin version, not the WordPress plugin version, so I’m doing the integration myself into a child theme of the stock Twenty Thirteen WordPress theme.

To make it align properly with the other page entries, I used the standard WordPress classes on the wrappers…

The problem is, although the slider is nicely positioned on the page, the transition effects are broken. The slider is still working but just before each transition animation is supposed to start, you get a flicker of a tiny thumbnail in the upper-left corner and then the new slide appears… no slicing, no boxing, no wiping… nothing but sadness.

I was able to recreate my exact slider code in a jsFiddle and it worked flawlessly. After much troubleshooting, I discovered that the WordPress class .entry-content in the parent theme was the culprit.

However, the removal of .entry-content fixes Nivo slider, it also breaks the layout. By the time I figure out how to recreate the necessary parts of .entry-content to fix the layout, I’ve a whole bunch of unnecessarily redundant CSS.

Another look at the default CSS for the parent Twenty Thirteen theme reveals line #659…

Yes, this is it. This one CSS rule is completely breaking Nivo slider’s animation effects.

The fix is to simply un-set max-width to the default value of none by very specifically targeting the slider img elements. I placed this rule in my child theme’s style.css file.

Since .entry-content #slider img is more specific than the original selector, .entry-content img in the parent theme, it will automatically take precedence.

Nivo slider is now working as designed.

CSS shorthand for margins

When you specify margins for an element in your CSS, it might look like this…

Where each item above is pretty self explanatory. As you may already know, the order & format of the list above is totally arbitrary. It’s the same as this…

If you’re interested in making your code more compact, simply use the “shorthand” by writing “margin:” and following it with the specified margins in this exact order…

TOP
RIGHT
BOTTOM
LEFT

like this…

or…

Specifying margins using CSS shorthand is explained in exact detail here at the W3 Schools website. However upon your first reading it may not seem clear how you could possibly remember the shorthand rules.

I’m going to attempt to break it down, hopefully making it easier:

Follow these two very simple “rules of thumb”:

1.  Always start at the TOP side of the element.
2.  Always move Clockwise around the element’s sides.

…top, right, bottom, & left

Got it?

But what if some or all of your margins are equal to each other- can you compact the shorthand even further?

Yes, you can. (Don’t forget the Rules of Thumb above)

 

Case #1. If left & right margins are the same:

TOP (10 pixels)
RIGHT & LEFT (12 pixels each)
BOTTOM (8 pixels)

To remember this, apply the rules of thumb (start at top and move clockwise) but stop after the third side. Top, Right (same as Left), Bottom, stop.

 

Case #2. If top & bottom margins are the same AND right & left margins are the same:

TOP & BOTTOM (10 pixels each)
RIGHT & LEFT (12 pixels each)

To remember this, apply the rules of thumb (start at top and move clockwise) but stop after the second side. Top (same as Bottom), Right (same as Left), stop.

 

Case #3. If all four margins are the same:

TOP, RIGHT, BOTTOM, & LEFT (10 pixels each)

To remember this is obvious; one number specifies all four sides… or simply following the rules of thumb (start at top and move clockwise) but stop after the first side. Top (same as Right, Bottom & Left), stop.

And to remove all default margins,

 

Case #4. If top & bottom margins are the same:

Unlike, Case #1 above, there is no special shorthand for this.

 

Other Examples:

All of the above examples assume you are specifying all four sides. What if one or more are zero?

 

TOP (no margin), RIGHT (12 pixels), BOTTOM (no margin), LEFT (12 pixels):

 

TOP (no margin), RIGHT (12 pixels), BOTTOM (no margin), LEFT (no margin):

alternatively,

(however, without specifying a zero margin for the other three sides, any default margins will apply)

 

TOP (12 pixels), RIGHT (12 pixels), BOTTOM (no margin), LEFT (no margin):

 

TOP (no margin), RIGHT (12 pixels), BOTTOM (no margin), LEFT (14 pixels):
(note that even though TOP & BOTTOM are the same, they cannot be combined in this case because RIGHT & LEFT are different from each other)

 

Notes: Zero can be written as simply "0" without the units on the end. I prefer to leave the units off because in this case, they are simply ignored.  As per the W3C, “The format of a length value (denoted by in this specification) is a (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.”

 

Reference: http://www.w3.org