Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Asad Kashmiry
Asad Kashmiry
219 Points

How can I customize embedded Twitter Feed CSS

Hello Experts!

I need a kind help from you guys. Currently, I am building a website from scratch, the client wants to add his twitter feed to the footer of the website. But the problem is I could not customize the default twitter feed style. Here is the screenshot please have a look https://i.imgur.com/Gv28Ky1.png

Please help me to customize the twitter feed by CSS.

Kind Regards Asad

2 Answers

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Asad,

It depends on how the twitter feed is implemented. Can you provide a link to the plugin or post your code here?

One thing to check is the order in which the styles are being loaded. If the plugin's css files are loaded after your own css files, yours will be overwritten.

For example:

<head>
    <link rel="stylesheet" href="my_custom_styles.css" /> <!-- CSS rules in this file will get overwritten by those in the file below -->
    <link rel="stylesheet" href="http://website.com/twitter_plugin_styles.css" />
</head>

Hope this helps :)

Asad Kashmiry
Asad Kashmiry
219 Points

Here are the embedded codes 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Lang may your lumb reek! <a href="https://twitter.com/hashtag/HappyNewYear?src=hash&amp;ref_src=twsrc%5Etfw">#HappyNewYear</a> <a href="https://twitter.com/hashtag/hogmanay2018?src=hash&amp;ref_src=twsrc%5Etfw">#hogmanay2018</a></p>&mdash; Alex (@_banter) <a href="https://twitter.com/_banter/status/947599859594551297?ref_src=twsrc%5Etfw">December 31, 2017</a></blockquote>
James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Asad,

You should just be able to do something like:

blockquote.twitter-tweet p {
  color: red;
}

Check out CSS for Embedded Widgets article.

Hope this helps :)

Asad Kashmiry
Asad Kashmiry
219 Points

Hi James,

I have tried the way Twitter provided but it did not work.

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Asad,

Can you provide a link to the project? It's difficult to troubleshoot without seeing the full picture.

If it's not hosted anywhere, you can upload it to Workspaces and post the link.

See How do I share a workspace for help.

Thanks :)