[HTML] Add affiliates to the bottom of your homepage

This tutorial will help you with adding affiliates to the footer of your forum with an amazing effect.





1º - HTML
Go to Administration Panel > Display > Templates > General and open the index_body template.

Search for {CHATBOX_BOTTOM} and paste the code below after it :

Code:

<div id="affiliate_box">
  <div id="affiliate_title">Affiliates</div>
  <a href="FORUM_URL" target="_blank"><img src="FORUM_LOGO" /></a>
</div>

For adding more than 1 affiliate then paste the below code before the "</div>"

Code:

<a href="FORUM_URL" target="_blank"><img src="FORUM_LOGO" /></a>

affiliate_box : is the element used to style the affiliates
FORUM_URL : Replace this by the URL of your affiliate's website
FORUM_LOGO : Replace this by the URL of your affiliate's image

In the link you will see target="_blank", this means that the link will open in a new window, or tab. You can remove this depending on your preferences.

To add a new line write <br/>, doing so will force the elements after it onto the next line.

When finished save and publish the template by pressing the green cross.


2º - CSS
Go to Administration Panel > Display > Picture & Colors > Colors > CSS Stylesheet and paste the following code :

Code:

#affiliate_box{margin:6px 0;padding:3px 3px 20px;text-align:center}
#affiliate_title{border-bottom:1px solid #CCC;color:#666;font-size:18px;font-family:Trebuchet MS;font-weight:700;margin-bottom:6px;padding-bottom:3px}
#affiliate_box img{transition:all 900ms ease 0!important}
#affiliate_box img:hover{border-radius:8px!important;height:50px!important;background:#FFF!important;transform:scale(2.85,1.97);transition:all 800ms ease 0!important;width:137px!important;z-index:999!important}


As mentioned earlier #affiliate_box is used to define the style of the affiliates container. You can change the background, border, alignment.. #affiliate_title is used to define the style of the title( Affiliates ) you can change the font color, size, border..

When you paste the code and you finished the extra style you want, click save and you are done!


3º - Preview

---

If you have any questions related to this topic create a topic with the following title: Add affiliates to the bottom of your homepage

[sucesso="Tutorial Accepted"]Tutorial accepted and points added to the user.[/sucesso]

nice topic bro keep up the good work bro

deaneo8 wrote:[link="/t684-html-add-affiliates-to-the-bottom-of-your-homepage#4296"]nice topic bro keep up the good work bro

I am doing my best! Thank you!