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