Jump to content


Photo
- - - - -

Text Widget in Primary Side Bar is Typographically Messy?


  • Please log in to reply
14 replies to this topic

#1 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 29 February 2012 - 06:43 PM

Please Login or Register to see this Hidden Content

If you view this site, the primary side bar has a Twitter feed, and it looks typographically messy or actually "ugly."

Please Login or Register to see this Hidden Content

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 February 2012 - 07:59 PM

Kenny, do you have Firebug for Firefox?

Please Login or Register to see this Hidden Content

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.

#3 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 29 February 2012 - 09:46 PM

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?"

#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 29 February 2012 - 09:53 PM

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

#5 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 03:00 PM

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.

#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 01 March 2012 - 03:02 PM

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

#7 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 03:44 PM

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

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 01 March 2012 - 03:49 PM

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:

Please Login or Register to see this Hidden Content



#9 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 05:04 PM

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!

#10 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 05:07 PM

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

#11 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 05:09 PM

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.

#12 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 01 March 2012 - 05:10 PM

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!

#13 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 01 March 2012 - 05:14 PM

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...

Please Login or Register to see this Hidden Content


;)

#14 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 05:54 PM

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

#15 kennyb

kennyb

    Member

  • Members
  • 25 posts
  • LocationBoston, MA
  • Framework Version:2.5

Posted 01 March 2012 - 05:59 PM

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; }