Transparent png backgrounds using Widget

[IPEC_Inc]

Hello,

First post here so not sure if I am going about the correct way. Anyways, I am not a coder, but good at following simple examples. I have been able to setup a widget on my company website (Rapidweaver) and have successfully added settings for data-chrome=“transparent”, data-tweet-limit=“20”, etc. The feed looks good and the default background of our page comes through nicely.

Problem is, we use lots of png images with transparent backgrounds. If you pick the light theme on the Twitter Widget setup, any image transparency turns white. If you pick the dark theme all image transparencies are turned black. Both look bad. It seems that the transparency setting only applies to the feed itself and any images are still forced to use the light or dark theme.

Does anyone have a piece of code that can be added in to force transparency on the images within the tweets?

Can see what I’m talking about here: http://www.ipec-inc.com/twitter/ Our 20th anniversary logo and a tweet showing some of our systems have white backgrounds on a transparent widget.

Thanks in advance for any help,

ap

[DanielCHood]

I think this will work:

.MediaCard-mediaAsset { background-color: transparent !important; }

Add that to your css file. I’m just not 100% sure because I’m not really familiar with how Twitter injects the stylesheet for the widgets.

[IPEC_Inc]

Thanks Daniel,

sorry for the rookie question but I’m not sure the best way to add custom css for Rapidweaver sites. I have tried adding to the page CSS with no luck, but am wondering if if can be snuck into the HTML for the widget:

<a class="twitter-timeline"
href="https://twitter.com/IPEC_Inc"
data-widget-id="614492922801598464"
width=“600"
data-chrome="transparent"
data-tweet-limit="20"
Tweets by @IPEC_Inc

thanks,

[DanielCHood]

Sorry, I don’t know anything about Rapidweaver sites.

If you’re able to post raw html like that though then you should be able to do add a style code as well though.

<style>.MediaCard-mediaAsset { background-color: transparent !important; }</style>
<a class="twitter-timeline" (plus the rest of your code)

[IPEC_Inc]

Thanks Daniel. Looks like that does not affect the tweet images. I appreciate you taking a look.

regards,

ap

[DanielCHood]

Ah, probably due to being iframed. I didn’t realize that was how it ended up getting embedded.

To some degree it kind of looks like a bug though.

[IPEC_Inc]

looks like people have been calling this a bug for a few years and asking for a ‘Transparent’ option when you setup the widgets. hopefully it gets addressed. I can live with the white backgrounds but not ideal.

thanks again,

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.