Style previous – next?

@steveush – are you able to take a quick look at this and let us know if we can adjust the navigation widths with come custom CSS to allow the slider navigation to sit on one line?

Thanks in advance.
Phill

Hi @mikemp,

The issue here is that there seems to be another plugin adding extra HTML markup into the gallery. There are extraneous <p> elements in the gallery markup on your page that do not appear to come from our plugin. One wraps the label containing the image count while another is being inserted just after the Next button and yet another is added into the root container. The below shows the simplified HTML markup containing these <p> elements.

<div class="foogallery">
	<div class="fiv-inner">
		<!-- ...items -->
	</div>
	<div class="fiv-ctrls">
		<div class="fiv-prev"><span>Prev</span></div>
		<p>
			<label class="fiv-count"><span class="fiv-count-current">1</span>of <span class="fiv-count-total">28</span></label>
		</p>
		<div class="fiv-next"><span>Next</span></div>
		</p>
	</div>
	</p>
</div>

The above should actually look like the below:

<div class="foogallery">
	<div class="fiv-inner">
		<!-- ...items -->
	</div>
	<div class="fiv-ctrls">
		<div class="fiv-prev"><span>Prev</span></div>
		<label class="fiv-count"><span class="fiv-count-current">1</span>of <span class="fiv-count-total">28</span></label>
		<div class="fiv-next"><span>Next</span></div>
	</div>
</div>

So I would try and find the plugin that is adding in this extra markup and disable it or exclude the galleries from being included in whatever it is trying to do.

That said if you can’t find what is adding in this extra markup you can style away the problems being caused using the following CSS inserted into your styles.css file.

.foogallery.fg-image-viewer .fiv-inner > p {
	display: none;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls {
	position: relative;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next,
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
	position: absolute;
	float: none;
	width: 80px;
	top: 0;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
	left: 0;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
	right: 0;
}

Thanks
Steve

Thank you, great info.