11-17-2009, 12:17 AM | #1 |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
Let's have a "Pimp My MobileRead" competition
Let's face it, the standard MobileRead theme is a little boring, and if you waste... err... spend a lot of time here, you occasionally want something different.
My solution? A plethora of new viewing themes. I confess I've become addicted to the Firefox (3.5) Stylish Plugin, which allows you as a user to apply any custom CSS stylesheet to any webpage. (There are ways to do something similar for other browsers too, but this is pretty easy to use.) So you get custom colors, fonts, backgrounds, etc. I think we need a competition to see who can do the best custom stylesheet for MobileRead. I want options people! Things you need:
Feel free to enter the competition as many times as you wish. When we reach a critical mass, perhaps I'll put up a survey to decide the winner, and the time frame for deciding. To get us started, I've come up with the following theme, which might be too busy, but hey, it's my first attempt. Screenshot giving the basic look: Sort of a blue-green theme, with significant use of transparency/opacity settings and drop shadows. Right now, I call external sites for the new logo and background, but courtesy (and speed) suggest you ought to download these locally and link using file:// rather than http:// I'm also using the fonts Fontin and URW Gothic L, both of which are available for free, so you might as well install them rather than my embedding them. Fontin URW Fonts Finally, here's the CSS. I've inserted comments, which may make it easier for others to make their themes by modifying mine if they so wish. (Otherwise, you have to study the source code, etc.) I haven't tested this much, so I may need to make changes down the road. Code:
@-moz-document domain('mobileread.com') { /* Sets background image -- it would be better to download this and link locally using file:// .. , attaching it makes it not scroll, delete if you'd rather it scrolled */ body { background: url('http://gnome-look.org/CONTENT/content-files/115070-Bubbles1920x1200.jpg') !important; background-attachment: fixed !important; } /* Set background and border of table holding main content */ } .tborder { background: transparent !important; border: none !important; } /* The menu at the very top of the page */ .top_menu_left a { color: LightGreen !important; font-family: Fontin !important; font-size: 120% !important; } /* The MR logo replacement -- please download and use locally */ #logo_image { height: 0 !important; width: 0 !important; /* these numbers match the new image's dimensions */ padding-left: 630px !important; padding-right: 0px !important; padding-top: 100px !important; background: url('http://people.umass.edu/phil335/logo.png') no-repeat !important; } /* The menu right under the logo */ .vbmenu_control { opacity: .7; font-family: Fontin !important; font-size: 125% !important; } /* Such a menu item with cursor over it */ .vbmenu_control:hover { opacity: 1 !important; text-shadow: 1px 1px black; -moz-box-shadow: 5px 5px 5px; } /* The page under the menu */ .page { background: transparent !important; } /* Roughly half the menu items */ .alt1 { font-family: 'URW Gothic L' !important; opacity: 0.85; } /* with a cursor over it */ .alt1:hover { -moz-box-shadow: 5px 5px 5px blue; opacity: 1 !important; } /* The other half */ .alt2 { font-family: 'URW Gothic L' !important; opacity: 0.65; } /* ...with cursor over them */ .alt2:hover { -moz-box-shadow: 5px 5px 5px blue; opacity: 1 !important; } /* Emphasized text */ strong { font-family: 'URW Gothic L' !important; font-size: 120% !important; } /* Small text */ .smallfont { font-family: 'URW Gothic L' !important; font-size: 100% !important; } /* Subheadings */ h3 { font-family: Fontin !important; color: white !important; font-size: 140% !important; } /* News item on homepage */ .entry { background-color: darkblue !important; opacity: .55 !important; color: white !important; font-family: 'URW Gothic L' !important; } /* Paragraphs in news items */ .entry p { font-family: 'URW Gothic L' !important; text-shadow: 0px 1px 1px black; } /* links in news items */ .entry a { font-family: 'URW Gothic L' !important; color: yellow !important; } /* News link with cursor over them */ .entry a:hover { color: DarkRed !important; background-color: white !important; } /* Quote within news item */ .entry blockquote p { color: PaleGreen !important; } /* Comment count under news item */ .foot { background-color: lightblue !important; opacity: 0.6 !important; } /* link in comment count */ .foot a { color: purple !important; } /* link in comment count with cursor */ .foot a:hover { color: DarkGreen !important; text-decoration: underline !important; } /* Category heading on forum list */ .tcat { font-family: Fontin !important; font-size: 120% !important; text-shadow: 1px 1px 1px black; } /* Forum name box in forum list */ .alt1Active { opacity: .8 !important; } /* Forum name box with cursor over */ .alt1Active:hover { opacity: 1 !important; -moz-box-shadow: 5px 5px 5px blue; } /* Links in forum name boxes */ .alt1Active a { font-family: 'URW Gothic L' !important; } /* Column heading in tables */ .thead { font-family: 'URW Gothic L' !important; font-size: 90% !important; text-shadow: 1px 1px 1px white; } /* Subforum links */ li a { font-family: 'URW Gothic L' !important; } /* Keeps chat window opaque */ #collapseobj_forumhome_chat tr td.alt1 { opacity: 1 !important; } /* Navigator bar at top of particular forum */ .navbar a { font-family: 'URW Gothic L' !important; font-size: 110% !important; } /* Actual forum posts */ .vb_postbit { font-family: 'URW Gothic L' !important; font-size: 110% !important; } /* Lists */ ul li { font-family: 'URW Gothic L' !important; font-size: 110% !important; } /* links */ .vb_postbit a { font-family: 'URW Gothic L' !important; color: LightBlue !important; text-shadow: 1px 1px black; font-size: 110% !important; } .vb_postbit a:hover { color: green !important; } /* Quotations within posts */ .vb_postbit div { background-color: Gray !important; color: white !important; font-size: 90% !important; text-shadow: 1px 1px black; } /* Option lists, etc., near input boxes */ legend { font-family: 'URW Gothic L' !important; } label { font-family: 'URW Gothic L' !important; } /* New post input box */ textarea { font-family: 'URW Gothic L' !important; } /* Buttons and drop-down lists */ input { font-family: 'URW Gothic L' !important; } select { font-family: 'URW Gothic L' !important; } /* Panel wrapper on post submit page */ .panelsurround { background: transparent !important; } /* Post submit panel */ .panel { opacity: .85 !important; } /* Options underneath, etc. */ fieldset div { font-family: 'URW Gothic L' !important; } /* Various stuff on other pages */ fieldset table tr td { font-family: 'URW Gothic L' !important; } #group_description { font-family: 'URW Gothic L' !important; } /* code boxes */ pre.alt2 { text-shadow: none !important; font-family: monospace !important; } } /* The stuff below covers the live chat window on bottom of forums page */ @-moz-document url-prefix('https://www.mobileread.com/forums/chat.php') { body { background: black !important; color: cyan !important; } .time { color: yellow !important; } span[style="font-weight: normal;"] { color: pink !important; } } Last edited by frabjous; 11-24-2009 at 02:02 PM. |
11-17-2009, 01:33 AM | #2 |
It's Dr. Penguin now!
Posts: 3,909
Karma: 4705733
Join Date: Jan 2009
Location: (USA)
Device: iPad mini, Samsung Note 3, Sony PRS-650 (rarely used now)
|
I donʻt really understand much of anything you wrote after "addicted to the..." but I vote for one of these in the background:
|
Advert | |
|
11-17-2009, 02:20 AM | #3 | |
Grand Sorcerer
Posts: 10,155
Karma: 4632658
Join Date: Nov 2007
Device: none
|
Quote:
I'll say, frabjous, that I'm quite satisfied with the way MR comes standard (noting that I'm also fine with the way the GMail web-interface looks ), but I do like what you've done with your place, and I'd enjoy seeing what others do with their own decor too. Cheers, Marc |
|
11-17-2009, 03:30 AM | #4 |
Grand Sorcerer
Posts: 9,707
Karma: 32763414
Join Date: Dec 2008
Location: Krewerd
Device: Pocketbook Inkpad 4 Color; Samsung Galaxy Tab S6
|
Fyi: you don't need FF3.5, it also works on FF3.0
I've been using stylish for another forum when they decided a dark background with light lettering was much better... Couldn't read anything anymore on my laptop monitor... I rather like the colours on this forum, easier to hide when somebody is watching over your shoulders! But maybe it's time to play around a bit, the blue is getting a bit boring |
11-17-2009, 04:19 AM | #5 |
Now you lishen here...
Posts: 2,494
Karma: 479498
Join Date: Jul 2007
Location: Seattle-ish
Device: Sony PRS-650. Kobo Touch, Kindle Fire
|
I'm with Marc on this one, penguins are cute to be sure, but I bet they taste like cotton candy. Rare, forbidden cotton candy, but delicious none the less.
While "CSS stylesheet"'s may pay the bills, it is the sweet penguin love that you crave. It is the <'http://gnome-look.org/CONTENT/content-files/HOT PENGUIN ON PENGUIN/relax> that you come back for. AM I right? You know I am. GRRRRR |
Advert | |
|
11-17-2009, 05:49 AM | #6 |
Final Five n°42
Posts: 789
Karma: 3599
Join Date: Feb 2008
Location: Lyon, France
Device: Cybook Gen3
|
I went in the opposite direction in my use of Stylish, as I tried to render the MR site as discreet as possible.
Use first the following generic style : http://userstyles.org/styles/1635 Then add this specific style: Code:
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("mobileread.com") { /* Display small images in the text */ img[class=inlineimg] {display:inline !important;} /* Display links in black rather than in white on white */ .vbmenu_control a:link, .vbmenu_control a:visited, .tcat a:link, .tcat a:visited {color:black !important;} /* Display reply buttons */ a[href^="newreply.php"] img {display:inline !important;} /* Display EDIT button */ a[href^="editpost.php"] img {display:inline !important;} /* Display the new thread button */ a[href^="newthread.php"] img {display:inline !important;} /* Make the current page number more visible */ td[class="alt2"] span[class="smallfont"] strong {color:grey!important;} /* Display the control panel text as white on black */ span.smallfont {color:black !important;} td.tcat {color:black !important;} .tfoot a:link, .tfoot_alink {color:black !important;} } |
11-17-2009, 06:20 AM | #7 | |||
Professional Adventuress
Posts: 13,368
Karma: 50260224
Join Date: Sep 2009
Location: The Olympic Peninsula on the OTHER Washington! (the big green clean one on the west coast!)
Device: Kindle, the original! Times Two! and gifting an International Kindle
|
Quote:
Quote:
Quote:
|
|||
11-17-2009, 06:34 AM | #8 |
Grand Sorcerer
Posts: 9,707
Karma: 32763414
Join Date: Dec 2008
Location: Krewerd
Device: Pocketbook Inkpad 4 Color; Samsung Galaxy Tab S6
|
|
11-17-2009, 06:37 AM | #9 |
Final Five n°42
Posts: 789
Karma: 3599
Join Date: Feb 2008
Location: Lyon, France
Device: Cybook Gen3
|
|
11-17-2009, 06:43 AM | #10 | |
Final Five n°42
Posts: 789
Karma: 3599
Join Date: Feb 2008
Location: Lyon, France
Device: Cybook Gen3
|
Quote:
The result is a near text-like browsing, with only the most necessary images (buttons mainly). That's what I meant by "I went in the opposite direction". |
|
11-17-2009, 07:12 AM | #11 | |
Grand Sorcerer
Posts: 9,707
Karma: 32763414
Join Date: Dec 2008
Location: Krewerd
Device: Pocketbook Inkpad 4 Color; Samsung Galaxy Tab S6
|
Quote:
Oh, here's a first go on this site for me. I think I'll be playing with colours later... Last edited by Sweetpea; 11-17-2009 at 07:19 AM. |
|
11-17-2009, 07:44 AM | #12 | |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
The plugin does, but my stylesheet doesn't (or not completely anyway). I was mainly recommending it, since it increases our possible levels of pimpitude.
Quote:
Gee, why not put everything in Courier font, with Green text on a black background (à la Apple ][c.) |
|
11-17-2009, 08:28 AM | #13 |
Grand Sorcerer
Posts: 9,707
Karma: 32763414
Join Date: Dec 2008
Location: Krewerd
Device: Pocketbook Inkpad 4 Color; Samsung Galaxy Tab S6
|
|
11-17-2009, 08:48 AM | #14 |
Beepbeep n beebeep, yeah!
Posts: 11,726
Karma: 8255450
Join Date: Apr 2008
Location: La Crosse, Wisconsin, aka America's IceBox
Device: iThingie, KmkII, I miss Zelda!
|
|
11-17-2009, 09:02 AM | #15 |
Chocolate Grasshopper ...
Posts: 27,600
Karma: 20821184
Join Date: Mar 2008
Location: Scotland
Device: Muse HD , Cybook Gen3 , Pocketbook 302 (Black) , Nexus 10: wife has PW
|
cotton wool balls
|
Tags |
css, firefox, skins, stylish, themes |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Real competition with the jb/jbl... Augen's "The Book" | jblitereader | Ectaco jetBook | 6 | 06-10-2010 03:23 PM |
Are you waiting for the "official mobileread verdict" on the Kindle DX before buying? | Roy White | Amazon Kindle | 181 | 11-15-2009 08:20 PM |
Pimp My Read, Ep. 2: "Nobody Belongs Here More Than You" by Miranda July | jeremy_ahn | Reading Recommendations | 4 | 10-06-2009 07:14 AM |
Pimp My Read, Episode 1: "The Halo Rule" by Teresa Leo (pimped by Jeremy Ahn) | jeremy_ahn | Reading Recommendations | 1 | 10-06-2009 05:06 AM |
Mobileread wins "Best Technology Web Site" award | Colin Dunstan | Announcements | 3 | 01-04-2006 10:51 AM |