Jump to content

CSS to make ShareThis feature appear on all but one page


ericpollard
 Share

Recommended Posts

Hello....I have added a bit in the CSS to make the ShareThis button appear on every page in a certain area. It works perfectly fine, but it shows up on the checkout page of the site. The code that calls for the ShareThis button to appear is found in the footer which is found on every single page. Is there a note that I can include in the CSS or in the footer that would keep the ShareThis button from appearing on certain pages?

Link to comment
Share on other sites

Hello....I have added a bit in the CSS to make the ShareThis button appear on every page in a certain area. It works perfectly fine, but it shows up on the checkout page of the site. The code that calls for the ShareThis button to appear is found in the footer which is found on every single page. Is there a note that I can include in the CSS or in the footer that would keep the ShareThis button from appearing on certain pages?
Without a code example, it is hard to see how you might solve your problem. However, with CSS you should be able to place a unique "ID" on the checkout page that pairs with a "CLASS" on the "share this" button so that it is not rendered on the page. The class on the share is the same on all pages and its default function is to render the element the way you desire. When encountered on a page with the specific ID (e.g. checkout) a different set of rules apply.See a text-based example of what I mean onhttp://besidethetrail.ca/demo/disappear.htmlGuy
Link to comment
Share on other sites

...with CSS you should be able to place a unique "ID" on the checkout page that pairs with a "CLASS" on the "share this" button so that it is not rendered on the page. The class on the share is the same on all pages and its default function is to render the element the way you desire. When encountered on a page with the specific ID (e.g. checkout) a different set of rules apply.
That's not really accurate. :) An id on an element has absolutely no effect on the styles applied by a class, unless you also provide style declarations for that id.These two elements will display exactly the same with the sample CSS:<div class='red'>This is a red div</div><div id='no_bg' class='red'>This is a red div w/o a background</div>CSS:.red {color: red;border: 2px solid red;background-color: #FFCCCC;}Only after you add:#no_bg {background-color: transparent;}to the CSS will the second div display without the red background.That being said, you can still use an id on the checkout page and provide CSS that will hide it:#shareBtn_checkoutPg {display: none;}You could also use visibility: hidden; if it works better. Edited by ShadowMage
Link to comment
Share on other sites

That's not really accurate. :) An id on an element has absolutely no effect on the styles applied by a class, unless you also provide style declarations for that id.
absolutely. I did not go into all the details because the demo page does that so here goes
.selective    {some other attributes}#faq .selective {display:none;}

so when you encounter the selective class one set of attributes is applied. However, when you encounter selective within the id of faq you add to it {display:none;} or as you say {visibility:hidden;}, whichever works best.Guy

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...