Fix Top "Instant Ad Box" Spacing - Top Header Ad Box

[Jen]

I've noticed that a lot of Ning Network Creators are experiencing issues with the spacing/padding for Ning's new Instant Ad Box - - the one you can add to the top of a Ning Network. There have been several discussions created here on Creators with these questions, and a few answers, like what JP offered here:

http://creators.ning.com/forum/topics/css-code-for-changing-height

 

I thought I would make it easy and add a tip discussion. If one exists already, my apologies.

 

Of course it depends on other CSS customization, height of the Ad you insert into the Instant Ad Box, and if you select "Above Header" or "Below Header". I only tested a fix for below the header. If you have an issue with inserting the Instant Ad Box above the header, let me know. Be sure to add your Ning Network link to this discussion.

 

I can't say what individual results will be. But, let's give this a try, and hopefully with some feedback I can make it even better.

 

Padding for "Instant Ad Box" Below Header:

• If your Ad height is 90 pixels, try height:95px; - - as in example below.
• If your Ad height is 60 pixels, try height:65px;
• Adjust the top margin as needed. I'm using minus or negative, to move the Ad Box up.

Be sure you check your menu tabs. When moving up in a negative direction, you want to make sure the parameters of the Ad Box do not cover up access to your menu tab links.

 

.xg_ad .xg_module_body {margin-top:-30px!important;height:95px;}

 

Padding for "Instant Ad Box" Above Header - not tested:

I think the following code would work if you need to tighten up the spacing when adding the "Instant Ad Box" above your header. I haven't tested this yet.

.xg_ad .xg_module_body {margin-bottom:-30px!important;height:95px;}

For the record, the actual CSS identifiers are:

• #xg_ad_above_header
• #xg_ad_below_header

You could try first by adjusting the height of the one you're using. However, I found that the adjustments I used above returned the best results overall.

 

 

[Hertz Nazaire]

I'll have to try this the new design studio is a little harder for me to find these codes

[Kris]

Thanks Jen,

Not sure if this100% correct but I used the following:

#xg_ad_above_header {margin-bottom:-30px!important;height:110px;}

#xg_ad_below_header {margin-bottom:-30px!important;height:130px;}

Before:	After:

[Jen]

It looks great Kris. Are you happy with the results, or are you asking a question. ;-)

[Scott McKee]

I just want to nudge my ad box below my header up to tighten things, but this code isn't working for me.

[Scott McKee]

Figured it out.

[Jen]

Hi Scott!

Always great to hear! Thanks for the update.

Best Regards,

Jen

[world recipes]

Hi,

I am new here and i ve just created Ning Network web, I want to add advert on the top and middle of my network but i don't know how to do it please i need your help,Thank you

[Jen]

World Recipes,

There are ways to insert the code via script. After we all started using the script method, Ning added what are called Instant Ad Boxes. Using these boxes is the best way to add Ads. It's easier, and they will load faster.

Go to Features Layout via My Network/Settings. Locate Instant Ad Boxes at bottom. Click on the box for "Above Header".

Go back to home page, and EDIT your new Text Box.

Click on the HTML button.

Add your Ad code. To center the Ad within the Instant Ad Box, wrap all of your code within a DIV tag like this:

<div align="center">your ad code</div>

Save.

Best Regards,

Jen

[world recipes]

Hi Jen,

Thank you very much , i ve done it and it works but the adverts take a big space on the top of my network ,how can i make it small? and how can place ads in the middle of the website or on the sides of the web?Thank you

Kind Regards,

Sam

[HELP SEEKER]

you have to create text boxes and add ads there then

[John M]

I am having a hard time with this. when i use above header box it leaves a very large cap between the ad and the header of my network.  thank you in advance to any that can assist.  best, jm

[Kos]

I'm sure you've already resolved the issue however I'm leaving this for others that may pull up this conversation.  As usual, Kris and Jen's advice is outstanding and all that it takes is some tweaking on a test network to get things figured out.  Thank you guys once again

I closed the gap on by using this code and increasing/decreasing the # as needed.  I didn't try to make it very tight as other sites do because I wanted an *open* and uncluttered look. [click pic to enlarge]

#xg_ad_above_header {margin-bottom:-140px!important;height:auto;}