Any CSS experts care to help?

Only 4 images or will there be arbitrary number of rows?

I believe this will need to be addressed either in the php generation (by attaching classes like 'left' 'left' 'right' 'right')

Or using Javascript to basically do the same thing.

 

Can't really give an exact answer without seeing the code.

If the plugin generated code gives each column a unique class and sizes don't change all you would have to do is add a right margin to the second column.

 

Thats true, as long as this is what you need you could use:
div.thumb:nth-child(4n+2) {
margin-right: 150px;
}

If you apply it with jQuery, it will work in IE. Also, this may only work with lists, but it would be much easier to convert the theme to a giant list than anything else.

 

Like jared_kipe suggested you could use jQuery to add a class to every third.

Code:

$("div.ngg-gallery-thumbnail-box:nth-child(4n+3)").addClass("third");

 

Jesus, I've been programming in SilverStripe so long I have to wonder just who writes code like this.

Assuming that the unique id's are numbered as you suggest they are...

Code:

<!-- Thumbnails -->
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($image->pid % 4) == 3 ) echo('third'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

This will make every third box have the class third so you can apply some css like .third {margin-left: 150px;}

EDIT: I usually prefer in situations like this to use float left or right, (as margins can be difficult cross browser if you're picky. As my original post mentioned, I would have written that class thing like this instead.

Code:

[COLOR="Red"]class="ngg-gallery-thumbnail-box <?php $class = ((($image->pid - 1) % 4) < 2 ) ? 'left' : 'right'; echo($class); ?>"[/COLOR]

 

You don't need jQuery to use the nth-child pseudo-class (even though you could). You can just add this CSS to your stylesheet:

Code:

div.ngg-gallery-thumbnail-box:nth-child(4n+3) {
  /* your styling here */
}

 

Internet Explorer doesn't support the nth-child pseudo class

 

nth-child() is a great idea, but IE doesn't support it. jQuery does even in IE though.

But in this example it is actually much easier to 'fix' it in the PHP view. I also noticed that the loop already takes care of incrementing a variable, $i for you so that would be much safer than $image->pid (which I suspect is NOT a simple counting but the ID of the image in the database)

Code:

<!-- Thumbnails -->
	[COLOR="Red"]<?php $i = 0; ?>[/COLOR]
	<?php foreach ( $images as $image ) : ?>
	
	<div id="ngg-image-<?php echo $image->pid ?>" [COLOR="Red"]class="ngg-gallery-thumbnail-box <?php if ( ($i % $gallery->columns) == ($gallery->columns / 2) ) echo('middle'); ?>"[/COLOR] <?php echo $image->style ?> >
		<div class="ngg-gallery-thumbnail" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
				<?php if ( !$image->hidden ) { ?>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>
			</a>
		</div>
		
			
		<p align="left" class="imagecaption"><strong><?php echo $image->alttext ?></strong><br />
</p>
	</div>
	
	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

This will work better now for arbitrary $gallery->columns (assuming even number of columns) and using the css class .middle to give it some margin.

 

Though this solution works very feel, it's not a good practice to alter the code of a plugin. If an update to the plugin is installed the changes will be lost.

 

I may be off base because I'm used to working in SilverStripe and not Wordpress. But this doesn't have to do with the model or controller for the plugin, but merely the view or 'template'.

In silverstripe, 'themes' can have their own versions of the template, so installing a new version of a module or plugin will use the 'themed' version of the template. I would have to assume Wordpress 'theming' has similar options, else every plugin that generates HTML would need to be extremely generic and not allow 'theme' developers to customize them.

 

Also, just to tout SilverStripe a little more, this template written in the ss_viewer parsed templating language would be:

Code:

<% control images %>
   <div id="ngg-image-{$pid}" class="nag-gallery-thumbnail-box column-{$Modulus(4)}" $style >
      <div class="nag-gallery-thumbnail">
         <a href="{$imageURL}" title="{$description}" $thumbcode >
         <% if !hidden %>
            <img title="{$alttext}" alt="{$alttext}" src="{$thumbnailURL}" $size />
         <% end_if %>
         </a>
      </div>
      <p align="left" class="imagecaption"><strong>{$alttext}</strong><br /></p>
   </div>
	
   <% if !hidden && MultipleOf(4) %>
      <br style="clear: both" />
   <% end_if %>
<% end_control %>

Note that I hard coded the "columns" attribute to 4 for this theme, as I don't really know what relationship the $gallery->columns variable has to the images variable, so I would probably abstract that away in the controller.