How to make the Twitter widget position fixed?

b_0 · 2013-05-22T04:49:32.000Z

Hey there guys,
I am building a website for a friend, and he requested that the twitter feed, of him and his partner are on the web page. I used the widget building tool, and got everything working properly. I used the option to change the widget so that it populates the whole screen. with the code they posted on the widget page.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-ID-HERE" data-theme="dark" data-link-color="blue"  data-related="twitterapi,twitter" data-aria-polite="assertive" width="200" height="350" lang="EN">Tweets by @twitterapi</a>

I have each twitter feed floating on the left, and right side of the screen. So i now want it so when you scroll down the page, the twitter feed page stays in place. Does anyone know how this could be done? Similar to a footer that doesnt move when you scroll down a webpage?

Please and thank you!
_b_0

benward · 2013-05-22T18:15:43.000Z

Hi Ben,

The best way to do this would be to put the embed code in a container

 and position that fixed with CSS. Avoid directly styling actual element created by the timeline widget (currently an iframe), because that could change in the future.
B

A_Kostrabova · 2013-07-18T12:49:00.000Z

Hi,

Sorry about this long message…
We need to stylize our timeline widget with custom css. I checked the elements with Firebug, but since we don’t seem to have access to the actual widget files, I am not sure how to do this.

The current widget is rather clunky and not really in keeping with our site style. Here is the code in our twitter.liquid.php file (I am putting the new widget code between quotes /**/, the rest is what was originally in the liquid file:


			
			
				TWITTER WIDGET HEADER
				{% if settings.twitter_follow == 'enabled' and settings.home_style == 'collection-style'%}
/*

Follow@OUR ACCOUNT

/

{% endif %}




/

*/

			</div><!-- #twitter-container -->
			
			{% if settings.twitter_follow == 'enabled' and settings.home_style == 'default-style'%}
				<a class="twitter-timeline"  href="OUR ACCOUNT URL"  
                  data-widget-id="OUR ID"></a>
          {% endif %}</div>
		<!-- / TWITTER --></code>

The code “noheader nofooter noscrollbar transparent” does not do anything, the sections are still visible. We would need to make the following changes, the widget is 400px high:

/* This hides Twitter header - Tweets + link Follow@… */
.timeline-header {display: none;}
/* This hides Twitter footer - Tweet to… */

.timeline-footer {display: none;}
/*  Increasing width to 110% hides the section on the right hand side where the scrollbar would be */

.timeline .stream {width: 110%;}
/* This adjusts the padding around the text inside the single Tweet box, which got messed up after the width of the timeline stream was increased */

.var-narrow .tweet {padding: 8px 20px 8px 10px;}
/* This hides the Load More button */

button.load-more {display: none;}


If anyone can help explain what to do, I would really appreciate it. This is a headache for someone who is NOT a programmer!
Thank you in advance!

TweetsDecoder · 2013-09-05T11:06:08.000Z

This best way to customize the twitter widgets by click! copy! paste! . without using the #TwitterApi Follow this Link http://tweetsdecoder.com/.

niall · 2016-02-06T05:50:46.092Z