Tweet Embed Style

  • Robert Dall

    (@rdall)


    12 years, 10 months ago

    WordPress has the ability to embed tweets just by putting the link the actual tweet in the content area of a post.

    See here: http://robertdall.com/2012/08/27/the-london-2012-games-was-a-real-social-sport/

    But the white on the dark background is a bit jarring. I have tried a number of CSS overrides to get a slightly darker background on the embed tweets to no avail. I am wondering if I can override the embedded style without need of a plugin.

    Theme: Child Theme of Twenty Thirteen
    WP: 3.6 beta 4

    ps. While I am using a beta version of WP… I didn’t think it right for the beta discussion forum.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    Try:

    body .standalone-tweet

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    Hi Andrew

    Thanks for such a quick response.

    I did try that to no avail.

    What I suspect is the issue is that when you emded the tweet it embeds and iframe and long with that iframe comes a whole lot of inline style. See bottom of post.

    I tried the Chris Coyer method:
    http://css-tricks.com/override-inline-styles-with-css/

    and I got a border to apply (since removed) But I couldn’t change the background.

    <iframe width="500" scrolling="no" height="260" frameborder="0" id="twitter-widget-2" class="twitter-tweet twitter-tweet-rendered" allowtransparency="true" style="display: block; border-width: 1px; border-style: solid; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; max-width: 99%; min-width: 220px; padding: 0px; border-radius: 5px 5px 5px 5px; margin: 10px 0px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);" title="Embedded Tweet"></iframe>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    Where did you add it?
    http://robertdall.com/wp-content/themes/r2d2/style.css?ver=3.6-beta4

    Edit: NVM found it

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    and long with that iframe comes a whole lot of inline style

    It’s more sinister than that. It looks like your stylesheets cannot target the iframe nor its child elements whatsoever, disregarding any CSS specificity.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    Can you try switching to the Twenty Twelve theme to see whether the issue persists?

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    So would you say this is an error / omission in Twenty Thirteen?

    Can it be attributed to that?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    I’m waiting for you to answer that.

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    Damn cross posting… I didn’t see you reply… When I posted… I will try one of my dev builds and post a reply…

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    Hey Andrew

    I tried that on my sandbox build on Twenty Twelve http://sandbox.robertdall.com/?p=853
    To no avail 🙁

    CSS is just below reset in the CSS sheet.

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    I have some bad news and some worse news:

    By Default Twitter is not a fan of you messing with the style of there embed… 

    https://dev.twitter.com/discussions/4372

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    As they’ve purposely made this difficult for developers, there may also be a clause in their policy that states you cannot customise it. So be it.

    What was the issue, that it was too bright against your background?

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    Ya that was my only issue it was the white against my darker theme background… 

    Other then that I was happy with the embed…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    Looks like you can change the styling using their API to a darker themed colour https://twitframe.com/

    Thread Starter Robert Dall

    (@rdall)

    12 years, 10 months ago

    I will take a look at it Andrew.

    I won’t mark this as resolved until I have tried the solution… 

    Thanks for you assistance 🙂

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Tweet Embed Style’ is closed to new replies.