Tagged: custom css Toggle Comment Threads | Keyboard Shortcuts

  • Christopher Finke 9:13 pm on April 18, 2013 Permalink | Reply
    Tags: custom css, jetpack   

    How to add custom CSS to the Jetpack Likes iframe 

    Jetpack uses an iframe to display Likes on your blog, mainly for performance reasons. The downside to that is that there isn’t an obvious way to style the content inside the iframe… until now.

    Jetpack creates a couple dummy HTML elements outside of the iframe that it can use to detect your theme’s CSS, which it will apply inside the iframe content. If you’d like to modify the automatic decisions that Jetpack makes, you can effectively apply this CSS inside the iframe:

    body {
    	color: [...];
    	font-family: [...];
    	font-size [...];
    	direction [...];
    	font-weight [...];
    	font-style [...];
    	text-decoration [...];
    }
    
    .wpl-count a {
    	color: [...];
    	font-family: [...];
    	font-size [...];
    	font-weight [...];
    	font-style [...];
    	text-decoration [...];
    }

    by adding this CSS to your theme’s stylesheet or custom CSS:

    .jetpack-likes-widget-wrapper .sd-text-color {
    	color: [...];
    	font-family: [...];
    	font-size [...];
    	direction [...];
    	font-weight [...];
    	font-style [...];
    	text-decoration [...];
    }
    
    .jetpack-likes-widget-wrapper .sd-link-color {
    	color: [...];
    	font-family: [...];
    	font-size [...];
    	font-weight [...];
    	font-style [...];
    	text-decoration [...];
    }

    You are limited to those two selectors and those seven properties.

    For example, if you’re running Twenty Thirteen, I recommend this CSS to shrink the link font size down to match the rest of the text in the iframe:

    .jetpack-likes-widget-wrapper .sd-link-color {
    	font-size: 12px;
    }

    Before:

    Before Jetpack-targeted CSS

    After:

    After Jetpack-targeted CSS

    Advertisements
     
    • Owen 11:24 am on September 24, 2013 Permalink | Reply

      Is it possible to change the like button icon?

      Like

    • Mr. Gentleduck 3:03 pm on October 15, 2013 Permalink | Reply

      Thank you! I’m embarrassed to say how long I worked on this, trying to target/change .wpl-count a.
      Trial and error…searching…consulting and re-consulting Safari’s web inspector… I bet I clicked “Save Stylesheet” a hundred or more times.

      When I was ready to give up and move on, I decided to try one more search and found your post here. Now, I feel victorious thanks to you.

      It seems like a small thing, but you know how it can be when you’re after something. Whether the actual result is critical or not, it’s hard to give up.

      Again—Thank you!

      Like

  • Christopher Finke 10:25 am on February 25, 2013 Permalink | Reply
    Tags: , custom css, twenty thirteen   

    I’ve enabled Twenty Thirteen on my personal blog and done a little bit of customization. Here’s a CSS snippet for adding some contrast to the header text in Twenty Thirteen — helpful if you use one of the colorful default backgrounds:

    .site-title a {
    	color: #EDEDE8!important;
    	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    
    .site-description {
    	display: inline-block;
    	padding: 5px;
    	background-color: rgba(255,255,255,0.5);
    }
    
    .navbar-fixed .site-title a {
    	text-shadow: none;
    }

    It turns this:

    Screen Shot 2013-02-25 at 10.22.38 AM

    into this:

    Screen Shot 2013-02-25 at 10.22.19 AM

     
    • Joen A. 11:21 am on February 25, 2013 Permalink | Reply

      Nice.

      You can also get this effect:

      with this snippet:

      .site-title a, .site-description {
      	display: inline-block;
      	background: rgba(255,255,255,.5);
      	padding: 10px;
      }
      .site-title a {
      	margin-top: -60px;
      }
      

      Like

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel