Video:How To Wrap Text Around NextGen Slideshow In WordPress 3.0 Using css

Published October 7, 2010 | By Govindji Patel

Log in in your admin of WordPress once you have loged in under plugin menu click on editor.
On top right hand dropdown menu select NextGen Gallery and click select ,on right look for nextgen-gallery/css/nggallery.css and click on it.

In editor look for .slideshow code. around line 253

You will find this code

.slideshow {
margin-left:auto;
margin-right:auto;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-align:center;
}

Change auto to what ever pixels you want on margin-left and margin-right and add float:left; to float to left or float:right; to float
to right.

The code should look like this
.slideshow {
margin-left:20px;
margin-right:20px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
text-align:center;
float:left;
}
Click on Update

Now if you have slideshow in post it should have wrapped around text after a refresh.
If the text does not wrap some slideshow use this code

.ngg-slideshow {
overflow: hidden;
position: relative;
}

Change to

.ngg-slideshow {
float: left;
margin-right: 10px;
overflow: hidden;
position: relative;
}

This will float to left if you want float to right then change left to right and you will need to change margin-right to margin-left.

By using above method and change code in the plugin css you are going to have all pages display the sideshow same but if you want to display in different positions on the page or post then you will need to use a div tag on the page.

<div style= "float: right; background-color: #f0f0fa; margin-left: 10px; margin-right: 10px; ">slideshow shortcode</div>

You can change right to left and background and margins in code as you wish.

About Govindji Patel

I am Author/Publisher WordPress Coach and Consultant who enjoys writing tutorials and helping wordpress users build better WordPress website/blog.

Posted in Videos | Tagged blogging, branding, Content Management System, marketing, search engine optimization, Social Media, webdesign, WordPress as Website, Wordpress blog workshop, Wordpress websites

Dean

Thanks for posting this hack.
I am trying to do the same for an ng-gallery, not a slide show. I have also used another hack to hide everything after the first thumbnail – so that only 1 thumbnail is displayed for the gallery pop-up and because of this, I’m finding it hard to hack the css for next gen so that I can both wrap the html text around the gallery thumbnail and still only show 1 thumb.

The hack for the single thumb uses a div class to further control the thumb css and this just hides the other thumbs, so really they are still there, on the page and have just been hidden, so a mouseover and click can still activate the pop up gallery. I think this is what is causing problems with the text wrap.

So, how could I remove the thumbs after the first one AND get the text to wrap?

d.
Govindji Patel

