Anybody know the best way in implementing a big bold twitter feed on your webflow site, preferably in a parallax image section?
It would look something like this:
at the very least, something similar to this sites social boxes (instagram, twitter): chanceraps.com
Thanks!
Hi @Dreamvinci, Webflow gives you the capability to embed a twitter feed, but the styling, you should read up on, from Twitters documentation page:
This will give you more information on how to style your twiter feed embeds. I hope that helps. Cheers, Dave
Awesome dave! Totally helped, didn’t even know twitter had this documentation on styling.
I wonder how much a custom WordPress website costs nowadays?
depends on the quality you’re looking for.
What’s the low end? I know some sites that cost > $200k USD, but wondering what normal people pay.
Depends on the size. From simple portfolio based on Wordpress it’s around $800 - $1500. Better sites push their value up.
@bartekkustra Hey Bartosz. Do you know if I can use the Twitter embedded timelines and styling to create a rotating “Recent tweets” widgets and style it like the attached screenshot
From the footer here: https://www.mota.com/mota-credit-card-power-bank/
Any inputs is greatly appreciated 
Hi @cyberdave so where exactly do i place the css provided by twitter in webflow?
Hi @Nir, thanks for your question. You can put that CSS inside the Head section that is located on the Custom Code tab in Site Settings.
You take the css that is coming from Twitter, and wrap the css with the <style> tag like so:
<style>
.. twitter css classes you want to customize goes here
</style>
Here is an article on adding custom code to your site:
I hope that helps, if not, let me know and I am happy to help further
Cheers, Dave
Thank you @cyberdave. Something is not working though, i used the embed code directly from Twitter, embedded, and then added the css provided by Twitter and wrapped it with the style code you wrote here.
However, nothing happened… am i missing something i should have done? will some photos or the code example help?
The other issue is that i want only the latest tweet to show, and update when a new tweet is posted, but Twitter don’t have that option. I only found references to WordPress when i searched.
Thank you for the help!
Hi @Nir, sorry for the late reply. Could you post the read-only link to your site, I am happy to take a look.
More information about read-only links:
Learn web design with free video courses and tutorials | Webflow University
Hi @cyberdave sorry for re awakening the old subject but i need your help.
Iv managed to embed the twitter timeline and set it to show the latest tweet only.
So iv used this code on the embed -
<a class="twitter-timeline"
href="https://twitter.com/pennybluesg"
data-widget-id="577758991415001088"
data-theme="dark"
data-link-color="#cc6868"
data-chrome="noborders noheader nofooter transparent"
data-related="twitterapi,twitter"
data-tweet-limit="1"
data-aria-polite="assertive"
width="100%"
height="auto">
Tweets by @pennybluesg
</a>
and then i placed this code at the body Footer Code -
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
So far so good, but now i want to style the text fonts size and colors so i have this CSS for embedded timelines from twitter -
a.twitter-timeline {
/* Buttonish */
display: inline-block;
padding: 6px 12px 6px 30px;
margin: 10px 0;
border: #ccc solid 1px;
border-radius: 3px;
background: #f8f8f8 url(//platform.twitter.com/images/bird.png) 8px 8px no-repeat;
/* Text */
font: normal 12px/18px Helvetica, Arial, sans-serif;
color: #333;
white-space: nowrap;
}
a.twitter-timeline:hover,
a.twitter-timeline:focus {
background-color: #dedede;
}
/* Color Highlight for keyboard navigation */
a.twitter-timeline:focus {
outline: none;
border-color: #0089cb;
}
However the styling is not working.
What am i doing wrong?
Iv wrapped the CSS with the style tag -
<style>
.. twitter css classes you want to customize goes here
</style>
But its not doing anything.
Hi @Nir, I am happy to take a look. Could you please share the published url for the page where the css is not working? Cheers, Dave
Hi @cyberdave
here’s the link
https://preview.webflow.com/preview/twitter-test?preview=53fabb3e150f351e719752fd1efbee92
I forgot to add the live site link.
Hi @Nir, thanks for your update. I did take a look at the site, but there is no CSS yet in the header of your site. I see you have the script in the footer, and that is fine 
Could you add the css wrapped in the style tag in the header and republish the site, so I can view the site with the custom css? Cheers, Dave
The instructions at Twitter Overview | Docs | Twitter Developer Platform actually define how to alter the appearance using their built in customization options using attributes in the embed widget. The css is coming at runtime from twitter, so it is overwriting the style put in the head (I think that is what is happening). You might be limited to Twitters built in customization options, but I will continue to look at this.
Hi @cyberdave thank you for your reply.
Iv added the code to the header.
<style>a.twitter-timeline { /* Buttonish */ display: inline-block; padding: 6px 12px 6px 30px; margin: 10px 0; border: #ccc solid 1px; border-radius: 3px; background: #f8f8f8 url(//platform.twitter.com/images/bird.png) 8px 8px no-repeat; /* Text */ font: normal 50px/18px Helvetica, Arial, sans-serif; color: #333; white-space: nowrap; } a.twitter-timeline:hover, a.twitter-timeline:focus { background-color: #dedede; } /* Color Highlight for keyboard navigation */ a.twitter-timeline:focus { outline: none; border-color: #0089cb; }</style>
Made the text size bigger to see if there’s any change. and the is at the beginning as the page loads, but then it goes back to normal.
Hi @nir, thanks, could you also copy and save the embed code you have to somewhere as a backup, and then replace that embed code with the following:
<a class="twitter-timeline"
href="https://twitter.com/pennybluesg"
data-widget-id="577758991415001088"
data-chrome="noborders noheader nofooter transparent"
data-related="twitterapi,twitter"
data-tweet-limit="1"
data-aria-polite="assertive"
width="100%"
height="auto">
Tweets by @pennybluesg
</a>
This above is the embed without the theme styling. Could you save this and republish your site? I would like to see if there is any effect now that you have put in the CSS and a call to twitter, without calling the dark theme.
Hi @cyberdave changes made.
Do i need to add an attribute for the embed?