Twitter Widget change font colour?

Soldato
Joined
4 Feb 2004
Posts
13,379
Location
Fife, Scotland
Is there a simple way to change font colour within a Twitter Widget embedded into the footer of a website? I've set the background to transparent by using data-chrome="transparent" but I am wondering if there is a simple way to change the font colour to #FFFFFF?

Cheers.
 
These widgets usually just embed html onto your page, you can target that in normal CSS.
Either add your own css code to override the default or just edit the css that the widget uses and change the font colour.
 
Use your broswer developer tools to see what html is put on the page.
This is a screenshot of the twitter dev site showing the example widget. If you're using a third-party widget your code might look a bit different:
SD6fWv4.png
The box on the right shows the styles which are applied and where the css code is located.
Hover over the filename and check the location of it. If it's an external stylesheet (from a different domain name) you don't have any control over it. The twitter dev site in the screenshot above loads a css file from platform.twitter.com/css/timeline.css. You plugin might use a local stylesheet (from the same domain as your website) something like /content/css/style.css. You can just find this file and change the part you need.

The easiest was to do it is to add your own style for the text colour to an existing stylesheet. Use dev tools to inspect the text as before, then copy the CSS selector from the box on the right (in the screenshot above as ".SandboxRoot.env-bp-430 .timeline-Tweet-text") and add this to one of you other stylesheets:
.SandboxRoot.env-bp-430 .timeline-Tweet-text{
font-color:#fff!important;
}

(I've included !important on the end of it because you're going to end up with 2 different stylesheets trying to apply different font colours via the same selector so you need to define which takes priority - not best practice to do it this way but it'll work and is easier to follow)
 
Back
Top Bottom