Customizing Home page
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.
To try out the new Home design, add a code below at the END of the style (before } "closing brace").
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.
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
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.
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.
Anyway, really good job.
THANK YOU!
Google Reader: Mac OS X Snow Leopard
Still work to do for fancier navigation pane so please wait.
I still have work to do with it. Also, let me know if there is a problem since it's been just released.
Enjoy.
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.