Customizing Home page

About: Google Reader: Mac OS X Snow Leopard
edited June 2009 in Style Reviews
From a suggesiton by Vincent Volaju, I made a quick experiment with Home page. I am not sure I would incorporate this. Any comment about this would be welcomed.

For other suggestions, I don't fully understand what you mean by "more than a background color." It would be nice to hear more explanation.
For the unread count thing, I experimented with it and it is actually in the code but commented out for I cannot remove those ugly parenthesis.

Free Image Hosting at www.ImageShack.us
To try out the new Home design, add a code below at the END of the style (before } "closing brace").

/*---- HOME ----*/ #home, #viewer-page-container {background: #9aa7ba !important;} #overview {margin-left: 12px !important;} #overview .section-header { color: #000 !important; margin-bottom:1.5em !important; text-shadow: rgba(255, 255, 255, 0.3) 0 1px !important;} #home .title, /*#home .link,*/ #home .section-header, #overview-footer, #overview-footer a, #overview-footer a:visited {color: #000 !important; text-shadow: rgba(255, 255, 255, 0.3) 0 1px !important;} #home a, #home a:visited, #home .link, #overview-footer, #overview-footer a, #overview-footer a:visited {color: #000 !important;} /* RIGHT COLUMN */ #rec-preview {margin-top: 1em !important;} #rec-preview .section-header, #tips .section-header, #home #rec-preview a, #home #rec-preview span, #home #tips a {color: #444 !important; text-shadow: rgba(255, 255, 255, 0.3) 0 1px !important;} #home a:not(:hover), #home span:not(:hover), #footer a:not(:hover) {text-decoration: none !important;} #overview .item-snippet, #overview .label, #rec-preview-body .recommendation-preview-feed-summary, #recent-activity .recent-item, #recent-activity h4, #tips p, #tips ul, #team-messages, #team-messages-snippet {color: #555 !important;} #overview .item-title {margin: 8px 0 6px 0 !important; display:block !important;} #overview img {color:#000 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; padding: 0 !important; -moz-box-shadow: 0 0 0px #111 !important;} #overview img:hover {-moz-transform: scale(4) !important; border: none !important;} #home .overview-segment { border: 1px solid rgba(0, 0, 0, 0.3) !important; background: #b2b8cd !important; padding: 1em !important; -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0px 2px rgba(0, 0, 0, 0.5) !important; -moz-border-radius: 8px !important;} #rec-preview, #tips {border: 1px solid rgba(0, 0, 0, 0.3) !important; background: #9aa7ba !important; padding: 1em !important; -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0px 2px rgba(0, 0, 0, 0.5) !important; -moz-border-radius: 8px !important;} #team-messages {margin-top: 3em !important;} #footer {margin-left: 1em !important; border-top: 1px solid rgba(255, 255, 255, 0.3) !important;} /*--- TRENDS ----*/ #trends-item-count-header, #trends .explanation {color:#ddd !important;} #trends .cloud {background: rgba(255, 255, 255, 0.8) !important; padding: 0.5em 1em !important; -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0px 2px rgba(0, 0, 0, 0.5) !important; -moz-border-radius: 8px !important;}

Comments

  • Wow, thanks for hearing my suggestion... you did a really good job, it could work. Did you try using the original color from the screen i show you?
    In the screenshot, the lighter color is #B3BCCD... It may make it look better.

    Here, see this: http://img235.imageshack.us/img235/3563/path3332.png
    1: The use of Mac style icons would improve the look a lot (following the proportions of the panel, in general)
    2: Distinguish the category from it's content, more hierarchical.
    3: Well, you've already answer this.
    4: What i mean with "more than a background color" is this: the actual panel looks weak, it doesn't have the personality of a native OS X apps:
    http://img233.imageshack.us/img233/7061/path2478.png
    A: The curved corner (in the expanded mode) looks odd, the color of the border (that separate the panel from the content) is too soft.
    B: This two buttons are exactly like the default theme, they could be improved... Can you change this buttons location?
    C: The ADD button could look a lot better if you place it in the bottom, maybe with the buttons mentioned on point B, styled like in the point 4.

    I'm sorry if im saying nonsenses, and i hope it can help.
  • Thanks for explanation.
    Posted By: Vincent VolajuI'm sorry if im saying nonsenses, and i hope it can help.
    No, it's not nonsense; there are things that I overlook or just too lazy to modify developing alone. The suggestions truly helps. Especially, I usually hide navigation panel for I have small screen so I couldn't care less about it sometimes.

    I'm probably not going to apply all of the suggestions you made; however, I will take the delicious part;-p

    I'm currently working on it but here is what I am up to. When I finish working on it, I will post this style separately from the original due to its size.

    image
  • Oh wow, i mean, WOW. the difference is notable, i love the changes you're making... I just wish my fonts could be rendered the way Mac fonts does :(
    Anyway, really good job.

    THANK YOU!
  • Home and Trends page are updated now. Also some fixes here and there.

    image

    Google Reader: Mac OS X Snow Leopard

    Still work to do for fancier navigation pane so please wait.
  • The new Trends page looks amazing! Surprisingly the Home page doesn't look as good as i thought (i couldn't test it before), but its just my taste.
  • Now Google Reader: Mac OS X Snow Leopard+ Delicious.

    I still have work to do with it. Also, let me know if there is a problem since it's been just released.

    Enjoy.
  • Awesome!! I love it... It's a great job.
    Thank you, really.
    - - - -
    I was wondering how do you change the colors of the items (posts): http://userstyles.org/style_screenshots/19191_after.png

    P.s.: The old large shadow button at left was more comfortable to access.
  • Posted By: Vincent VolajuI was wondering how do you change the colors of the items (posts)
    Well, it is actually done by Greasemonkey script: Google Reader - Colorful List View. I love using it for easy viewing of lots of feeds so I highly recommend it.
    P.s.: The old large shadow button at left was more comfortable to access.
    It was getting way of operating in navigation, etc, sometimes. I may change it if I find better way but I am not sure. I prefer to use keyboard shortcut which is just typing "u."
Sign In or Register to comment.