Let's have a "Pimp My MobileRead" competition

[frabjous]

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:

• Firefox 3.5 with Stylish
• Some knowledge of CSS stylesheets (a tutorial here)
• Access to pretty fonts and pictures that can be freely shared (e.g. I've been using art.gnome.org and gnome-look.org, but no doubt there are better sources)
• Instructions from userstyles.org on coding for Stylish in particular.

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.

@-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;
}
}

[GraceKrispy]

I donʻt really understand much of anything you wrote after "addicted to the..." but I vote for one of these in the background:

[montsnmags]

Originally Posted by GraceKrispy

I donʻt really understand much of anything you wrote after "addicted to the..." but I vote for one of these in the background:

I wonder what they taste like...

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

[Sweetpea]

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

[Donnageddon]

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

[Gaurnim]

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:

@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;}

}

[kindlekitten]

Originally Posted by montsnmags

I wonder what they taste like...

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

having first hand experience from eating seagull eggs and salmon season bears.... you are SO not right!!!

Originally Posted by Donnageddon

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

you are so NOT right!!! I wish there were an emoticon for spewing... consuming fish eaters is just not a good thing as a rule.

Originally Posted by Gaurnim

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:

@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;}

}

so what was the end result?

[Sweetpea]

Originally Posted by kindlekitten

so what was the end result?

Too black and white for my taste! (oh, and it will also remove our awesome avatars!)

[Gaurnim]

Originally Posted by kindlekitten

so what was the end result?

Here it is :


(Hope you can see it, my work computer is having display problems)

[Gaurnim]

Originally Posted by Sweetpea

Too black and white for my taste! (oh, and it will also remove our awesome avatars!)

Re-reading my first post, I realize I wasn't very clear, but the idea is to be able to read MR as discreetly as possible, not to "pimp" the site.
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".

[Sweetpea]

Originally Posted by Gaurnim

Re-reading my first post, I realize I wasn't very clear, but the idea is to be able to read MR as discreetly as possible, not to "pimp" the site.
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".

I know, but I still find it too black & white... I never liked white backgrounds. And that's why I like the scheme of this site, it's rather discreetly coloured...


Oh, here's a first go on this site for me.


I think I'll be playing with colours later...

[frabjous]

Originally Posted by Sweetpea

Fyi: you don't need FF3.5, it also works on FF3.0

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.

Originally Posted by frabjous

...which allows you as a user to apply any custom CSS stylesheet...

I'm so annoyed with myself for writing "CSS stylesheet". That's like writing "ATM machine" or "PIN number".

Originally Posted by Gaurnim

Here it is :

Gee, why not put everything in Courier font, with Green text on a black background (à la Apple ][c.)

[Sweetpea]

Originally Posted by frabjous

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.

Bah, only the box shadows don't work... And I don't like those anyway

[pshrynk]

Originally Posted by montsnmags

I wonder what they taste like...



Cheers,
Marc

Chicken.

[GeoffC]

cotton wool balls