Category: CSS

Posted on

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…

<div class="hentry">
    <div class="entry-content">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
            ....

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…

.entry-content img {
    max-width: 100%;
}

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.

.entry-content #slider img {
    max-width: none;
}

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.

Posted on

CSS shorthand for margins

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

#myDiv {
    margin-top: 10px;
    margin-right: 12px;
    margin-bottom: 3px;
    margin-left: 8px;
}

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…

#myDiv {
    margin-bottom: 3px; margin-top: 10px;
    margin-left: 8px; margin-right: 12px; }

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…

#myDiv { margin: 10px 12px 3px 8px; }

or…

#myDiv {
     margin: 10px 12px 3px 8px;
}

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)

#myDiv { margin: 10px 12px 8px; }

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)

#myDiv { margin: 10px 12px; }

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)

#myDiv { margin: 10px; }

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,

#myDiv { margin: 0; }

 

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):

#myDiv { margin: 0 12px; }

 

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

#myDiv { margin: 0 12px 0 0; }

alternatively,

#myDiv { margin-right: 12px; }

(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):

#myDiv { margin: 12px 12px 0 0; }

 

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)

#myDiv { margin: 0 12px 0 14px; }

 

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