Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[HTML] Add affiliates to the bottom of your homepage



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Virus

avatar
★Moderator★
★Moderator★


Tutorial: 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.


--> Tutorials, tips and tricks <--
Add affiliates to the bottom of your homepage



- 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.


- 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!


- Preview





© PunBB Design


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

Powered by PunBB
Currently 0 users have thanked Virus for this post:

2
Offline

  Guest

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

Powered by PunBB
Currently 0 users have thanked Guest for this post:

3
Offline

  deaneo8

avatar
V.I.P. Member
V.I.P. Member
nice topic bro keep up the good work bro

Powered by PunBB
Currently 0 users have thanked deaneo8 for this post:

4
Offline

  Virus

avatar
★Moderator★
★Moderator★
@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!

Powered by PunBB
Currently 0 users have thanked Virus for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum