Chrome Extension Stylebot

Stylebot editor

I use many web development chrome extensions every day to assist with my daily web responsibilities at the office. Meanwhile, I also use extensions to help with my browsing experience for general website surfing.

My most recent chrome extension that I discovered to help with my web browsing experiences is my new favorite extension called Stylebot.

Lets say there’s a particular website you visit often, but there’s just something about this site that drives you absolutely crazy from a user experience perspective. Using Stylebot, you can completely control these issues from both style and functionality for the purpose of only your local browser experience. Your changes do not affect the website or anyone else’s experience, but your own.

I’ve been thinking a lot about this extension and how I’d like to explain why or how it would be used and I thought I would share the original issue for me to use Stylebot. There was a button on my State Farm insurance website that didn’t make any sense to me. I would constantly click this particular link, which was designed to take me back to the original website, but it would never return me to it and it would send me in this bizarre loop. It was so frustrating that I was determined to find a solution and this is how I discovered Stylebot. I installed the extension, tested a few CSS tweaks to see if it would work and returned back to State Farm and fixed the link myself.

Also, I learned recently my personal browser homepage iGoogle which contains all my RSS feeds will no longer be available next year, because Google is retiring their widget functionality. I was very upset with this news to say the least and according to Google this is what they had to say. “With modern apps that run on platforms like Chrome and Android, the need for iGoogle has eroded over time, so we’ll be winding it down. Users will have 16 months to adjust or export their data.” For the record, I hate RSS news readers. I like visiting a functional website that contains everything I care about all on one page so I may read the headlines and then click to read. So, with that said, I’ve been on the hunt for an iGoogle alternative and I recently found that MSN has a competitive alternative that’s just as nice.

I’ve been using MSN’s version about a month now and found my biggest complaint about MSN is it’s incredibly unattractive and hard to read. This is where Stylebot comes to the rescue! (Note: I’ve been trial testing the use of Bing.com to earn Bing Rewards for the purpose of redeeming them for XBOX Live Points. This is how I discovered “my MSN” meanwhile it’s been a challenge for me to use Bing, because I’ve been trained to use google and expect google results, but the results I’m shown from Bing doesn’t seem to be as relavent.)

Check out my before and after results using Stylebot for my new personal widget homepage.

Before: There’s relatively no white space in between each RSS widget, there’s no visit/visited link colors therefore I don’t know which links I’ve clicked to ignore from reading again and there’s a blinking image in the search bar that’s really annoying. A typical microsoft product with no love or style. :)

Now check out post Stylebot changes and you can see I fixed all the issues I talked about above. I didn’t go overboard, I just improved the white space and removed the blinking animated gif in the search bar. More importantly, I inserted a visit/visited link color and I can visually see what is a new article versus a read article.

Those were just a few websites I’ve re-styled locally for my personal experience, but I’ve styled many others for myself mostly to have visit/visited style colors. It’s very annoying to visit a website with rotational content without any visual indication what I’ve previously read. Anyway, it’s a lot of fun to override or fix what I think are design flaws and I hope you find a real purpose for this extension just as much as I have as well.

These are the styles I inserted to control the look and feel of MSN should anyone want them:

#toolTipElement, .mymsn-tooltipinner {
display: none ;
}

.blv {
background: transparent url(http://col.stc.s-msn.com/br/mymsn/3171.00/modules/rss/bullet.gif) no-repeat 5px 6px ;
}

.mmrss-itemtitle {
display: block;
float: none;
font-family: arial,sans-serif;
font-size: 13px;
line-height: 20px;
overflow: hidden;
text-overflow: none;
white-space: normal;
width: 100%;
}

.mymsn-mod .mymsn-module h3, .mymsn-mod .mymsn-module h3 a, .mymsn-defaultcolor {
color: #4477a6 ;
}

.mymsn-mod .mymsn-module, .mymsn-defaultcolor {
background-color: whiteSmoke;
border-color: gainsboro;
}

.mymsn-mod, .mymsn-linkedimg a img {
border-color: gainsboro;
}

.mymsn-mod-nochrome {
display: none;
}

.mymsn-modcon {
border-style: none;
border-width: 0;
margin-bottom: 15px;
margin-left: 5px;
margin-right: 10px;
margin-top: 0;
}

A:visited {
color: #5a85ac ;
}

input.mymsn-textbox {
background-image: none ;
}

This entry was posted in ***, Chrome, Design, DIY, Google, Hacking, howto, HTML5/CSS3, Internet, Microsoft, User Experience. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>