Skip navigation
Currently Being Moderated

Twitter Widget font size - CSS?

Sep 26, 2009 4:16 PM

Howdy

I am trying to shrink the font sizes of the twitter widget on http://www.mnuzzo.com/main.html

Experimenting with CSS in DWCS3 I've come close, but not without changing one of the other styles

I could use a suggestion

Thank you

Mike

 
Replies
  • Currently Being Moderated
    Sep 26, 2009 5:06 PM   in reply to Mike Nuzzo

    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
    Sep 26, 2009 9:33 PM   in reply to Mike Nuzzo

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

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 1, 2009 9:55 PM   in reply to Mike Nuzzo

    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
    Oct 2, 2009 12:23 AM   in reply to Mike Nuzzo

    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
    Oct 29, 2009 11:32 PM   in reply to Mike Nuzzo

    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
    Nov 8, 2009 12:08 PM   in reply to Mike Nuzzo

    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
    Nov 16, 2009 2:27 PM   in reply to Mike Nuzzo

    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:
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2010 8:17 AM   in reply to Mike Nuzzo

    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:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points