Public Forums 71,145 posts

[mrwilson Friend mrwilsonJoin date: January 2012Posts: 14Downloads:0Uploads:1]

#194974

Hello there!

I am a total novice on Joomla, could you please tell me how the “Our Team” page was constructed on the main Purity III template demo on the website? This was one of the main attractions for me, I see myself using this feature strongly and will need to be able to know the functionality and capabilities.

Regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#523484

What do you mean by “how it was constructed?”

What is it you are hoping/wanting to accomplish with your Purity III based site?

[mrwilson Friend mrwilsonJoin date: January 2012Posts: 14Downloads:0Uploads:1]

#523486

By constructed I am talking about the circle profiles with the social media Twitter links underneath? I would be interested in implementing this in the frameworks of my website by enabling me to show my authors who work under the company and possibly direct users onto their blog by clicking the image.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#523488

One way you can study – and learn from – the various design elements of various parts of the template is to utilize an online web development tool like FIREBUG to examine the CSS and images that comprise the various styling elements

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

#523688

@ MrWilson,

Do you mean this typo page? http://joomla-templates.joomlart.com/purity_iii/index.php/typography/typo-page/our-team

This page has menu item type Single Article and displays an article named Our team. Here is its content:


<div class="our-team">
<div class="page-header">
<h1 class="text-center">Welcome to our team</h1>
</div>
<p class="lead text-center">
Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. Enim neque tortor mattis sed semper lorem tellus Phasellus eu nonummy. Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac. Phasellus id cursus malesuada libero dui Morbi senectus diam gravida Vestibulum.
</p>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-1.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-2.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Bennie Moran</h3>
<p>Developer</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-3.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Developer</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-4.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Designer.</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-5.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Sean Thomas</h3>
<p>Tester</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-6.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Bennie Moran</h3>
<p>Senior Project Manager</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-7.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Project manager</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/joomlart/corporate/staff-8.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Community manager.</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
</div>


[Author]

Posts