Have you tried to put gallery in a album and then put album in your article so you will only have your album thumbnail and when clicked open the gallery. You can see how it is done on this website http://rylinmedia.com/all-magazines/ the css code you will looking for is
.ngg-thumbnail {
margin-right:12px;

add
float:left;
Dean

Thank you. I will give this a try and report back.
I think that album shows a stack of photos type border though.
But will look at the code.
Dean

Ok. Have tried using the album with a gallery inside it.
But, this means an additional step between clicking the album and seeing the thickbox browser! Also means an extra click for the viewer and you see the album title and number of pages, which I don’t want!

Here’s link to test page…
http://www.diy-sos.co.uk/?page_id=307&preview=true&preview_id=307&preview_nonce=bf811be283

And here is link to Happy Customer page which is what I want, but with the thumbnails up in the copy, to the right with flow around left?

Any ideas?
Thanks for your help.
Dean

sorry, missed 2nd link…

http://www.diy-sos.co.uk/?page_id=28
Govindji Patel

The link you put above does let me see it as I get this
\You do not have permission to preview drafts.\

If I could see the page may be find where you change the code to wrap text

On 2nd link in /wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0

Look for this code

.ngg-galleryoverview {
clear:both;
display:block !important;
margin-top:10px;
overflow:hidden;
width:100%;

You will need to change width as it 100% and that does not let you wrap I tried the same size as image 125px and then add float:left; and it worked.

The only thing is that when you update NextGen you will need to change code as it will be over written.
Dean

Sorry. Try this for first link…
http://www.diy-sos.co.uk/?page_id=307

Or just go to http://www.diy-sos.co.uk and click “test”

This shows how a gallery inside an album behaves.

As for your css hack to ‘ngg-galleryoverview’ above… I will try this and, yes of course I have made a copy of nggallery.css inside my theme folder to keep for restore/upgrade purpose. I have also commented out changes made to it for future reference.

Thank you, again I will report back.
Govindji Patel

Check this url will show all different ways you can use NextGen
http://nextgen-gallery.com/album/
Dean

Govindji,

That worked great for the gallery thumbs, thank you.
I was trying to work out which class to edit and you correctly
identified gallery-overview… cheers.
I really appreciate your help.
One more thing, if I wanted to put the text: \Click to browse\
under each gallery thumbnail, how could I do that?
If it’s documented somewhere, please just direct me there.
Thanks again
Dean.
Shannon Willison

Hello!

I changed the code in the CSS gallery and followed your directions exactly. I even went back to see if I did anything wrong but, the text on my home page still is not wrapping around the slideshow! Please Help!
http://03427df.netsolhost.com/
Govindji Patel

Looks like you have type of java script

jQuery(document).ready(function(){
jQuery(“#ngg-slideshow-1-2-1″).nggSlideshow( {id: 1,fx:”fade”,width:320,height:240,domain: “http://03427df.netsolhost.com/”,timeout:3000});
});

That is overriding your css code
Lauren

Hi Govindji
This tutorial is exactly what I’m trying to do for a site I’m building – I just want the NextGen slide show on the left, with the text wrapping on the right. I copied your exact text, but it didn’t make any difference. I did notice that when I’m in nextgen-gallery/css/nggallery.css, it says at the top that it’s inactive. I’m using NextGen version Version 1.8.2 and WordPress 3.2.1.
This is the pages I”m working on: http://www.seeingthecityanew.co.uk/
If you have any suggestions, that would be really appreciated.
Thanks a lot
Lauren
Govindji Patel

Your slide show css code does float but looks like is the way you have text in the post try and take the p tags out as it throws the text in paragraph
Lauren

Thanks for that suggestion – I’ve just tried this, but there actually any <p> tags appearing when I edit the text in HTML view. If you’ve any other suggestions, that would be great, otherwise I think I’ll just re-design this bit of the site!
Lauren
dave

changed css and it isn’t taking effect. it seems that in editor, the nextgen css says it is inactive. any suggestions
Govindji Patel

I need to see your url to see what you are using for the slideshow
Michael

Govindji:

Thanks for posting this. I followed your instructions, but I’m also having trouble getting the text to wrap around my slideshow. I’m using NextGen Gallery with the GalleryView add-on. My website is http://www.santasgarden.com

I also tried the following that you suggested on the wordpress.org website, but I am still unable to get the text to wrap:

/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0
look for this code around like 266
.ngg-slideshow {
overflow:hidden;
position:relative;
add
float:left;
margin-right:15px;

Thanks in advance for any suggestions/input.
Govindji Patel

Until I see the code for your website I can not help as when I clicked the url gives me website coming soon page
Michael

Sorry about that! Just turned off the under construction sign.
Govindji Patel

You have this code that is a wide div that is stopping from floating.

<div class=”ngg-galleryoverview“>

<div class=”slideshowlink“>

<a class=”slideshowlink“ href=”/?show=gallery&page_id=4“>[Show picture list]</a>

</div>

looks like it is for showing picture list what did you use for the shortcode
Michael

I am using [nggallery id=1] but I’ve also tried [ album id=x template=extend] with the same result. Thanks for looking into this.
Govindji Patel

Try this and change css as per article

[slideshow id=1]
Michael

That did it! Thanks so much for your help.
Michael M

Hi Govindji,
I am trying to wrap text around my nextgen gallery as well – have followed your css instructions but can’t get it to work. Any suggestions?
Here the link: http://mourjjan.com/
Thanks for your help. Michael
Govindji Patel

I had look at code I do not see it changed as per instructions above in 268

/wp-content/plugins/nextgen-gallery/css/nggallery.css

.ngg-slideshow {
overflow:hidden;
position:relative;

add

float:left;
margin-right:15px;
Michael M

You’re a star! That works…sorry I’m still learning lots here.
One more question: I want to minimise the distance between the gallery and the text – I’ve changed the margin-right to 5px but that doesn’t do very much. Any other way I can make the distance smaller?
Michael M

I’ve figured it out…just go -XXpx

Recent

Popular

Comments

Video:How To Wrap Text Around NextGen Slideshow In WordPress 3.0 Using css

About Govindji Patel

Related Posts

Recent

Popular

Comments