Adobe Community: Twitter Widget font size

Currently Being Moderated

1. SnakEyez02,

Sep 26, 2009 5:06 PM in reply to Mike Nuzzo

Report

Here is what I see from your code:

<script>
new TWTR.Widget({
  profile: true,
  id: 'twtr-profile-widget',
  loop: true,
  width: 150,
  height: 250,
  interval: 12000,
  theme: {
    shell: {
      background: '#5f3813',
      color: '#ffffff'
    },
    tweets: {
      background: '#f4ede4',
      color: '#5f3813',
      links: '#319c31'
    }
  }
}).render().setProfile('mikenuzzo').start();
</script>

It appears that your CSS for this widget is being controlled here. Add font-size to the tweets CSS and you should be good to go.

|

Mark as:

Currently Being Moderated

2. Mike Nuzzo,

Sep 26, 2009 9:29 PM in reply to SnakEyez02

Report

Thank you Snakeyez

I've tried a few times, but unfortunately that doesn't work.

I contacted the widget creator and he said it needed to be done in the main CSS not the widget.

Here is the twitter widget doc:

http://www.dustindiaz.com/twitter-widget-doc/

His CSS & page http://www.dustindiaz.com/ was too complicated for me to decipher.

I'm trying to redefine the css of the twitter widget in the table cell -- with little success.

Can I create a different css for each cell of a table?

Cheers

|

Mark as:

Currently Being Moderated

3. Kath-H,

Sep 26, 2009 9:33 PM in reply to Mike Nuzzo

Report

You can create a new class in your css file and apply it to a table cell.

|

Mark as:

Currently Being Moderated

4. Mike Nuzzo,

Oct 1, 2009 9:37 PM in reply to Kath-H

Report

Thank you Kath.

I know very little about applying CSS to a cell - hard for me to find an answer too.

If someone can suggest a band-aid CSS add-on or suggestion I'd be very thankful.

Cheers

|

Mark as:

Currently Being Moderated

5. Nadia-P,

Oct 1, 2009 9:55 PM in reply to Mike Nuzzo

Report

Have you tried changing the font size in the widget.css

.twtr-widget{

position:relative;font-size:12px!important;font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;zoom:1;}

Using Firefox and the web development toolbar for editing CSS directly, I changed the 12px to 10px and it decreased the font size. (in FFox at least - don't have the capability to test this in IE without taking the page down, but it should work the same in IE as it does in FFox).

--

Nadia

Adobe Community Expert : Dreamweaver

---------------------------------------------------------------

Unique CSS Templates | Tutorials | SEO Articles

http://www.DreamweaverResources.com

---------------------------------------------------------------------- ----

Web Design & Development

http://www.perrelink.com.au

http://twitter.com/nadiap

|

Mark as:

Currently Being Moderated

6. Mike Nuzzo,

Oct 1, 2009 10:36 PM in reply to Nadia-P

Report

Thank you Nadia.

I've tried a few items in the css file that i'm now referencing on my site.

It was unsuccessful.

It appears as if the widget is using the colors from the main.html file - the brown text and green links aren't in the css file.

I have been able to change the size of the widget font but not without changing the size of the font in the big cell to the left - with the flags.

The other cells copy size does not change - the ones above.

So I assume I am changing the bottom row not the single cell.....

Cheers

|

Mark as:

Currently Being Moderated

7. Nadia-P,

Oct 2, 2009 12:23 AM in reply to Mike Nuzzo

Report

It appears as if the widget is using the colors from the main.html file - the brown text and green links aren't in the css file.

On another quick look at the code, yes, the widget text is being styled by font rule here:

body, div, td { color: #5f3813; font-size: 16px; font-weight: bold; }

So what the above means, that for the body, for all divs and for all table cells, the font is going to be what you have styled in the above style rules.

You need to get more specific so that the rule for the widget gets overwritten by another rule.

That's about all I can suggest without actually taking down your page and testing it in DW myself (I just don't have the time to do that - sorry !)

|

Mark as:

Currently Being Moderated

8. Mike Nuzzo,

Oct 2, 2009 7:31 AM in reply to Nadia-P

Report

Thank you Nadia - I certainly wouldn't ask you to download and try yourself - this is harder for me than I thought.

I spent some time last night researching and learning - I've got some more to do yet.

This seems to be my late night activity - maybe for tonight too.

Cheers

|

Mark as:

Currently Being Moderated

9. mr_mccall,

Oct 29, 2009 11:32 PM in reply to Mike Nuzzo

Report

I think this will help you... Place in your CSS

.twtr-tweet-text {

font: 11px Verdana, Arial, Helvetica, sans-serif !important;

}

Cheers

|

Mark as:

Currently Being Moderated

10. Mike Nuzzo,

Nov 8, 2009 9:32 AM in reply to mr_mccall

Report

Thank you Mr. Mccall.

I've got the main text resized.

I'm still working on the others.

Cheers

|

Mark as:

Currently Being Moderated

11. mr_mccall,

Nov 8, 2009 12:08 PM in reply to Mike Nuzzo

Report

I thought this was the "answer" to your question. What more do you need - I'm sure we can figure it out and close this thread.

Cheers

|

Mark as:

Currently Being Moderated

12. Mike Nuzzo,

Nov 8, 2009 2:14 PM in reply to mr_mccall

Report

Thank you Mr. McCall

I don't know what put in my CSS means.

Does it mean within my main.html file or my external CSS file.

I understand the point of CSS, but don't know much about using CSS.

I've experimented to get where I am now.

My three remaining font size definition problems:

As of now the links within the widget are the size of the links on the main page.
The # of days ago is also another size.
And the title and footer are too large.

This is what I have now in the top of my http://www.mnuzzo.com/main.html file.

a { color: #319c31; font-size: 16px; text-align: justify }

body, div, td { color: #5f3813; font-size: 16px; font-weight: bold }

.twtr-font {

font-family: "Courier New", Courier, monospace;

font-size: 10px;

color: #5F3813;

}

.style3 {font-size: 9}

.twtr-widget .twtr-timeline p {font-size: 12px !important;} [a suggestion from another source]

.twtr-tweet-text {font: 9px Verdana, Arial, Helvetica, sans-serif !important;}

|

Mark as:

Currently Being Moderated

13. mr_mccall,

Nov 16, 2009 2:27 PM in reply to Mike Nuzzo

Report

Mike

I think this should do the trick (see attached file)... I also put your Google Analytics in the correct postion (within the Body tag)... If this works let me know and we can close this thread and assign me the "correct"...

Cheers

Attachments:

main.html (19.1 K)

|

Mark as:

Currently Being Moderated

14. STUB3N,

Mar 1, 2010 8:17 AM in reply to Mike Nuzzo

Report

I recently was looking for this fix and was unable to find it. None of the above worked for me, I am using the profile widget on my work site which is not in any cms/blog system.

Luckily, I did resolve the issue... I had to go inside the widget.js file. I created a new css style within it... here is the new .js file for anyone that wants this fix!

http://www.magazine.uc.edu/widget.js

When opened ctrl+f (find search) for 'font-size' it's the only one in there so you shouldn't have any problems.

I realize this is a delayed response but, posting anyway for anyone scouring the web for an alternative solution.

-stub3n

|

Mark as:

Dreamweaver

Twitter Widget font size - CSS?

Sep 26, 2009 4:16 PM

More Like This

Bookmarked By (0)

Answers + Points = Status