WordPress.org

1. mikeklimczak
   Member
   Posted 1 year ago #

   Working on my website http://mikeklimczak.com I have insert the code from the Twitter goodies page to have a feed of my Twitter in the sidebar.

   I think the CSS of my theme is affecting it though because I am getting line breaks before and after any @ tags and # tags that appear in my tweets, making them look a bit off.

   On the Twitter Goodies website the the test of the code returns normal looking tweets, but when I paste that same code into my sidebar I get the extra line breaks.

   Maybe I can add a DIV tag and strip all CSS from that DIV?

2. New Nine Media
   Member
   Posted 1 year ago #

   This is because your sidebar links are block elements. In your CSS, you have:
   

   #sidebar1 a, #sidebar1 li.recentcomments, #sidebar1 .textwidget, #sidebar2 a, #sidebar2 li.recentcomments, #sidebar2 .textwidget {
     border-bottom:1px dotted #000000;
     color:#A5A5A5;
     display:block;
     padding:3px 3px 3px 10px;
   }

   This tells the browsers that any link in your #sidebar1 or #sidebar2 is a block element. That's fine for your menu (in the right sidebar) where the user can click the menu "button" effect as opposed to only being able to click the menu text, but it is also the reason the twitter links are pushed to the next line. Your CSS is telling the browser that the links should be "block" elements in their own space as opposed to "inline" elements.

   Separate the #sidebar1 css from the #sidebar2 css so you can tell the #sidebar2 links to be block elements, but not the #sidebar1 elements. Your CSS might look something like this:
   

   #sidebar1 li.recentcomments, #sidebar1 .textwidget, #sidebar2 a, #sidebar2 li.recentcomments, #sidebar2 .textwidget {
     border-bottom:1px dotted #000000;
     color:#A5A5A5;
     display:block;
     padding:3px 3px 3px 10px;
   }

   (Notice the missing "#sidebar1" from the CSS.)

3. mikeklimczak
   Member
   Posted 1 year ago #

   Thanks New Nine, that was perfect.

   Haven't played with CSS before but that made it much clearer for me.

   After separating the #sidebar1 style I then figured out that I could instead leave the sidebar1 and sidebar setup as the the designer intended, but I instead added
   

   <div id="twitter>
   <div>

   either side of the Twitter widget script and then added
   

   twitter {
        design: inline
   }

   to style.css.

   Thanks for the solution. If I'm ever doing a gig in Chigago, you get in for free.

4. mikeklimczak
   Member
   Posted 1 year ago #

   Oops, that should be
   

   <div id="twitter>
   </div>

5. New Nine Media
   Member
   Posted 1 year ago #

   Looking forward to it!

   :)

Topic Closed

This topic has been closed to new replies.