WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
Facebook and Twitter widget titles the same color as widget heade (5 posts)

  1. bluestrat55555
    Member
    Posted 1 year ago #

    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 http://www.iosmusician.com/ 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,

    sean

    http://wordpress.org/extend/plugins/jetpack/

  2. tjohare
    Member
    Posted 1 year ago #

    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 http://wordpress.org/support/topic/plugin-jetpack-subscription-widget-cant-find-css-class-or-ids-to-edit?replies=4)

    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( "http://twitter.com/{$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" />
    			</label>

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

  3. bluestrat55555
    Member
    Posted 1 year ago #

    I currently don't know anything about writing in CSS...

    //sean

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

  4. lmw
    Member
    Posted 12 months ago #

    Hello

    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 http://cultureinexternalrelations.eu/

    Thx for any enlightenment!

  5. lmw
    Member
    Posted 12 months ago #

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

    https://developers.facebook.com/docs/reference/plugins/like-box/

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

    Merci à vous, Jeremy.

    :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic