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 .... 


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.

Views: 605

Replies to This Discussion

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!


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.
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.
This TIP is great. Thank you for share.

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!

For example, in the ad box:  xg_ad_above_header

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;}


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

Nice to have you, Dr. Husky!


Welcome to VIP CLUB!!



© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips