Joomla Templates Club 406,261 posts

[jemir Friend jemirJoin date: June 2010Posts: 15Downloads:0Uploads:9 Thanks: 6]

#197497

Hi, I want to put full width bar image at the bottom of screen. That image bar will be sticky and will be display on every page. How to make this happen? TQ

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

#534041

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as provide a screenshot mock-up image of what it is you are wanting to accomplish.

[jemir Friend jemirJoin date: June 2010Posts: 15Downloads:0Uploads:9 Thanks: 6]

#534099

Actually my development is still on localhost. Below is example image bar (red) that i need to put at bottom of screen.

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#534331

@ jemir,

Please try tweak below:

– Open the file: /templates/your_template_name/tpls/blocks/footer.php then add this rule: http://prntscr.com/3hkqf1

<section class="my-company">
<div class="container">
<div class="row">
<div class="col-md-8 company-name">
<?php echo JText::_('COMPANY_NAME') ?>
</div>
<div class="col-md-4 company-logo">
<a class="company-logo" href="http://t3-framework.org" target="_blank">
<img src="your_link_logo" alt="Smiley face" height="42" width="42">
</a>
</div>
</div>
</div>
</section>

– Open the file: /language/en-GB/en-GB.tpl_ja_sugite.ini then add this rule: http://prntscr.com/3hkqhp

;Custom
COMPANY_NAME = "Your Company Name"

You can change company’s name in red.

– Create a new file called “custom.css” in the /templates/your_template_name/css/ folder, then add this rule:

.my-company {
border-top: 1px solid rgba(255, 255, 255, 0.05);;
position: fixed;
bottom: 0;
width: 100%;
background: #2D3E50
}
.my-company .row .company-name {
text-align: left;
padding: 15px 0;
}
.my-company .row .company-logo {
text-align: right;
padding: 10px 0;
}

You should see this result:

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. jemir

[Author]

Posts