Joomla Templates Club 406,261 posts

[xxxxmints Friend xxxxmintsJoin date: February 2008Posts: 93Downloads:0Uploads:2 Thanks: 20 Thanked: 3 times in 1 posts]

#186739

This is what I have and the images aren’t showing. As soon as I removed 2 images and pushed them to the centre (as per in another post) they disappeared and I can’t get them back.

Please advise.

<div class="introduction">introduction ...</div>

<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner" style="padding-left: 220px;"><img class="img-grayscale" src="images/joomlart/demo/sam-1.jpg" border="0" alt="Sample image" /></div></div>
<div class="caption" style="padding-left: 220px; width: 240px;">
<h3>John Doe</h3>
<p class="meta">Creative designer</p>
<p><strong>Laoreet vestibulum</strong> cursus elit fringilla pretium Sed ut sodales quis pretium. Lorem vestibulum orci in commodo vestibm est ac semper.</p>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner" style="padding-left: 300px;"><img class="img-grayscale" src="images/joomlart/demo/sam-2.jpg" border="0" alt="Sample image" /></div>
</div>
<div class="caption" style="padding-left: 300px; width: 240px;">
<h3>Jonnathan Orgen</h3>
<p class="meta">Video Specialist</p>
<p>Suspendisse et vivamus accumsan <a href="#" title="Sample link">phasellus auctor</a> nisl mauris facilisi aliquam et. Justo enim justo curabitured senectus donec pretium.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
</ul>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#489899

Hello,

In order to make 2 image to the center, add these code to Custom HTML input:

<div class="introduction">Consectetur adipiscing elit.</div>
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner"><img class="img-grayscale" src="images/joomlart/demo/sam-1.jpg" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>John Doe</h3>
<p class="meta">Creative designer</p>
<p><strong>Laoreet vestibulum</strong> cursus elit fringilla pretium Sed ut sodales quis pretium. Lorem vestibulum orci in commodo vestibm est ac semper.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<div class="thumb-mask">
<div class="mask"> </div>
<div class="mask-inner"><img class="img-grayscale" src="images/joomlart/demo/sam-2.jpg" alt="Sample image" /></div>
</div>
<div class="caption">
<h3>Jonnathan Orgen</h3>
<p class="meta">Video Specialist</p>
<p>Suspendisse et vivamus accumsan <a href="#" title="Sample link">phasellus auctor</a> nisl mauris facilisi aliquam et. Justo enim justo curabitured senectus donec pretium.</p>
<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>
</div>
</div>
</li>
</ul>

Add these line to file
templates/ja_onepage/css/custom.css


ul.thumbnails li.span3 {
display: inline-block;
float: none;
}
ul.thumbnails {
float: none;
text-align: center;
}


2 users say Thank You to Saguaros for this useful post

1. xxxxmints
2. thefc_uk

[xxxxmints Friend xxxxmintsJoin date: February 2008Posts: 93Downloads:0Uploads:2 Thanks: 20 Thanked: 3 times in 1 posts]

#490156

Thank you, that’s wonderful. It worked!

Mel

[Author]

Posts