Blog Documentation Book a Demo
Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

GoogleSkins theme for Vanilla [ preview ]

422422 MVP
edited December 2011 in Vanilla 2.0 - 2.8

Couple of finishing touches, and this new theme will be ready.
image

You may test it out here: Google Forum

There was an error rendering this rich post.

Tagged:

Comments

  • sahotataransahotataran ✭✭✭

    nice work.
    i would left align the forum as it is with google.

    There was an error rendering this rich post.

  • 422422 MVP
    edited December 2011

    Left align ? content ? sidebar or whole thing? Not sure what you mean @sahotataran

    Happy to change anything, always welcome feedback

    Incidentally ( I tagged it as google ) and its posted the tag as approval ( that wasnt intended )

    There was an error rendering this rich post.

  • sahotataransahotataran ✭✭✭
    edited December 2011

    oh sorry my bad. the whole thing i was talking about. like the whole google site is left aligned.

    as the whole content you have for now is in the middle of page, but google forums are left aligned that the content is always to the left. hope you got what i mean.

    still just a suggestion.

    There was an error rendering this rich post.

  • x00x00 MVP

    I'm not sure I like this one so much. I think you followed their new colour scheme too faithfully, when really they made specific styling touches due to layout/design. May have overused, colours and blocks mixed up. I really don't like the thick black and the black borders with everything else.

    Google interfaces are known for their simplicity. I would go for nostalgia, it is kink of refreshing to see just plain links, nicely spaced. Do you need more then 4-5 colours?

    I think you facebook one worked better IMO.

    grep is your friend.

  • 422422 MVP

    Ahh yeah gottya. I see what you mean, but actually prefer center aligned sites. Appreciate feedback though

    There was an error rendering this rich post.

  • 422422 MVP

    @x00 thanks for the feedback.

    I was retiscent with the schema.. but the theme was asked for by a client. When I looked into Googles schema, it was apparent they actually utilise quite a broad pallet.

    I opted to utilise link colours as per google ( I can only test google.com.au ) so if its different elsewhere then not sure ( couldnt be arsed going via proxy to test out .com version.
    The menu is pretty much spot on. I think. Without affecting upgradability by the user down the line.
    I actually, usually work within 4 colours on everything I do. But this was a taller order.

    Facebook highlight basic ui and schema to the n'th degree, which was easier to replicate. ( IMHO ) for a forum.

    Stack was harder, http://vanillaskins.com/stackoverflow-forum/ whilst they too use limited pallet, the array of different techniques and dovetailing into forum, is quite complex.. and still retaining the feel of the UX

    I may well take your advice, and re look at the link schema for google version, and play with current pallets.

    Appreciate your feedback mate :)

    There was an error rendering this rich post.

  • jspautschjspautsch ✭✭✭
    edited December 2011

    Hmmm, I agree with some of the concerns mentioned so far, but it's definitely "Google-inspired" at least, and really only needs some minor changes at this point. Some thoughts:

    1) The bar at the top is almost dead-on, nice.

    2) The dotted borders stand out to me, Google tends to use solid borders with very soft greys that are almost invisible. At the very least the border color is currently too dark.

    3) Those borders are also used to divide up the content areas, but right now you've used very seldom on the theme, you might be able to find a couple (but not too many) more uses for them.

    4) Whitespace could use some adjustments. Comments seem good but the asymmetrical padding on the discussions is bothering me. Additionally, your buttons could use more padding and slightly rounded corners.

    5) Try a bolded blue for the discussion titles, Google may use underline styles for mouseover but generally not just sitting there. Underlined links rarely look good, and I think the bolded blue would stand out more (see Google+ for examples, I would focus on Google+ specifically because the function and interface are very similar).

    Nice work!

  • jspautschjspautsch ✭✭✭

    Oooh I just noticed the expanding search bar, nifty.

    One last thought: The fact that the mouseover background color change is only visible on alternate items is a little odd and keeps distracting me.

  • 422422 MVP

    Hey thanks ,

    I will have a play this morning and twek it. Appreciate your time and effort.

    I had tried the blue... Looked a tad 80's. Lol

    I will look at radii whitespace and content definitions.

    Ste

    There was an error rendering this rich post.

  • 422422 MVP

    Ahhh. Well spotted.. I also nicked your idea on moz transform.

    Yer i was fiddling last night on hover effct and alt posts... Will fix that, annoys me too pmsl

    There was an error rendering this rich post.

  • 422422 MVP
    1. fixed thread hover effect
    2. fixed button radii
    3. fixed tags css and hover css
    4. changed title text color ( underline remains for now ) also bold, used blue that is within schema of +1

    ... will continue fiddling

    There was an error rendering this rich post.

  • jspautschjspautsch ✭✭✭
    edited December 2011

    422 said:
    Ahhh. Well spotted.. I also nicked your idea on moz transform.

    I did notice you only used the Firefox code -moz-transition: all 0.3s ease-in-out 0s;

    Here's the full code for cross-browser compatibility:

    -webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;

    IE, of course, is hopeless, and not even 9 supports transitions.

  • 422422 MVP

    Chhers , will implement now thankyou. Just doing keyword feature

    There was an error rendering this rich post.

Sign In or Register to comment.