Advanced Search

SocialGO CSS to modify visibility of HTML blocks

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. 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.
  2.  
  3. <div class="group-code">SOME HTML AD CODE HERE </div>
  4.  
  5. Now, create some css that you will put in your Ads & Custom HTML area, inside of
  6. tags.
  7.  
  8. 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:
  9.  
  10. <style>
  11. .group-code {display:none;}
  12. body#groups .group-code {display:block;}
  13. </style>
  14.  
  15. 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.
  16.  
  17. 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
  18. 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:
  19.  
  20. <style>
  21. .group-code {display:none;}
  22. body#groups.not-logged-in .group-code {display:block;}
  23. </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.