Custom CSS Jetpack Sharing

Community Forums Forums Design Tips and Tricks Custom CSS Jetpack Sharing

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  momontherise 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #46207

    Callum
    Participant
    Post count: 24

    Hi,

    I’ve followed the tutorial on the Studiopress site and even the exact css from BG.com, however when I attempt to customise the Jetpack sharing buttons only the ‘share count’ is changed by changing the css. The buttons remain the default style.

    Any thoughts?  This is the code I’ve used:

    Only after  .sd-content .sd-button span.share-count actually changes.

    /*
    Jetpack Sharing
    ---------------------------------------------------------------------------------------------------- */
    
    .content div.sharedaddy div.sd-block {
    	border: none;
    	padding: 0;
    }
    
    .content div.sharedaddy .sd-content {
    	float: left;
    	margin-bottom: 32px;
    	margin-bottom: 3.2rem;
    }
    
    .content div.sharedaddy a.sd-button {
    	border: none !important;
    	box-shadow: none;
    }
    
    .content .sd-social-icon-text a.sd-button > span, a.sd-button > span {
    	opacity: 1;
    	padding: 6px 12px;
    }
    
    .content li.share-facebook a.sd-button > span,
    .content li.share-google-plus-1 a.sd-button > span,
    .content li.share-linkedin a.sd-button > span,
    .content li.share-twitter a.sd-button > span {
    	background: #111;
    	border: none;
    	color: #fff;
    	font-family: 'proxima-nova', sans-serif;
    	font-size: 12px;
    	font-size: 1.2rem;
    	font-weight: 400;
    	letter-spacing: 1px;
    	letter-spacing: 0.1rem;
    	text-transform: uppercase;
    }
    
    .content li.share-facebook a.sd-button:hover > span,
    .content li.share-google-plus-1 a.sd-button:hover > span,
    .content li.share-linkedin a.sd-button:hover > span,
    .content li.share-twitter a.sd-button:hover > span {
    	background: #1dbec0;
    }
    
    .sd-content .sd-button span.share-count {
    	color: #cdf593 !important;
    	font-size: 100% !important;
    }
    #46215

    Callum
    Participant
    Post count: 24

    I seemed to have fixed my initial issue by changing all .content to .sd-content, however if someone could tell me how to reposition the buttons I would be grateful.  Currently if you look at the site http://www.callummahoney.com/ you will see a space between the text “share this” and the buttons.  I would like to close that to a smaller gap.

    I would also like to centre the text on the buttons, there seems to be a spacing on the left hand side.

     

    Thanks again.

    #46490

    momontherise
    Participant
    Post count: 3

    Add this to your CSS

    div.sharedaddy .sd-content {
     width: 100% !important;
     float: left !important;
     margin: -2px 0 0 0;
     }

     

    `

    • This reply was modified 1 year, 5 months ago by  momontherise.
    • This reply was modified 1 year, 5 months ago by  momontherise.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.