"Share This" links css

  • Author
    Posts
  • #675053

    bradaccarino
    Member

    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.

    #675235

    bradaccarino
    Member
    #675259

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

    fahadkz
    Member

    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 {

    border:none !important;
    }

    Ok so now add a new element

    .sharing li.share-email a:hover {
    background: ##1983D1 !important;
    }

    #675400

    bradaccarino
    Member

    Got it, thanks so much for your help!

    #675403

    bradaccarino
    Member

    I added the padding to all my links too, as so:

    a:focus,a:active,a:hover {
    padding-right:2px!important;
    padding-left:2px!important;
    }

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


    a {
    padding-right:2px!important;
    padding-left:2px!important;
    }

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

    #675404

    bradaccarino
    Member

    Correction:

    Not “highlighted” but “hover”

    #675416

    bradaccarino
    Member

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

    #675417

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

    bradaccarino
    Member

    Got it, Thanks. And the description was very helpful.

    #675419

    You are welcome.

    #675424

    bradaccarino
    Member

    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 {
    padding-left: 0px !important
    padding-right 0px !important
    }

    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?

    #675427

    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.

    #675428

    I need coffee.

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

    #675429

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

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

    bradaccarino
    Member

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

    #675454

    You are welcome.

The topic ‘"Share This" links css’ is closed to new replies.