Welcome Guest ( Log In | Register )


> IPS Related Information

This section is focused on Invision Power Services products...

IPS, widely praised for the continuous efforts aimed to a stable, fast and efficient board system has brought to us Invision Power Board, but not only that..

Invision Power Gallery & Invision Community Blog allow the forum members :

  1. Host & publish images
  2. Host and link Blogs
  3. Integrate all that to the Invision Power Board

 
Reply to this topicStart new topic
> IPS Tutorials: 王子様とワルツを1(ハーレクインSkinning > Adding Google Ads / Banners to the Header
RSS Bot
post 31 May 2009, 05:12 PM
Post #1


yourforum Robot
Group Icon

Group: Private Members
Posts: 196639
Joined: 12-July 05
From: RSS World
Member No.: 125



Made by Tom Christian of Skinground.com
Introduction

This tutorial will teach you a simple method of adding an advertisement banner or Google Ads to the header in IPB3. The new template code can seem very daunting at first, but after a while it is infact very useful.

The first thing to notice is the new "User_navigation" block on the far right of the header. This is going to cause problems so a simple method to overcome this is by using "Absolute" positioning.

With google ads, or paypal donate buttons the code they supply you is different so you will need to adjust my codes slightly in order to cater for your own code. We want to keep our coding standards compliant so we will be using the html for structure and IPB's CSS for positioning / styling.

Here is an example of the final outcome:

[img]http://www.skinground.com/random/tutorials/googleadstutorial.gif[/img]

Stage 1 - Adding the HTML

Navigate to: Admin CP > Look & Feel > Skin Dropdown Button > Manage Templates & CSS > Global Templates > globalTemplate

Find:
                </div>

                          

                  <if test="memberbox:|:$this->memberData['member_id']">

Add Above:
<a href="#"><img src="https://www.google.com/adsense/static/en_US/images/banner.gif" alt="Donate Now!" class="googleads" /></a>


Stage 2 - Adding the CSS
Click save, then navigate to:

CSS Tab > ipb_styles.css


Find:
/************************************************************************/

  /* ELEMENT STYLES */


Add Below:
.googleads {

          position: absolute;

          right: 325px;

          top:23px;

  }


Stage 3 - Definitions
Save and refresh your page. You will now have a google ad example image correctly positioned in your header. Before I
move onto the next example I will explain how everything works.

The CSS

.googleads {

          position: absolute;

          right: 325px;

          top:23px;

  }

.googleads { - This is the name of the class. It must be exactly the same when specified in the HTML.
position: absolute; - Absolute positioning allows us to position our image/code wherever we like on the page.
right: 325px; - 325px inwards from the far right of the board.
top:23px; - 23px exactly downwards from the top of the board.

The great thing about absolute positioning is that it will scale nicely with most screen resolutions. It's also compatible in all modern day browsers and even most old ones including IE4.

The HTML

<a href="#"><img src="https://www.google.com/adsense/static/en_US/images/banner.gif" alt="Donate Now!" class="googleads" /></a>


<a href="#"> - This is an HTML Link. Replace # with your own link. (Google ads will supply all of this for you)

<img src="https://www.google.com/adsense/static/en_US/images/banner.gif" - This is an HTML image tag. Replace the image
url with your own. Once again, google ads will do all of this for you.

alt="Donate Now!" - This is an alt tag. Put whatever you want here. It is what appears when you hover the mouse over an image.

class="googleads" - This is the most important part. This is the class we're pulling from the CSS.

Stage 4 - Alternatives
An alternative way of positioning your google ads or advertisement banners in the header without editing your code is by creating a new div in the layout. To do this -

Navigate to: Admin CP > Look & Feel > Skin Dropdown Button > Manage Templates & CSS > Global Templates > globalTemplates

Find:
                </div>

                          

                  <if test="memberbox:|:$this->memberData['member_id']">

Add Above:
                          <div class="googleads">

  

                                 Your HTML code inserted here!

  

                         </div>


Stage 5 - The End
You can play around with the CSS in order to position your banner wherever you like in the header. But remember that the user navigation block gets wider when in guest view.

Tip: When adding images that are uploaded into your IPB image folder, the new path code is: {style_images_url}

Example - I want to display test.gif on my IPB index. I'd use this code:


<img src="{style_images_url}/test.gif" alt="test" />



Thanks for reading. If you find any problems with the code or any typo's then please tell me :) View the full article
Go to the top of the page
 
Bookmark this: Post to Del.icio.usPost to DiggPost to FacebookPost to GooglePost to SlashdotPost to StumbleUponPost to TechnoratiPost to YahooMyWeb
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 29th March 2024 - 12:07 AM
Skin and Graphics by Dan Ellis and Anubis. Hosting by Forums & More 2005-2011.
InvisionGames - Your #1 Arcade Games Repository | AllSigs - Signatures for all | Rock Band + Guitar Hero = RockHero ! | The Remoters - Remote Assistance | FileMiners - You ask, We find