Joomla Templates Club 406,261 posts

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#865067

How can I enable this style and type

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#865122

I have managed to extract the HTML section of the code and decide to do it with a custom HTML. May I know the relevant CSS that needs to be added to the custom CSS for it to work with the screenshot and the attached HTML?

---

Attachments:

1. 

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#866070

`<div class="section " id="section-314" >
<div class="section-ct">
<div class="section-inner section-lightest" >
<h3 class="section-title ">
Gallery Style 2 – Effect None
<p class="container-sm section-intro hidden-xs">Meet just a few of the many dedicated, enthusiastic, collaborative and mildy workaholic people who add real edge and variety to our offering. We could not reach this far without such a hero team.

<div class="acm-gallery style-2 style-none">
<div class="isotope-layout container">
<div class="isotope" style="margin: 0 -20px;">
<div class="item grid-sizer grid-xs-2 grid-sm-2 grid-md-4">
<div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
<a class="item-mask" href="#">
<div class="item-image" >
<a href="#" title="Bert Bonetti"> <img src="images/services/item-1.jpg" >

<div class="item-details">

Bert Bonetti

                    <span>Software Engineer</span>                          
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Sean Hamrick">                                       <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Sean Hamrick">Sean Hamrick</a></h4>
                    <span>Product Manager</span>                            
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Bailey Drees">                                       <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Bailey Drees">Bailey Drees</a></h4>
                    <span>Editorial Assistant</span>                            
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Kerri Gastelum">                                     <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Kerri Gastelum">Kerri Gastelum</a></h4>
                    <span>Marketing Director</span>                         
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Violet Gates">                                       <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Violet Gates">Violet Gates</a></h4>
                    <span>Social Media Assistant</span>                         
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Iva Dietrich">                                       <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Iva Dietrich">Iva Dietrich</a></h4>
                    <span>Support Technician</span>                         
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Clarissa Buteau">                                        <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Clarissa Buteau">Clarissa Buteau</a></h4>
                    <span>Social Media Assistant</span>                         
                 </div>
              </div>
              <div class="item item-1 grid-xs-2 grid-sm-2 grid-md-4 " style="padding: 0 20px 40px;">
                 <a class="item-mask" href="#"></a>
                 <div class="item-image"  >
                    <a href="#" title="Leontine Martin">                                        <img src="images/services/item-1.jpg" >
                    </a>                                                            
                 </div>
                 <div class="item-details">
                    <h4><a href="#" title="Leontine Martin">Leontine Martin</a></h4>
                    <span>Editorial Assistant</span>                            
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>

`

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#866231

Or perhaps to make life a lot easier… how can i just get the gallery style effect 2 please?

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

#868470

HI vernontee,

JA ACM is still not a stand-alone extension so it can be in all templates. At this moment, it goes along with specific template only.

You can check out this documentation for how to use a specific style in different template: https://www.joomlart.com/documentation/joomla-templates/uber-template/acm-configuration#acm-other-template

Please notice that if style only have HTML markup and css/less, it can work properly but if that style also need the customization on JS code of template, you will have to customize that template to work with that style.

[vernontee Friend vernonteeJoin date: November 2015Posts: 440Downloads:53Uploads:22 Thanks: 18 Thanked: 4 times in 4 posts]

#889525

So if id like that kind of look and feature in JA-directory, what will you recommend?

Thanks

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

#889554

You will need to customise much on JS to achieve that. You can check in Uber template and apply to JA Directory. This task will take time so I recommend you to hire a developer to get it done for you.

[Author]

Posts