Could not apply my own CSS stylesheet onto Twitter feeds

[awongCM]

Hi,

I tried to follow your instructions on this page.

http://tweet.seaofclouds.com/

on styling the css for the twitter feeds. Apparently it's not working at all.

Here's my css stylesheet.

.tweet .tweet_avatar {
display: none;
}

.tweet .tweet-list li {
background: url(../images/tweet_grey.png) no-repeat top left;
border-bottom: 1px dashed #e6e6e6;
padding-left: 30px;
margin-top: 10px;
padding-bottom: 10px;
}

.tweet .tweet-list li .tweet_time {
display: block;
}

where as .tweet is my main class.

And in my js code,

<script type="text/javascript"> $(document).ready(function() { $('.tweet').tweet({ modpath: '/files/twitter/', username: 'MaryONeillLife', join_text: 'auto', count: 3, loading_text: 'loading twitter feed...', }); }); </script>

After all that set up - nothing happens!

I validated that the css are correct and included in the link stylesheet statement within the html file and I've been sitting for the past couple of hours, scratching my head why should this not work!

Did I do something wrong with my CSS or the way I declare my css for use?

I really could use your help.

[purcell]

Is there a live example you can point me at? Not possible to give much feedback based on a summary of what you tried.

[awongCM]

The website is here.

http://maryoneill.tmaworldwide.com.au/blog.html

If you look at the sidebar, there's section called Latest Tweets,

Under that heading, you'll see two tweet outputs. First section is the static html output of a mock-up twitter feed; second section is the output of the actual feed using Twitter-mod.js function.

Latest Tweets

• about 5 hours ago Wow. Just Wow.
• about 8 hours ago Hahahahaha...NOT!

                <div class="tweet"><ul class="tweet_list"><li class="tweet_first tweet_odd"><span class="tweet_time"><a href="http://twitter.com/MaryONeillLife/status/420404619777302529" title="view tweet on twitter">about 6 days ago</a></span> <span class="tweet_join">i was looking at</span> <span class="tweet_text">Lion king painting by me... got to love Disney <a href="http://twitter.com/MaryONeillLife/status/420404619777302529/photo/1">pic.twitter.com/UAeEtXWe3U</a></span></li><li class="tweet_even"><span class="tweet_time"><a href="http://twitter.com/MaryONeillLife/status/419259434636824577" title="view tweet on twitter">about 9 days ago</a></span> <span class="tweet_join">i replied to</span> <span class="tweet_text"><span class="at">@</span><a href="http://twitter.com/missannajames">missannajames</a> <span class="at">@</span><a href="http://twitter.com/jeannielaurie">jeannielaurie</a> hahah ok well im planning on being LA around then so keep me in the loop xx</span></li><li class="tweet_odd"><span class="tweet_time"><a href="http://twitter.com/MaryONeillLife/status/419241442649731072" title="view tweet on twitter">about 9 days ago</a></span> <span class="tweet_join">i said,</span> <span class="tweet_text">RT <span class="at">@</span><a href="http://twitter.com/missannajames">missannajames</a> <span class="at">@</span><a href="http://twitter.com/jeannielaurie">jeannielaurie</a> I'm setting it up, just want to make sure everyone gets a say in what we plan. <span class="at">@</span><a href="http://twitter.com/MaryONeillLife">MaryONeillLife</a> you in? <a href="http://api.twitter.com/search?q=&amp;tag=HSReunion&amp;lang=all" class="tweet_hashtag">#HSReunion</a></span></li></ul></div>
            </div>

The css styling is

Javascript code

<script type="text/javascript"> $(document).ready(function() { $('.tweet').tweet({ modpath: '/files/twitter/', username: 'MaryONeillLife', join_text: 'auto', count: 3, loading_text: 'loading twitter feed...', }); }); </script>

Have a look and see what you can make of it!

[awongCM]

Hi,

Have you found anything yet, what's the cause of the issue?

Andy

[purcell]

Well, if I look in the Chrome inspector at the elements which should be styled by .tweet .tweet-list li, there are no signs of the styles you mentioned above. So the browser isn't even trying to apply those styles. Can't see exactly why, I'm afraid, and I can't offer to debug your site further, but rest assured that the example CSS is fundamentally fine and used widely without issues.

Cheers,

-Steve

[awongCM]

Thank Steve. If you confirmed that your example CSS is fundamentally working fine and nothing else changes, then that leaves me on remaning clue to suspect my website may have some CSS stylesheets which may have conflicted with my CSS tweets. I'll create a test static html, write the content, and isolate which css stylesheet is causing this problem.

Thanks again for looking into this.

Much appreciated.