Need help? Check out our Support site, then


"Share This" links css

  1. Can someone help me style my "share this" links so they mimic that of the other links (i.e. blue colored bg and white text upon a:hover)

    Thanks

    The blog I need help with is bradaccarino.wordpress.com.

  2. This should do it for you. I added just a touch of left and right padding so the white of the text did was not right at the edge. The second bit was to reduce the line height so there wasn't so much blue above and below the text.

    .sharing li.share-regular a:hover, .sharing-hidden li a:hover {
    background-color: #1983D1 !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
    }
    
    .sharing li a, .sharing-hidden li a, .sharing_label {
    line-height: 20px !important;
    }
  3. Actually you have mixed link and hover property in one this you css

    .sharing li.share-regular a, .sharing-hidden li a, .sharing li.share-regular a:hover, .sharing-hidden li a:hover {</p> <p>border:none !important;<br /> }<br />
    Ok so now add a new element
    <br /> .sharing li.share-email a:hover {<br /> background: ##1983D1 !important;<br /> }<br />

  4. Got it, thanks so much for your help!

  5. I added the padding to all my links too, as so:
    <br /> a:focus,a:active,a:hover {<br /> padding-right:2px!important;<br /> padding-left:2px!important;<br /> }

    and also added this so the text wouldn't move when I highlighted

    <br /> a {<br /> padding-right:2px!important;<br /> padding-left:2px!important;<br /> }<br />

    but now the padding for my menubar is messed up. Any suggestions?

  6. Correction:

    Not "highlighted" but "hover"

  7. Would it be possible to get some help with my menu? The spacing is messed up and I can't seem to fix it.

  8. By doing the left/right padding, and especially by using the !important attribute in "a" you have forced that padding onto all links on your site, regardless of where it is. Add the following to the bottom of your CSS so that it overrides anything above it.

    #access a {
    padding: 0 1.2125em !important;
    }
  9. Got it, Thanks. And the description was very helpful.

  10. You are welcome.

  11. I've noticed that the padding I've added has made blue bars show up next to images when I hover over them. Also over the comment bubble ("smiley") on the home page. I've tried
    .entry-content img.wp-smiley {<br /> padding-left: 0px !important<br /> padding-right 0px !important<br /> }
    Thinking it would override the original padding but that didn't do the trick. However, I know if I take away the padding adding to links then those bars will go away but I think the padding is pretty crucial. Any suggestions?

  12. This takes care of the comment bubble and was a little tricky to find.

    .entry-header .comments-link a {
    width: 39px;
    }

    I don't see any images to look at.

  13. I need coffee.

    I clicked on a post and now see the image issue. This one is going to be tricky also.

  14. It has to do with your using a background declaration for the "a" (links) and it is being picked up on the linked images as well. I think this will do it, but it is a little messy. One of them won't do it it seems, you need both of the declarations.

    .wp-caption a:hover, .wp-caption a:focus, .wp-caption a:active {
    background-color: transparent;
    background: none;
    }
  15. And actually, give just this a try first. Firebug is being flakey after the latest update.

    .wp-caption a:hover, .wp-caption a:focus, .wp-caption a:active {
    background-color: transparent;
    }
  16. @thesacredpath-

    thanks for putting so much time into this. I know it's been a while since you responded but I got caught up in some other things. I didn't want you to think your help has been in vain bc i've made the changes you suggested and it has worked out perfectly. as always, thanks so much.

  17. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic