14 Replies Latest reply: Mar 1, 2010 8:17 AM by STUB3N RSS

    Twitter Widget font size - CSS?

    Mike Nuzzo Community Member

      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

        • 1. Re: Twitter Widget font size - CSS?
          SnakEyez02 CommunityMVP

          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.

          • 2. Re: Twitter Widget font size - CSS?
            Mike Nuzzo Community Member

            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

            • 3. Re: Twitter Widget font size - CSS?
              Kath-H Community Member

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

              • 4. Re: Twitter Widget font size - CSS?
                Mike Nuzzo Community Member

                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

                • 5. Re: Twitter Widget font size - CSS?
                  Nadia-P CommunityMVP

                  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

                  • 6. Re: Twitter Widget font size - CSS?
                    Mike Nuzzo Community Member

                    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

                    • 7. Re: Twitter Widget font size - CSS?
                      Nadia-P CommunityMVP

                      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 !)

                      • 8. Re: Twitter Widget font size - CSS?
                        Mike Nuzzo Community Member

                        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

                        • 9. Re: Twitter Widget font size - CSS?
                          mr_mccall

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

                           

                          .twtr-tweet-text {

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

                          }

                           

                          Cheers

                          • 10. Re: Twitter Widget font size - CSS?
                            Mike Nuzzo Community Member

                            Thank you Mr. Mccall.

                            I've got the main text resized.

                            I'm still working on the others.

                            Cheers

                            • 11. Re: Twitter Widget font size - CSS?
                              mr_mccall Community Member

                              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

                              • 12. Re: Twitter Widget font size - CSS?
                                Mike Nuzzo Community Member

                                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:

                                1. As of now the links within the widget are the size of the links on the main page.
                                2. The # of days ago is also another size.
                                3. 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;}

                                • 13. Re: Twitter Widget font size - CSS?
                                  mr_mccall Community Member

                                  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

                                  • 14. Re: Twitter Widget font size - CSS?
                                    STUB3N

                                    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