JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

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

WARNING: I just had this happen to me. Make sure you test the negative pixels and moving up the Ad Box. If you move it up too much, you will not be able to click on your Edit button, without using something like Firebug.

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.

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.

0 members favorited this

Replies to This Discussion

Permalink Reply by Mind's Eye on February 26, 2011 at 12:50pm

that is cool to know Jen, but as usual, I am surprised they didn't make the add box viewing selectable giving the members of each site the ability to turn it off on their home page. Wondering they can use the display none for xg_ad properities. I know last year I wrote jquery to handle it but most site owners might not know how to do that.

Thanks again Jen

Ralphy

Permalink Reply by JenSocial on February 26, 2011 at 12:54pm

Ralphy,

I may not be understanding, forgive me. You can select whether or not you want to add the new Instant Ad Boxes, from Features Layout. In fact, I'm in the process of writing a simple tip about this for newbies, or NCs who just missed that the feature is now available. Is that what you meant? Or, did I miss the boat?

I hope you're doing well these days!

Best to you,

Jen

Permalink Reply by Mind's Eye on February 26, 2011 at 1:06pm

Oh no Jen, I was just foaming.

The ad box will appear on all pages or at least I thought it does I might be wrong. Members normally don't feel at home if their home page has adds *depending on the type of site. If a member wishes to turn off the add on their home page, is it simple or does the site owner have to any option for their members. Like using no display with xg_ad. Or like i did last year with Jquery.

no you never miss the boat...smile

Ralphy

Permalink Reply by JenSocial on February 26, 2011 at 1:17pm

Hi Ralphy,

I don't think I can agree with "Members normally don't feel at home...", regardless of the type of site, but just my opinion. ;-)

I see what you're saying though. You feel Ning should have added the option of adding the Instant Ad Box to home page, or not. Is that correct? If yes, it would be easy to remove with CSS.

Have a great one!

Jen

Permalink Reply by Mind's Eye on February 26, 2011 at 1:27pm

Yes that is what I was saying. We use to run into problems when artist set up their homepage with headers and the ad space. I use to have to turn it off via jquery. But I see it is xg_ad so that means it should be controllable if desired.

Actually Jen, so many things have changed that I'm not even sure I'm referring to the same jargon

You have a great one too

Ralphy

Permalink Reply by JenSocial on February 26, 2011 at 1:37pm

Ralphy,

Disappointing news, I don't think it CAN be done with CSS. And maybe that's what you were trying to tell me, LOL. I just looked. Since the class we use to identify home page via CSS is below these top ad boxes, it can't be used. I think it will take jQuery, like you said in the first place.

I'll look again later, to convince myself. ;-)

Best Regards,

Jen

Permalink Reply by Mind's Eye on February 26, 2011 at 3:17pm

ok if not this is a rather simplistic version of my ralational test last year, just needs the code for the xg ad (jquery)

var trappingprofile=RegExp("profile");//check if profile

var trappingblog=RegExp("blog");//if profile not blog

if ((trappingprofile.test(window.location.href)== true) && (trappingblog.test(window.location.href )== false))

{

//turn off xg ad your jquery code

}

I only use the two "profile" and not blog cause profile appears when you are in the personal blog so you would still want the ad on. I know you can do wonders with this or change it to suit, I just haven't had time to do any coding since I started Chompy and the Magazine...

have a great evening...

Ralphy

Permalink Reply by JenSocial on February 26, 2011 at 8:29pm

Thanks Ralphy. :-)

Have a great rest of weekend,

Jen

Permalink Reply by Mind's Eye on March 22, 2011 at 7:18pm

Hi Jen,

Sorry it took so long to get back to this thread. You were right, if a member wishes to turn off the ad they can do so by placing this statement in the profile css.

.xg_ad {

display:none;

}

have a great one

Ralphy

Permalink Reply by Lex Smith on March 22, 2011 at 9:53pm