Did you ever want to modify the way a web site looks in your browser? Well, now you can. The following tutorial is intended for Firefox users only. Other browsers may provide similar features. I would strongly recommend upgrading to the latest version of Firefox, i.e. Firefox 5, before following the “recipe” below. The process will work fine for earlier versions but will produce slight variations.

Before providing a step-by-step guide to enhance the way myFDL looks in your browser, allow me to briefly explain a few of the design objectives I’ve tried to achieve. First, on myFDL, the right-hand column is just not “user friendly”. There are two key problems. I frequently view the myFDL page to look for new posts or new replies. There’s just too much unnecessary “bulk” before the “recommended” and “recent” posts indices are displayed.

I’ve seen the “Become a member” box. I don’t need to see it every time I view the page. There’s a “Become a member” button at the top of the page and I don’t need a big box cluttering the index column. I’m also offered a box to login or logout. Again, there’s a perfectly good button at the top of the page that already handles that function. Again, more clutter. And, on the subject of wasted space, I don’t need to see the “About myFDL” box every time I view the page. There’s a perfectly good “About Us” link (although it’s broken) at the top of the page.

So, one styling change contained in the script below is to get rid of these boxes.

The other change I made was to make the “recommended” and “recent” indices more readable. The script (see below) uses one alternating color (i.e. every other post) for recommended posts and a slightly different alternating color for recent posts. It just makes the page a little easier to read.

A number of other minor changes were made to improve the readability of myFDL. Look, I know it’s the content that’s important but I spend a fair amount of time on myFDL and making the place look a little better couldn’t hurt.

As I said above, before you begin, please consider updating your browser to Firefox 5.

You can download a copy of Firefox 5 by clicking here.

Once that’s done, follow the “recipe” below to see an upgraded version of myFDL. If you need help or want to learn more, just ask.

Ready? Here are step-by-step directions.

Step One: install the Stylish “add-on”

a. Click this link to download and install the Stylish add-on.
b. You’ll probably need to restart your browser for the new add-on to take effect. Return to this post after you’ve completed the installation.

Step Two: initiate a new “style” for myFDL

a. In Firefox, click the “Tools” menu item, then click “Add Ons”, then click “Extensions”
b. You should find the “Stylish” add-on listed. Click the “Options” button for “Stylish”
c. Click the “Write New Style” button
d. Enter a name (e.g. myFDL) in the “Name” box

Step Three: enter the styling attributes for myFDL

a. Copy and paste the following code (see below) into the main window of the “New Style” box

Note: copy and paste everything starting with “@namespace” through the line that reads “***** myFDL script ends here *****”

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(“my.shadowproof.wpengine.com”)

