Stylish: Because we could design it better

Discussion in 'Web Design and Development' started by angelwatt, Nov 11, 2010.

  1. angelwatt, Nov 11, 2010
    Last edited: Nov 11, 2010

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #1
    Stylish is a Firefox add-on that lets you apply CSS to web sites. It's kind of fun to use and can be great for sites that you regularly visit. You can customize the look of it within your CSS ability. Since it only needs to work with Firefox you also get to try out newly supported CSS3 properties like gradient backgrounds.

    I've recently been working on tweaking the Mac Rumors site to give it a little more spice. The site recently had a back-end update from vBulletin, but the look stayed pretty much the same. I'm attaching some screen shots of how MR looks for me now. The gradients don't look great because I indexed the image to reduce the file size. My redesign still needs a bit of work, but thought others might like the idea.

    I'm also going to post the CSS I'm using. Feel free to post your own Stylish creations if you want to share. It doesn't have to just be for Mac Rumors.
    PHP:
    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document domain("forums.macrumors.com"),
      
    domain("www.macrumors.com"),
      
    domain("page2.macrumors.com"),
      
    domain("buyersguide.macrumors.com"),
      
    domain("spy.macrumors.com")
    {

    /* page background */
    body, .page{
     
    background#cef !important;
     
    background: -moz-linear-gradient(left#8ad, #cef) !important;
    }
    #content {
     
    background-colortransparent !important;
    }

    /* Fix adblock issue */
    #logotarget {
     
    topauto !important;
    }
    #logotarget a {
     
    width480px !important;
     
    height60px !important;
    }
    #mr_header, #header {
     /*background: #8ad !important;*/
     
    background: -moz-linear-gradient(top#cef, #8ad) !important;
    }
    #logotarget a:before {
     
    contenturl(http://media.macrumorslive.com/f/avatars/1.gif);
    }
    #logotarget a:after {
     
    positionabsolute;
     
    top5px !important;
     
    color#931 !important;
     
    font-size56px !important;
     
    content"MacRumors";
     
    text-shadow3px 3px 2px #fd8;
    }
    #logotarget a:hover:after {
     
    color#b31 !important;
    }
    /* front page */
    #mr_banner {
     
    height100px !important;
    }
    #comments, #menu {
     
    top110px !important;
     -
    moz-border-radius-topleft10px;
     -
    moz-border-radius-topright10px;
     
    bordernone !important;
    }
    #comments h2, #menu h2 {
     
    border-topnone !important;
     -
    moz-border-radius-topleft10px;
     -
    moz-border-radius-topright10px;
     
    background#008 !important;
     
    background: -moz-linear-gradient(top#008, #579, #008) !important;
    }
    /**/

    a:linkbody_alink {
     
    color#00c !important;
    }
    a:visitedbody_avisited {
     
    color#b44 !important;
    }
    a:hover {
     
    color#a00 !important;
     
    background#fff !important;
    }

    .
    tfoot a, .thead a, .vbmenu_control a {
     
    color#fff !important;
    }
    .
    tfoot a:hover, .thead a:hover, .vbmenu_control a:hover {
     
    color#faa !important;
     
    backgroundnone !important;
    }
    .
    thead, .story h3 {
     
    background#008 !important;
     
    background: -moz-linear-gradient(top#008, #579, #008) !important;
    }
    .
    alt2, .alt2Active {
     
    background#def !important;
    }
    .
    vBulletin_editor {
     
    background#008 !important;
     
    background: -moz-linear-gradient(top#008, #579) !important;
    }
    .
    tcat, .vbmenu_control {
     
    color#def !important;
     
    background#469 !important;
     
    background: -moz-linear-gradient(top#008, #579, #008) !important;
    }
    /* header links */
    .tcat a {
     
    color#def !important;
    }
    .
    tcat a:hover {
     
    color#900 !important;
    }
    /* user post box */
    #posts .page tr > td.alt2 {
     
    background: -moz-linear-gradient(left#cef, #8ad) !important;
     
    -moz-border-radius-bottomleft10px;
     
    bordernone !important;
    }
    #posts .page tr + tr[valign] > td.alt2 {
     
    -moz-border-radius-bottomleft0px;
    }
    /* quoted messages */
    #posts .page tr:first-child td.alt2 {
     
    padding.6em 1em !important;
     
    background#def !important;
     
    background: -moz-linear-gradient(left#fed 65%, #fdf) !important;
     
    bordernone !important;
     -
    moz-border-radius10px;
     -
    moz-box-shadow2px 2px 4px #d88;
    }
    #posts .page tr + tr + tr td.alt1 {
     
    -moz-border-radius-bottomright10px !important;
    }
    /* user post box link */
    #posts .alt2 div[id^=postmenu] a {
     
    color#c36 !important;
     
    font-weightbold !important;
    }
    /* post table */
    table[id^=post] {
     
    margin-bottom.3em !important;
     -
    moz-border-radius10px;
     -
    moz-border-radius-bottomleft10px;
     -
    moz-border-radius-bottomright10px;
     -
    moz-box-shadow2px 2px 4px #d33;
    }
    /* code tags */
    div[id^=post_messageprediv[id^=post_messagediv.alt2 {
     
    background: -moz-linear-gradient(left#dfd 65%, #fde) !important;
    }
    table[id^=posttd.tcat {
     -
    moz-border-radius-topleft10px;
    }
    table[id^=posttd td.tcat {
     -
    moz-border-radius-topleft0px;
     -
    moz-border-radius-topright10px;
    }
    /* top user box */
    .page br table[align=center].tborder {
     -
    moz-box-shadow2px 2px 3px #733, -2px -2px 3px #733, 2px -2px 3px #733, -2px 2px 3px #733;
    }
    .
    page br table[align=center].tborder .navbar strong {
     
    text-shadow2px 2px 0px #fb8;
    }
    .
    page table.tborder tr td[width].alt1,
    .
    page table.tborder tr td.alt2 {
     
    background: -moz-linear-gradient(top#fee, #fce) !important;
    }
    .
    page #postsdiv table.tborder tr > td.alt2,
    .page table.tborder tbody tr td.alt2 {
     
    background: -moz-linear-gradient(top#ffe, #fee) !important;
    }

    #mr_header a, #mr_header li,
    #header a, #header li {
     
    background-imagenone !important;
    }
    #mr_header li, #header li {
     
    background#008 !important;
     
    border1px solid #558 !important;
     
    border-bottomnone !important;
     -
    moz-border-radius-topleft10px;
     -
    moz-border-radius-topright10px;
    }
    #mr_header a, #header a, .story h3 a {
     
    color#fff !important;
    }
    #mr_header a:hover, #header a:hover, .story h3 a:hover {
     
    color#f77 !important;
     
    backgroundnone !important;
    }
    #mr_header br, #header br, .titlebar_top {
     
    displaynone;
    }
    .
    story h3 {
     
    padding-top3px !important;
     -
    moz-border-radius-topleft10px;
     -
    moz-border-radius-topright10px;
    }
    .
    vbmenu_control2#navbar {
     
    background-imagenone !important;
     
    background#008 !important;
     
    background: -moz-linear-gradient(top#008, #579, #008) !important;
     
    color#fff !important;
    }
    .
    vbmenu_control2 a#navbar a {
     
    color#fff !important;
    }
    .
    vbmenu_control2 a:hover#navbar a:hover {
     
    color#f77 !important;
     
    backgroundnone !important;
    }

    .
    pagenav td {
     
    padding!important;
    }
    .
    pagenav .alt1 a, .pagenav .alt2 span, .pagenav .vbmenu_control {
     
    displayblock;
     
    padding2px 4px !important;
    }
    .
    pagenav .alt1 a:hover {
     
    color#fff !important;
     
    background#4A6593 !important;
    }

    }
     

    Attached Files:

  2. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #2
    No offense, but there's no way I could look at that for more than a minute or two.

    However, I do like the idea of Stylish and customizing websites. Do you know if there's something like that for Safari?

    jW
     
  3. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Not that I've seen. The closest is using the custom user script, but that's not as integrated and requires restarting Safari.
     
  4. ezkimo macrumors regular

    Joined:
    Sep 12, 2002
    #4
    Making safari extensions is actually very simple -- I have a couple custom extensions for sites I visit regularly to fix look-and-feel issues. Just need to know CSS.
     
  5. miknos macrumors 6502a

    miknos

    Joined:
    Mar 14, 2008
  6. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #6
    Have you tried the safari plugin, it makes the home page very clean.
     
  7. miknos macrumors 6502a

    miknos

    Joined:
    Mar 14, 2008
    #7
    Something like this? I removed both columns since (for me) it's useless.
     

    Attached Files:

  8. Blue Velvet Moderator emeritus

    Joined:
    Jul 4, 2004
    #8

    Holding back, but putting my name to my words here, instead of feeding back behind the scenes unbeknownst to you, I cannot begin to express how much I genuinely hope and trust that the final outcome will look a great deal better than this — by a substantial degree — from the typography, graphics, placement, proportion... to the use of colour.

    I realise that this isn't a thread specifically about MR and that it's about this CSS script, but seeing this direction fills me with considerable alarm, I'm afraid to say.
     

Share This Page