- Joined
- Jan 1, 2001
- Messages
- 60,101
XenFans.com Article: Extending on the XenForo Sidebar
Copyright (c) 2010-2011 http://xenfans.com, author: Steven Moore @ Mythotical's Blog
Adding an ad to the existing sidebar
So you want to add a block to your sidebar for ads! I'm here to tell you how through screenshots and explanation. This article is an in depth explanation that provides code, images, etc for use by those reading this article. Let's jump right into the beginning stages.
First thing we need to do is decide whether we want a block ad, skyscraper, banner, or text only. Let me explain each type:
Second thing we need to do now is create a new template so go to your ‘Admin Control Panel’ (admin.php), from the top navigation find ‘Appearance’, on the new page click ‘Templates.’ This loads a page with a list of templates. In the top right corner you will see ‘Create New Template,’ once this page loads you will assign your new template a ‘Template Name’ that fits its purpose. For now let’s name our new template ‘125_ad’ as the ad will be 125x125. In the box below the template name, use the code I have provided below.
Template Code:
The above code is important to include <div> tags so if you want to edit it to match that of other blocks then use the following code:
You should have a template completed looking as follows:
To explain the code I just provided, the <div> tags allow the block to be separate from the other blocks as well as defining specific display rules such as class=”section”, this tells the block to have the background of the color of the other blocks, size of the block, padding, margin, etc.
Same thing for class=”secondaryContent”, it is not unusual to see more than 2 <div> tags used throughout a template so as to fit all necessary display rules into a specific block. Anyway, of course the <a href> tag and <img> tag define the link and location of the image for displaying.
Before you leave this page, remember to click ‘Save All Changes’ or ‘Save and Exit’.
Now that we have our new template with proper code in place in that template, it’s now time to move on to the third thing which is adding the include of your new template to that of the ‘ad_sidebar_bottom’ template.
First return to the templates list by visiting the fifth paragraph. Once on the template list, in the search box to the top right side, enter ‘sidebar’ or ‘ad_sidebar_bottom’. Once the list refreshes, click on ‘ad_sidebar_bottom’, once that page loads, below ‘<xen:hook name="ad_sidebar_bottom" />’ add the following line of code.
If you used another name for your template, replace ‘125_ad’ with the name you chose. Click ‘Save and Exit’ to save all changes to the template then head to your forum index and refresh, on the right side you will see a new block below the other sidebar blocks with the ‘Advertise Here’ ad in place.
End result will look something like this:
Add sidebar to various pages
To add the sidebar to more than your forum list page, you can do the following to add the page to your thread list and thread view pages.
First open the template thread_list and thread_view then add this code to the very bottom:
Save and exit, refresh a thread list page or click into a forum, then refresh a thread view page or click into a thread. You will see that the sidebar is displayed and your new ad you just created is visible.
If you wish to use another ad service such as Google AdSense then please visit: Google AdSense
This concludes our sidebar advertisement block article.
Copyright (c) 2010-2011 http://xenfans.com, author: Steven Moore @ Mythotical's Blog
In this article we're demonstrating one of the few ways to customize and extend the XenForo sidebar. Our example is: adding a spot for an advertisement. This can be viewed as a guide as to find what where, and how to customize it so you can get started making your sidebar unique for your board. We want to thank Steven Moore for writing this guide on behalf of XenFans.com
Adding an ad to the existing sidebar
So you want to add a block to your sidebar for ads! I'm here to tell you how through screenshots and explanation. This article is an in depth explanation that provides code, images, etc for use by those reading this article. Let's jump right into the beginning stages.
First thing we need to do is decide whether we want a block ad, skyscraper, banner, or text only. Let me explain each type:
- Block ad can be the size of 125x125, 234x60, 250x125, 250x250, and 300x250
- Skyscraper ad can be the size of 120x240, 120x600, 160x600, and 300x600
- Banner ad can be the size of 468x60 and 728x90
- Text only means you can have text links to other sites which you can multiple ones in a sidebar block.
Second thing we need to do now is create a new template so go to your ‘Admin Control Panel’ (admin.php), from the top navigation find ‘Appearance’, on the new page click ‘Templates.’ This loads a page with a list of templates. In the top right corner you will see ‘Create New Template,’ once this page loads you will assign your new template a ‘Template Name’ that fits its purpose. For now let’s name our new template ‘125_ad’ as the ad will be 125x125. In the box below the template name, use the code I have provided below.
Template Code:
HTML:
<div align="center">
<a href="index.php?advertise"><img src="images/125x125ad.png" border="0" width="125"></a>
</div>The above code is important to include <div> tags so if you want to edit it to match that of other blocks then use the following code:
HTML:
<div class="section" align="center">
<div class="secondaryContent">
<a href="index.php?advertise"><img src="images/125x125ad.png" border="0" width="125"></a>
</div>
</div>You should have a template completed looking as follows:
To explain the code I just provided, the <div> tags allow the block to be separate from the other blocks as well as defining specific display rules such as class=”section”, this tells the block to have the background of the color of the other blocks, size of the block, padding, margin, etc.
Same thing for class=”secondaryContent”, it is not unusual to see more than 2 <div> tags used throughout a template so as to fit all necessary display rules into a specific block. Anyway, of course the <a href> tag and <img> tag define the link and location of the image for displaying.
Before you leave this page, remember to click ‘Save All Changes’ or ‘Save and Exit’.
Now that we have our new template with proper code in place in that template, it’s now time to move on to the third thing which is adding the include of your new template to that of the ‘ad_sidebar_bottom’ template.
First return to the templates list by visiting the fifth paragraph. Once on the template list, in the search box to the top right side, enter ‘sidebar’ or ‘ad_sidebar_bottom’. Once the list refreshes, click on ‘ad_sidebar_bottom’, once that page loads, below ‘<xen:hook name="ad_sidebar_bottom" />’ add the following line of code.
HTML:
<xen:include template="125_ad" />If you used another name for your template, replace ‘125_ad’ with the name you chose. Click ‘Save and Exit’ to save all changes to the template then head to your forum index and refresh, on the right side you will see a new block below the other sidebar blocks with the ‘Advertise Here’ ad in place.
End result will look something like this:
Add sidebar to various pages
To add the sidebar to more than your forum list page, you can do the following to add the page to your thread list and thread view pages.
First open the template thread_list and thread_view then add this code to the very bottom:
HTML:
<xen:sidebar>
</xen:sidebar>Save and exit, refresh a thread list page or click into a forum, then refresh a thread view page or click into a thread. You will see that the sidebar is displayed and your new ad you just created is visible.
If you wish to use another ad service such as Google AdSense then please visit: Google AdSense
This concludes our sidebar advertisement block article.