Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help customize jetpack sharing buttons
- This topic has 11 replies, 2 voices, and was last updated 10 years, 10 months ago by rfmeier.
-
AuthorPosts
-
June 21, 2013 at 4:43 pm #47124CallevaMember
Hi, I've been following the guide on how to customize jetpack sharing buttons.
The first bit went fine - I got the buttons added to the top of posts.
But, the second bit didn't go so well - "customizing the sharing buttons to make them match your site". I copied in the CSS, but it didn't make a difference.
I did find a similar post to my issue, but wondered if this is the correct fix?
Also, where to put the CSS? In style.css, or I found that jetpack had a sharing.css.
My site - Help much appreciated.
Thanks,
http://www.callevanetworks.com/dns-cert-alert-cve-2013-3919/
-Kier.June 22, 2013 at 7:09 pm #47241rfmeierMemberHello,
You will want to css in your style.css file. You do not want to edit Jetpack's sharing.css file.
June 24, 2013 at 10:08 am #47469CallevaMemberHi,
That's what I thought - use style.css, otherwise if I upgrade the jetpack plugin my changes may get overwritten.
But, when I stuck it in style.css it made no difference - I realize the guide said it was a starting point for customizing, but I expected it to make a change and then I would just need to tweak colors, etc.
I'll stick the code back in and re-check.
Thanks.
June 24, 2013 at 10:26 am #47472rfmeierMemberJune 24, 2013 at 11:22 am #47485CallevaMemberThanks Ryan - appreciate your time.
I've updated style.css and pasted in the exact code from the tutorial. I still can't see any effect.
When I inspect an element with firebug, I see:
div.sharedaddy div.sd-block {
border-top: 1px solid #ddd;
border-top: 1px solid rgba(0,0,0,.13);
padding: 10px 0 5px;
margin: 0;
width: 100% !important;
But the css I copied in has:
.content div.sharedaddy div.sd-block {
border: none;
padding: 0;
}So it still doesn't look like it's overriding the jetpack default styling.
Thanks,
-Kier,June 24, 2013 at 11:37 am #47490rfmeierMemberKier,
I am not seeing your changes. I am guessing the cache is not updated yet? Are you using a cache plugin? Cloudflare?
Here is a link to your current style.css
http://www.callevanetworks.com/wp-content/themes/executive/style.css?ver=1.9.2
and here is a non-cached version
http://www.callevanetworks.com/wp-content/themes/executive/style.css?ver=cachebust
The later has your style.css changes.
Once you clear that issue up, we can take it from there.
June 24, 2013 at 11:44 am #47493June 24, 2013 at 11:47 am #47494rfmeierMemberThe non cloudflare version still points at the cached style.css file.
http://www.callevanetworks.com/wp-content/themes/executive/style.css?ver=1.9.2
instead of;
http://synth.callevanetworks.com/wp-content/themes/executive/style.css?ver=1.9.2
June 24, 2013 at 11:50 am #47495CallevaMemberOdd - it worked okay for me. Apologies for messing you about like this!
Anyway, just cleared cache/cloudflare, refreshed my browser and the www site is now showing the updated css.
Thanks.
June 24, 2013 at 12:09 pm #47499rfmeierMemberNo problem. Got it now.
Change .content to #content. The example was using Genesis 2.0, your site is currently running 1.9.2
https://www.diigo.com/item/image/40chg/qv5e
June 24, 2013 at 12:52 pm #47506CallevaMemberThanks Ryan - did the #content changes (and also the one #sd-content) - cleared caches and it's working 🙂
Anyone told you you're amazing today yet 😉
June 24, 2013 at 12:53 pm #47507rfmeierMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.