Insert a full-width ad above or below a BuddyBuilder header

Want to insert an ad, a slideshow, a row of YouTube videos, or anything else above your BuddyBuilder header, or below it? It’s actually very easy to do with the theme’s built-in features. This tutorial will show you how to add a 728x90px banner ad below your navbar and, once you know how to do that, you can adapt it to any format you need.

The “secret” is the header widget. The dimensions of that widget area are fully adjustable, and the whole thing is movable both vertically and horizontally.

The first thing to do is to create the vertical space required for your ad. Go to “Pages CSS” and set the “Page Vertical Offset” to 100px more than the preset menu height you selected under “Menu CSS”. For example, if your menu is 34px-high, the vertical offset should be 134. This will lower the page container 100px below your menu so that your 90px-high ad can have a few pixels of breathing room above and below.

Important: a CSS oversight on my part might cause a large setting at “Page Vertical Offset” to not display properly. If this happens to you, simply enter the following in your “Custom CSS” section and adjust to fit. (This is fixed in BuddyBuilder1.2)

1

div#container, body.activity-permalink div#container, #footer {top:134px;}

Next, we want to make sure the widget area is the right size to hold your ad, and place it in the space we just created above. Go to “Widgets CSS” and set the “Header Widget Width” to the same value you set for the “Maximum Theme Width” under the “Theme Main” tab. Then, set the “Header Widget Vertical Adjustment” to 189.

Finally, go to your WordPress “Widgets” section and place a text widget in the “Header-Full” area. Now drop your ad code into the widget and hit “Save”. Check any page of your site and you’ll see your banner ad now displays prominently beneath your menu.

To place the banner above your header, set “Theme Vertical Offset” under the “Theme Main” tab to 100 (delete the setting at “Page Vertical Offset”). Then give the “Header Widget Vertical Adjustment” a negative value of -95 to pull it up above the header.

Cool huh? Play around with settings until you get the look you want and… have fun!