Get Adobe Flash player

WordPress NextGEN Slider Widget Center CSS

I’m Not a Code Monkey — But CSS is easy — Let Me Show You!!

“How do I center the NextGEN Gallery Slider Widget?”

I’ve seen this asked a lot.  I had this issue too when my sister wanted the NextGEN Gallery Slider Widget on her WordPress Site.  I admit — it took me a while to puzzle it all out — but CSS has been a favorite code of mine for quite a few years now.  (ZenGarden totally sold me on CSS styling!)

After a bit of searching around and a helpful link I found buried in the NextGEN Gallery CSS template files — I figured it out!   However, it is a matter of having some CSS knowledge to make the code from the url work with NextGEN Gallery Slider Widget.  So I decided to share my code with any seeking it.

My sister’s site is Art heavy… She’s an artist and of course she want’s to show off and highlight her work.  I gave her the option to use the gallery widget or the slider widget, (both supplied in the NextGEN Gallery plugin.)  Of course, she wanted the slider — it highlights individual images — a much more impressive way to show them off as they won’t get lost in a sea of other images.

Before I began this is what the slider widget looked like:

Before Changing the Default Code to My CSS Code

As you can see everything was aligned to the left making it look awkward on the page.   It just didn’t look good at all.  I knew I had to fix the alignment.

So here’s what I did…

Familiarize Yourself With NextGEN Gallery Admin Menu

Before you change the code you have to know where it is and what code your are going to change.  You need to pick which of the Styling Templates you want to use.  You will find them located under “Style” in the NextGEN Gallery Admin Menu — “Gallery”.

Take some time activating each of them and checking out how they look and feel on your site.  Once you’ve picked your template you can begin modifying it to fit your site’s needs.

An Aside:  CSS isn’t very hard to do — but it can get confusing.  If you are styling your own site I highly recommend you spend a little time learning the basics about CSS.  You can do marvelous and magical things with it!!!  Since we all learn differently what has worked well for me may not be your cup of tea.  I recommend you do a Google Search and find the tutorials that best suit you!

Now that you have chosen a NextGEN Template you want to do a search for:  Sidebar widget inside of it.  With your template open you can do this in your Firefox browser by clicking on the “Edit” in the Menu area of the browser.  Type in (or copy/paste) “Sidebar widget” (without the quotes) into the “Find” box located at the bottom of the browser window and hit the “Next” Button.  This will take you to the area in the css that you will need to modify.

I’m There Now What?!

The code you are going to change is everything in that one section.  Highlight from the top to the bottom (Be Careful!  You just want to change the sidebar widget area ONLY!!! You don’t want to replace any of the other code!)

Copy/paste the following over the old code:

/* ----------- Sidebar widget -------------*/
.ngg-widget {
overflow: hidden;
margin:0pt;
padding:5px 0px 0px 0pt;
}
.ngg-widget-slideshow {
overflow: hidden;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
vertical-align: middle;
}
.ngg-widget img {
border:2px solid #A9A9A9;
margin:0pt 2px 2px 0px;
padding:1px;
}
.ngg-widget-slideshow img {
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
display: block;
text-align: center;
vertical-align: middle;
border: 1px solid #A9A9A9;
padding: 2px;
}

Once you have replaced the old code with the new code, hit the “Update” button to save your work.

An Aside:  In order to retain your code you should save a copy of the template you chose to your themes folder.  You can find the name of the file you are using by selecting (not activating) each template.  When you find the one you are using make note of the name.  That is the file you want to backup and save.  This way when NextGEN Gallery Updates it will be very easy for you to put your centering code back into the updated Template files.

Yes, you can modify some of the code, like padding and the border.  But be VERY careful should you choose to modify anything labeled IMPORTANT.

You may also notice that in the old code much of the classes were lumped into one but in the above code I have individualized them.  The reason is simple:  I want my slider widget to center but I don’t want to break the gallery widget in the process.  The above code allows both widgets to display as they should.

Here’s the Result:

After Changing the CSS

As you can see — the image is now centered.

Please keep in mind that there is other CSS code that can influence padding and margins of the images in the slider widget.  If you are having issues figuring out where extra styling may be coming from I highly recommend using “Firebug” a Firefox add-on that will allow you to dissect specific parts of your pages.  Sorting through them will help you locate the rogue code.

Still having issues?  If all else fails you — talk to the experts!  Ask the people-in-the-know to help you out!  Have a favorite CSS site?  Talk to them!  Using WordPress?  Use the Support forum in the NextGEN Gallery.  Or you can talk to me…  I will do my best to help if I can.  Whatever you do — don’t give up and don’t panic!  It’s a small thing and we can fix anything by working together.

Merry CSS Styling to You!

Lan

Add Comment Register



Leave a Reply

Share!
Follow Me
My deviantArtFriend me on FacebookAdd me to your circlesFollow me on PinterestRSS Feed
Subscribe!

Categories