Support » Plugin: Jetpack by » [Plugin: Jetpack by] Facebook and Twitter widget titles the same color as widget heade

  • Hi,

    I currently have the Twitter and Facebook widgets that come with jetpack installed and they both have the title text the same the widget title background color for my theme. As you can see on my site there’s what looks like a solid blue box above each of the last two widgets on my page, but if you highlight the text on the page you’ll see there’s a link, it’s just the same color as the box. Does anybody know how this could be fixed? maybe there’s a way to override the color of links in the widget? I don’t think this is an issue with the JetPack extension as a whole, i think i’ve just got a weirdly coded theme installed…

    Any help would be much appreciated,


Viewing 4 replies - 1 through 4 (of 4 total)
  • tjohare


    The Jetpack widgets do not come with a separate CSS file, they instead use the site defaults.

    You’ll have to add specific CSS Code to the widget to change the display. (see

    So for the twitter widget, it looks like you’ll have to add CSS code here:

    echo "{$before_widget}{$before_title}<a href='" . esc_url( "{$account}" ) . "'>" . esc_html($title) . "</a>{$after_title}";

    And for the facebook widget:

    <label for="<?php echo $this->get_field_id( 'title' ); ?>">
    				<?php _e( 'Title', 'jetpack' ); ?>
    				<input type="text" name="<?php echo $this->get_field_name( 'title' ); ?>" id="<?php echo $this->get_field_id( 'title' ); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>" class="widefat" />

    (don’t quote me on this one, as I can’t test it at work right now)

    And if by chance any developers for jetpack are reading this, FULLY COMMENTING section functionality would have been nice. Especially for GPL code. But then again, I probably comment my code too much.



    I currently don’t know anything about writing in CSS…


    [ Please do not bump, it’s not permitted here. ]


    I’m also trying to customise the css of the Facebook widget. I do know about css, but I don’t know about PHP! 🙁

    Where in the above PHP exactly do I put my css?

    I’m only trying to change the border colour to match the post excerpts, and to add a drop shadow….

    I tried to target the weird selector that is generated:

    .-cx-PRIVATE-pluginBoxContainer__border {
    border-color: #e4e4e4;
    box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);

    But since reading this post, I guess that wouldn’t work anyway…

    My site is

    Thx for any enlightenment!

    Ah, ok… Reading another post by Monsieur Jeremy Herve, just use Facebook’s plugin:

    That injects the .fb-like-box class if you use the HTML5 method.

    Merci à vous, Jeremy.


Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: Jetpack by] Facebook and Twitter widget titles the same color as widget heade’ is closed to new replies.