{

/* change the background color (or #efda99) */
body {background-color: #fffbcf !important; }

/* enlarge the opening post and make the print bolder */
.postContent {font-size: 1.2em !important; color:#000070 !important; }

/* enlarge all replies and make the print bolder */
.comment-content {font-size: 1.1em !important; color:#000070 !important; }

/* change the anchor tag color on the left side to offset it better from the text color */
div.padder a {color:#0000f0 !important; }
td.postHeader a {color:#0000b0 !important; }

/* remove all “Share” buttons (e.g. Facebook) */
div.share-buttons {display:none !important; }

/* Recommended Diaries label color */
div#RecommendedDiariesWidgetBody {color: blue !important; }

/* Recommended Diaries link color */
div#RecommendedDiariesWidgetBody a {color: navy!important; }

/* Recent Diaries label color */
div#RecentDiariesWidgetBody {color: blue !important; }

/* Recent Diaries link color */
div#RecentDiariesWidgetBody a {color: navy!important; }

/* create alternating background color for odd-numbered Recommended and Recent Diaries (#dae2eb) */
div#RecommendedDiariesWidgetBody li:nth-child(odd) {background-color: #bad2eb !important; }
/* recent choices color #def2e9 #e1f4f7 */
div#RecentDiariesWidgetBody li:nth-child(odd) {background-color: #eef2f9 !important; }

/* draw a dotted box around each Recommended Diary */
div#RecommendedDiariesWidgetBody li {border: 1px dotted navy !important; border-bottom: 0px !important; padding-left: 8px !important; padding-right: 8px !important; }

/* add a bottom border under the last Recommended Diary */
div#right_column li:nth-child(10) {border-bottom: 1px dotted navy !important; }

/* remove the top border from item 11 to prevent double border on 11th Recent Diary */
div#right_column li:nth-child(11) {border-top: 0px !important; }

/* draw a dotted box around each Recent Diary */
div#right_column li {border: 1px dotted navy !important; border-bottom: 0px !important; padding-left: 8px !important; padding-right: 8px !important; }

/* add a bottom border under the last Recommended Diary */
div#right_column li:nth-child(25) {border-bottom: 1px dotted navy !important; }

/* move comment “Reply” links up to be closer to the reply they pertain to */
div.comment-options {margin-top: -10px !important; }

/* add space before replies to separate them better from the previous reply */
div.comment-meta {margin-top: 50px !important; border: 1px solid blue !important; }

/* change the background color of the section headers and widen them to the column width #0188c0 */
div#right_column span.boxTitle {background-color: #45a4d5 !important; width: 320px !important; margin-left: -5px !important; }

/* change the background color of the toolbox header and widen it to the column width #0188c0 */
div#right_column .header {background-color: #45a4d5 !important; width: 330px !important; margin-left: -5px !important; }

/* change the background color of the toolbox label #0188c0 */
div#right_column h3 {background-color: #45a4d5 !important; padding-top: 2px !important; }

/* change the background color of the myFDL box label */
span.boxTitle {background-color: #45a4d5 !important; }

/* make the font bold on the navigation buttons */
a#user-activity {font-weight: 900 !important; color:#000030 !important; }
a#user-profile {font-weight: 900 !important; color:#000030 !important; }
a#user-blogs {font-weight: 900 !important; color:#000030 !important; }
a#user-friends {font-weight: 900 !important; color:#000030 !important; }
a#user-groups {font-weight: 900 !important; color:#000030 !important; }
a#user-settings {font-weight: 900 !important; color:#000030 !important; }

/* eliminate the top border above the section headers */
div.boxHdr {border-top:0px !important; }

/* eliminate wasted space above the right column */
div#right_column {margin-top:0px !important; }

/* removes the login and logout boxes from right-hand column */
div#right_column .box {display:none !important; }

/* restore toolbox at top of right-hand column */
div#right_column .tools {display:inline !important; }

/* remove gray box around “My Stuff” and “Explore” */
div.label {background-color: white !important; font-weight:500 !important; color: navy !important; }

/* remove the “Become a member” box */
div[style=”clear: both; display: block; width: 310px; height: 280px; margin: 10px auto; padding: 0px; position: relative; top: 0px; right: 0px; background-image: url(‘http://static1.shadowproof.wpengine.com/1/files/2011/04/widget-bg5.png’); background-repeat: no-repeat; background-position: bottom; border: 1px solid #cccccc;”] {display:none !important; }

/* remove the FDL merchandise graphic */
img[src=”http://static1.shadowproof.wpengine.com/45/files/2011/03/fdlmerch_240x2501.png”] {display:none !important; }

/* remove the “About MyFDL box */
div[style=”padding: 10px; margin: 10px 0px; font-family: arial; font-size: 10pt; text-align: left; font-weight: normal; border: 1px solid #cccccc;”] {display:none !important; }

/* add styling to the “Special Coverage” box between Recommended and Recent */
div[style=”width: 330px; padding: 0px; margin: 0px;”] {border-width:2px !important; border-style:solid !important; border-color:navy !important; margin-bottom: 15px !important; margin-left:-8px !important; padding-left: 4px !important; }

/* removes the Facebook box in lower-right corner */
iframe[style=”border:none; overflow:hidden; width:300px; height:255px;”] {display:none!important; }

/* make the “last activity” box wider */
div.label {height:16px !important; padding-top:4px !important; padding-left:4px !important; }
div.line {width:400px !important; }
}

@-moz-document url-prefix(“http://shadowproof.wpengine.com”)

{

/* the following styles affect FDL but not myFDL */

/* create alternating background color for odd-numbered Recommended Diaries */
.boxBodyFill1#RecommendedDiariesWidgetBody li:nth-child(odd) {background-color: #dae2eb !important; }

/* draw a dotted box around Recommended Diaries */
.boxBodyFill1#RecommendedDiariesWidgetBody li {border: 1px dotted navy !important; border-bottom: 0px !important; padding-left: 8px !important; padding-right: 8px !important; }
.boxBodyFill1#RecommendedDiariesWidgetBody li:nth-child(10) {border-bottom: 1px dotted navy !important; padding-left: 8px !important; padding-right: 8px !important; }

}

@-moz-document url-prefix(“http://my.shadowproof.wpengine.com/wp-login.php”)

{
/* the following style affects the myFDL login page */

/* restore background color to white */
body.login {background-color: #f9f9f9 !important; }
}

/* ***** myFDL script ends here ***** */

b. Click “Save”

If everything worked OK, you’ve just installed your new style for myFDL. View the myFDL page to see the changes. If you don’t like the changes, no problem. If there’s interest, I’ll add replies to this thread that will explain how to modify the script or how to get rid of the style completely to return to the original myFDL style.

I’m no artist. I’ve made changes based on my own preferences. I build data-driven web sites for a living. I’m good with code and databases and applications. Styling is secondary to what I do. Once you see what’s going on here, you may be able to enhance the script I’ve provided. Perhaps we’ll get some help from myFDL’s artists or web page designers. That would be great.

Let me know what you think and feel free to ask for help or share other styling ideas.

welshTerrier2

welshTerrier2

4 Comments