Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#198868

hello,
I’m trying to place 2 offices “locations” to the footer of the template, but it did not work with me. here is the mock for that. please help.

---

Attachments:

1. 

[ꦯꦸꦕꦶ ꦏꦸꦂꦤꦶꦲꦮꦤ꧀ Friend ꦯꦸꦕꦶ ꦏꦸꦂꦤꦶꦲꦮꦤ꧀Join date: April 2008Posts: 100Downloads:9Uploads:11 Thanks: 8 Thanked: 39 times in 32 posts]

#539001

Hi @okkalid,

First, you need to make a backup copy of footer.php ja_medicare/tpls/blocks
after that we can then proceed editing footer.php


<div class="main-container clearfix">
<div class="row">
<?php if ($this->countModules('footer-info')) : ?>
<div class="footer-info col-xs-12 col-md-6 <?php $this->_c('footer-info') ?>">
<jdoc:include type="modules" name="<?php $this->_p('footer-info') ?>" style="raw" />
</div>
<?php endif ?>

<?php if ($this->checkSpotlight('footnav', 'footer-1, footer-2, footer-3, footer-4')) : ?>
<!-- FOOT NAVIGATION -->
<div class="col-xs-12 col-md-12 col-lg-6">
<?php $this->spotlight('footnav', 'footer-1, footer-2, footer-3, footer-4') ?>
</div>
<!-- //FOOT NAVIGATION -->
<?php endif ?>
</div>
</div>


here we’re trying to make a room for the second office info.

After that, go to your template’s backend and edit Footer Info positioned at footer-info
paste the code below to replace the previous content


<div class="office-container">
<a href="index.php"><img src="images/joomlart/logo-footer.png" border="0" alt="" /></a>
</div>
<div class="clearfix"></div>

<div class="office pull-left">
<h3 class="module-title">Office 1</h3>
<ul>
<li><i class="fa fa-home secondary-background"></i> Medicom Ltd Street , New York--</li>
<li><i class="fa fa-phone cyan-background"></i> 905-476 -2437 </li>
<li><i class="fa fa-envelope primary-background"></i> <a href="">company@mail.com</a></li>
</ul>
</div>
<div class="office pull-right">
<h3 class="module-title">Office 2</h3>
<ul>
<li><i class="fa fa-home secondary-background"></i> Medicom Ltd Street , New York</li>
<li><i class="fa fa-phone cyan-background"></i> 905-476 -2437 </li>
<li><i class="fa fa-envelope primary-background"></i> <a href="">company@mail.com</a></li>
</ul>
</div>

<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox">
<a class="addthis_button_facebook_follow" addthis:userid="joomlart"><i class="fa fa-facebook"></i></a>
<a class="addthis_button_twitter_follow" addthis:userid="JoomlArt"><i class="fa fa-twitter"></i></a>
<a class="addthis_button_rss_follow" addthis:userid="joomla.org/rss.html"><i class="fa fa-rss"></i></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-523d4894767843b5"></script>
<!-- AddThis Follow END -->


lastly.. create a custom.css under ja_medicare/css/
paste


.office-container {
width:100%;
}
.office{
width:50%;
}
.office .module-title {
color:#FFFFFF;
}


you need to readjust other elements’ css accordingly to accomplish your goal

hope this help

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539139

Hi wow it works very well, but there is another issue happened in the footer, which the blocks become small

I need only 2 blocks for in the footer area, but now they are compact

Thank you

---

Attachments:

1. 

[ꦯꦸꦕꦶ ꦏꦸꦂꦤꦶꦲꦮꦤ꧀ Friend ꦯꦸꦕꦶ ꦏꦸꦂꦤꦶꦲꦮꦤ꧀Join date: April 2008Posts: 100Downloads:9Uploads:11 Thanks: 8 Thanked: 39 times in 32 posts]

#539180

Hi @okkhalid,

I have it set for you.

You need to go to template’s backend, under Layout tab, change the number of spotlight shown.

Hope this helps

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#539294

nawainruk you are the best :laugh:

[Author]

Posts