• 0
Sign in to follow this  
Followers 0

Text Widget in Primary Side Bar is Typographically Messy?

Question

Posted · Report post

http://tristanohs.com/ If you view this site, the primary side bar has a Twitter feed, and it looks typographically messy or actually "ugly." http://lhyb.com/ The Twitter in the site looks good. In both cases they are standard widgets. Both are in Pagelines. Please help me make Twitter at least look respectable. Thank

Share this post


Link to post
Share on other sites

14 answers to this question

  • 0

Posted · Report post

Kenny, do you have Firebug for Firefox? http://www.getfirebug.com This is an add-on for Firefox browser that lets you inspect each element in your site and test CSS live. It will help you to customize that section. In fact, if you have two tabs open, one for the yacht site and the other for the medical site, you can pretty much copy the CSS, test it and see if yours improves. If you find the right combination, you can copy the CSS from Firebug to Custom Code in CSS Rules.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, but I've created about 6 sites with pagelines and have never set any css for the twitter feed. It seems like the framework has something else going on so I have no css to copy? I have firebug and use it constantly, as I used to hand code everything - but that's why I switched to pagelines - i'm faster, better and normally just add a little css to shine things up. So my question is "is framework the culprit?"

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What twitter feed? There is no twitter feed built into PageLines Framework,

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Pross, the twitter feed is a widget. I have use Jetpack Twitter #1 in both sample websites shown above. But using the same plugin in both Pagelines and Pagelines Framework, the Twitter Widget in Frameworks is messy.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So it needs some css, use firebug to find whats best and add it to the custom css area in pagelines settings.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry Pross and Rangelone, YES - I already use Firebug. YES - I could write CSS but Pagelines is not all that firebug friendly A STANDARD WIDGET - The Twitter Feed Widget is the same EXCEPT in Frameworks it is now "ugly," bad typography. Apparently something changed in FRAMEWORKS so now we need to do custom CSS to make it "look professional and readable" DOES anyone know exactly what css controls a twitter feed in the primary side bar? Thanks, Kenny

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You said that both are "in PageLines" but that's not the case. One site is PageLines Framework but the other is PlatformPro. Two completely separate products which render items differently. Since you know how to use FireBug, this should be an easy fix for you. For example, the bold text comes from: [code].twitter-item:nth-child(2n) { font-weight: bolder; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for the clarification. But quite frankly this is a step backwards. Platform pro handled this "very important plug in with class and style" now in Framework - it's an absolutely horrible type and looks like crap. You were right I updated the css and it got rid of the bold, but its not all italic and gray like it was. Now I need to spend hours on something I didn't need to do before. I see simple mama you answer quite a few questions so thank you again. It figures, when I sell websites to clients social integration is high on the scale of importance. Now my favorite plug in has been rendered useless!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm still look for the entire CSS required to fix this Twitter plug in. I was not able to see using Firebug all the CSS required to fix this. I"m still searching for .twitter-item:nth-child(2n)?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When I added font-style:italic; color: #666; font-size: .75em; line-height:1em; to the .twitter-item:nth-child(2n) it made it worse. I'll keep working on this but really the time is so counter productive.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To search for the twitter declaration, just put your mouse over one of the bold Twitter entries, right click, and click "inspect element with firebug". You will see it appear in the CSS side on the right. I would just take one element at a time and change them to your liking until you get it right. You could always "inspect" PlatformPro, and then "inspect" PageLines to make one look like the other. And, you can always save your CSS to a text document so you don't ever have to do it again. :) Just copy/paste into your next theme and you're done!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Remember, the ".twitter-item:nth-child(2n)" is not every item.. it is EVERY OTHER item (hence why every other tweet is bold). So you need to find the element that controls them all. Something like... [code]#twitter-1 .twitter-item[/code] ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for sticking with me on this one. I almost have it the last item is additional space between each tweet. So I'm looking into the li style. BUT, if you have a good contact at Pagelines perhaps they could fix this issue in the next release

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The complete CSS to fix the Twitter Widget is .twitter-item:nth-child(2n) { font-weight: normal; } #twitter-1 .twitter-item { font-style:italic; color: #666; margin-bottom: 10px; }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0