Don’t Like RBC New Redesign? Stylish Can Fix That

RBC Redesign

If you are a RBC customer and use their online banking, you have probably already had the pleasure of the newly redesigned online interface. There is some positive, and negative feedback going around about it, and for some very good reasons. For those of you not aware, here is what the website currently looks like:

Main page when logged in RBC

Main page when logged in RBC

As you can see from the picture above, it is pretty hard to quickly distinguish what you are looking at. Previously, everything was presented in a way that was easy to follow and read. Now, things take up a whole lot of room, and are not separated nicely. Applying Stylish to the page, I was able to easily make the page more readable, like so:

Custom theme with stylish applied.

Custom theme with stylish applied.

You will notice each section is separated better now. The type of account is a different color, and the accounts within the section alternate colors. Having these simple changes makes the page unbelievably easier to read.

Next, is the statement page. Here is what it now looks like:

RBC Redesigned Statements

RBC Redesigned Statements

Holy crud. What is this mess? And why can I only fit a handful of transactions on a single page. This is ugly and hard to quickly read. Stylish to the rescue again (don’t worry, I will go into more detail about Stylish after and how you can use it). Here is what the page looks like using my custom Stylish code:

RBC Statement After Stylish

RBC Statement After Stylish

Well then, that is way better! Look how many more transactions we can fit on the page by eliminating the unnecessary white-space. It is super easy to distinguish between transactions with alternating colors, and lastly the section of statements (Authorized vs. Posted) are easy to spot too.

Would you believe it if I told you this only took a few lines of code to fix? Stylish to the rescue!

What Is Stylish

Stylish is a plugin for your browser that allows you to make custom themes for webpages. In our case, RBC.

You can download Stylish for Firefox here: https://addons.mozilla.org/en-US/firefox/addon/stylish/

You can download Stylish for Chrome here: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

 

Once installed, you can add the custom RBC theme by visiting this link: https://userstyles.org/styles/123591/rbc-redesign-ed

Installing Stylish On Chrome

Click here and click Add To Chrome to install Stylish.

Add Stylish To Chrome

Add Stylish To Chrome

Accept Stylish Information

Click add extension button to continue.

Accept Stylish Plugin

Accept Stylish Plugin

You should now see the Stylish symbol in the top-right hand corner of Chrome. If you don’t you might have to change your plugin/extension settings so Stylish shows in the area shown below.

Verify Stylish is installed by looking for the Stylish symbol

Verify Stylish is installed by looking for the Stylish symbol

Install New RBC Theme To Stylish

Click here to go to the Stylish theme that is demoed in the earlier pictures. Click the Install with Stylish button.

Add Stylish Theme

Add Stylish Theme

Accept Theme With Stylish

If you get a confirmation menu, click OK to install the theme.

Verify Stylish Theme Install

Verify Stylish Theme Install

Try Stylish With RBC

That is it, you are done! Next time you log into your RBC account, you will notice the changes. If you were already logged in, close your browser and open a new one. Log in again to see the changes.

You should see a big difference in your RBC experience, all thanks to Stylish.

RBC Before and After Stylish

RBC Before and After Stylish

More Information About Stylish And The RBC Redesign

This style should only apply to RBC once logged in. If you are unhappy with how RBC currently looks, this is one way to fix a portion of how RBC looks. I know it helped me tremendously when looking at my statements.

For those curious, here is what I used to “fix” the newly RBC Redesigned site.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("royalbank.com") {
tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #F6F4EF}
td{padding: 0px 0px}
tr{padding: 0px 0px}
.genericTable .tableBody > tr > td, .genericTable .tableBody > tr > th {padding: 0px 0px}
tr.tableHeaderRow{background: #CCD4E5}
div.accTableHeader{background: #CCD4E5}
*{font-family: Arial,Helvetica,sans-serif;}
}

 

It is worth noting, this does not solve all the issues I have with the new RBC Redesign, but it is a start. If I make more changes, I will create an update. There are plenty of things I would like to change, but some of it is not worth it to me. Having the changes above were my biggest pet-peeves and I am happy with just those changes.

 

Comments, suggestions, do you like the RBC Redesign, what do you like, what don’t you like? Post below!

You may also like...

Leave a Reply

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