JenSocial: Social Web Directory and Ning Tips

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

NING TIPS: Add ADs only in main page, profile pages or any other pages

Sometimes you may want ADs or special contents display in the main page, profile pages or any other pages only. It's easy to display contents only in main page. Because you could add a text box that only show in main page. But how to control contents only display in profile pages but not in main page and any other pages? And how to control contents display in every pages except the main page and profile pages? Actually it's very easy. You just need a little CSS.

Here are the steps:

1. Add a text box for all pages.

2. Edit the text box in HTML mode, put all content/ad inside a div tag with a special unique id:

<div id="ad_sidebar01">
.... Your content or ad code here ....
</div>

3. Go to the Advance CSS, add this CSS code if you don't want it display in the main page but any other pages:

.xg_widget_main #ad_sidebar01 {display:none;}

Or this CSS code if you don't want it display in all profile pages:

.xg_widget_profiles_profile #ad_sidebar01 {display:none;}

If you add both, the content will display in every pages except the main page and profile pages.

4. If you want it display in profile pages only, use this code:

#ad_sidebar01 {display:none;}
.xg_widget_profiles_profile #ad_sidebar01 {display:block;}

Remember to replace #ad_sidebar01 with yours.

This tips is tested with both Design Studio and old themes.

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on June 29, 2011 at 11:24pm

Good Lord. This is brilliant. I use scripts to do this sort of thing, and here I'm supposed to be the CSS person. Alex, I am blown away with the simplistic yet genius thought process behind this. Now, I want to adopt you and Elson.

SUPERB thinking!

Jen

Permalink Reply by Tips by Alex/JenSocial on June 30, 2011 at 6:07am

LOL, you should be a CSS person. The performance of CSS is much better than Javascript in most of time. Especially for controlling which content to display.

Permalink Reply by Tips by Alex/JenSocial on June 30, 2011 at 6:04am

I found these classes like .xg_widget_main, .xg_widget_profiles_profile... for certain pages. And I didn't see these before. I don't know it's I missed or NING just add recently.

Permalink Reply by Fantagiro43 on July 10, 2011 at 4:18pm

This TIP is great. Thank you for share.

Permalink Reply by Dr. Husky on July 29, 2012 at 6:51pm

This tip is awesome!!!! but.... it is for Sidebar only

What about for the top box (or above ad-box)?

I've tried everything without success. or where to find the solution?

Thank you so much jen and Alex, you are the best!

Permalink Reply by Dr. Husky on July 30, 2012 at 12:14pm

For example, in the ad box: xg_ad_above_header

Permalink Reply by JenSocial on July 30, 2012 at 7:11pm

Hi Emmanuel,
The #xg_ad_above_header will not work with CSS due to hierarchy of CSS ID/Class identifiers. It falls above the .xg_widget_main. This one would need script, and is available in the VIP Club.

The #xg_ad_below_header will work with CSS, because it falls below .xg_widget_main.
.xg_widget_main .xj_ad_below_header {display:none!important;}

Best,
Jen

Permalink Reply by Dr. Husky on August 2, 2012 at 3:54am

Thank you very much Jen and Alex, you have saved my life :)
and now I am part of the VIP members! :)

Permalink Reply by JenSocial on August 2, 2012 at 10:41pm

Nice to have you, Dr. Husky!

Permalink Reply by Tips by Alex/JenSocial on August 16, 2012 at 12:34pm

Welcome to VIP CLUB!!

RSS

Welcome to
JenSocial: Social Web Directory and Ning Tips

Sign In