Stylish: Because we could design it better

[angelwatt]

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.

@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-color: transparent !important;
}

/* Fix adblock issue */
#logotarget {
 top: auto !important;
}
#logotarget a {
 width: 480px !important;
 height: 60px !important;
}
#mr_header, #header {
 /*background: #8ad !important;*/
 background: -moz-linear-gradient(top, #cef, #8ad) !important;
}
#logotarget a:before {
 content: url(http://media.macrumorslive.com/f/avatars/1.gif);
}
#logotarget a:after {
 position: absolute;
 top: 5px !important;
 color: #931 !important;
 font-size: 56px !important;
 content: "MacRumors";
 text-shadow: 3px 3px 2px #fd8;
}
#logotarget a:hover:after {
 color: #b31 !important;
}
/* front page */
#mr_banner {
 height: 100px !important;
}
#comments, #menu {
 top: 110px !important;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 border: none !important;
}
#comments h2, #menu h2 {
 border-top: none !important;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 background: #008 !important;
 background: -moz-linear-gradient(top, #008, #579, #008) !important;
}
/**/

a:link, body_alink {
 color: #00c !important;
}
a:visited, body_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;
 background: none !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-bottomleft: 10px;
 border: none !important;
}
#posts .page tr + tr[valign] > td.alt2 {
 -moz-border-radius-bottomleft: 0px;
}
/* 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;
 border: none !important;
 -moz-border-radius: 10px;
 -moz-box-shadow: 2px 2px 4px #d88;
}
#posts .page tr + tr + tr td.alt1 {
 -moz-border-radius-bottomright: 10px !important;
}
/* user post box link */
#posts .alt2 div[id^=postmenu] a {
 color: #c36 !important;
 font-weight: bold !important;
}
/* post table */
table[id^=post] {
 margin-bottom: .3em !important;
 -moz-border-radius: 10px;
 -moz-border-radius-bottomleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -moz-box-shadow: 2px 2px 4px #d33;
}
/* code tags */
div[id^=post_message] pre, div[id^=post_message] div.alt2 {
 background: -moz-linear-gradient(left, #dfd 65%, #fde) !important;
}
table[id^=post] td.tcat {
 -moz-border-radius-topleft: 10px;
}
table[id^=post] td + td.tcat {
 -moz-border-radius-topleft: 0px;
 -moz-border-radius-topright: 10px;
}
/* top user box */
.page br + table[align=center].tborder {
 -moz-box-shadow: 2px 2px 3px #733, -2px -2px 3px #733, 2px -2px 3px #733, -2px 2px 3px #733;
}
.page br + table[align=center].tborder .navbar strong {
 text-shadow: 2px 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-image: none !important;
}
#mr_header li, #header li {
 background: #008 !important;
 border: 1px solid #558 !important;
 border-bottom: none !important;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
}
#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;
 background: none !important;
}
#mr_header br, #header br, .titlebar_top {
 display: none;
}
.story h3 {
 padding-top: 3px !important;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
}
.vbmenu_control2, #navbar {
 background-image: none !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;
 background: none !important;
}

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

}

 

[Mal]

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

 

[angelwatt]

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

Not that I've seen. The closest is using the custom user script, but that's not as integrated and requires restarting Safari.

 

[ezkimo]

Not that I've seen. The closest is using the custom user script, but that's not as integrated and requires restarting Safari.

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.

 

[miknos]

You can do it with GlimmerBlocker. And you can use css styles from userstyles.

 

[Cabbit]

Have you tried the safari plugin, it makes the home page very clean.

 

[miknos]

Have you tried the safari plugin, it makes the home page very clean.

Something like this? I removed both columns since (for me) it's useless.

 

[Blue Velvet]

I've recently been working on tweaking the Mac Rumors site to give it a little more spice.

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.