Joomla Templates Club 406,261 posts

[daveburstein Friend davebursteinJoin date: December 2013Posts: 125Downloads:227Uploads:22 Thanks: 43 Thanked: 12 times in 2 posts]

#731765

We like the animation and parallax in Appolio but the template is hard for us to figure out. It’s a custom HTML module with multiple classes as below. We found where the images are to replace but can’t figure out how to put links on those images.

Help please. Login to our test site with Appolio included.

<div class=”col-md-5 col-sm-12 last-content”>
<div class=”main-col”>
<div class=”shadow”> </div>
<div class=”background”> 
<div class=”col col1 col-md-1 col-sm-1 col-xs-1 “> </div>
<div class=”col col2 col-md-1 col-sm-1 col-xs-1 “> </div>
<div class=”col col3 col-md-1 col-sm-1 col-xs-1 “> </div>
<div class=”col col4 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col5 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col6 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col7 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col8 col-md-1 col-sm-1 col-xs-1 “> </div>
<div class=”col col9 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col10 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col11 col-md-1 col-sm-1 col-xs-1″> </div>
<div class=”col col12 col-md-1 col-sm-1 col-xs-1″> </div>
</div>
</div>

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

#752798

Hi Dave,

As you can see the content output of this module as you listed above, each div will be set with an image background:


.col1 {
background: url("../images/background-col1.jpg") no-repeat 0 50%;
}
.col2 {
background: url("../images/background-col7.jpg") no-repeat 0 50%;
}
.col3 {
background: url("../images/background-col5.jpg") no-repeat 0 50%;
}

...........................................


It would be hard to achieve as you wish but you can try this way:
– In back-end settings of this module, you add <a> tag for each <div> with your desired link such as:


<div class="col col1 col-md-1 col-sm-1 col-xs-1">*<a href="http://www.joomlart.com"></a></div>


– Open the file: root/templates/ja_appolio (your default template)/css/custom.css (create this file if it doesn’t exist

add this css rule:


.section-center .col {
position: relative;
height: 500px;
}

.section-center .col > a {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 99909;
}


1 user says Thank You to Saguaros for this useful post

1. daveburstein

[daveburstein Friend davebursteinJoin date: December 2013Posts: 125Downloads:227Uploads:22 Thanks: 43 Thanked: 12 times in 2 posts]

#753132

Thank you. We’ll try it.

[Author]

Posts