Return to Snippet

Revision: 48470
at July 2, 2011 01:34 by labsecrets


Initial Code
Create a class for the html you wish to have displayed on a certain page, and you can then use that as the "key" to showing the block of code on certain pages and not others.

<div class="group-code">SOME HTML AD CODE HERE </div>

Now, create some css that you will put in your Ads & Custom HTML area, inside of
tags.

If I want this block to ONLY show up on the groups page, then I need to merely turn off display of that class (group-code) on all pages by default, and then make it visible on the page that has body id of "groups". Here is the CSS:

<style>
.group-code {display:none;}
body#groups .group-code {display:block;}
</style>

The first line tells the browser to HIDE the html from all pages by default. The second line then tells the browser to display the html on the page that has an id of "groups", which is the id of the socialgo groups page.

You can even take it one step further by limiting whether it shows up for people who are logged-in. Simply add the class of .not-logged-in
So if you ONLY wanted add to show up for someone who was on the groups page, and NOT logged-in, the css would look like this:

<style>
.group-code {display:none;}
body#groups.not-logged-in .group-code {display:block;}
</style>

Initial URL


Initial Description


Initial Title
SocialGO CSS to modify visibility of HTML blocks

Initial Tags


Initial Language
CSS