How to create a "Work Mode" version of the site in Firefox

woozy

Active Member
Essentially, this uses some custom CSS to remove elements of the site and rearrange other elements to make the site look like the BBC news site so that it's less likely to raise eyebrows if someone walks past your desk. If you know what you're doing you can change the theme to make it look like almost any site, by stealing their header.

Ld1uGpy.png

I've created this to work on Firefox because that's my leased used browser so no one else at work is likely to ever open it. I'm sure there are ways to do this on other browsers.

To do this.

  • Open firefox.
  • In the URL bar type about:support
  • hit return
  • There should be an entry called 'Profile Folder'
  • Next to that will be a button which says "Show Folder" "Open Directory" "Open Containing Folder" or "Show in Finder".
  • Click that button
  • A folder should open. In that folder should be a folder called 'chrome'. Open that.
  • Within the 'chrome' folder there should be a file called userContent.css
  • Open that file in a text editor like Notepad.
  • Paste this into the file

@-moz-document domain(followfollow.com) {

#logo {
width: 1195px !important;
height: 156px !important;
display:block !important;
background-image: url("https://i.imgur.com/WGSMI4f.png") !important;
background-color: #ffffff !important;
background-size: 1195px 156px !important;
}
.sidebar, .titleBar, .avatarHolder, .avatarContainer, .crumbs, .breadBoxTop, #logo a, .footerLegal {
display: none !important;
}
.SelectQuotable .titleBar {
display: block !important;
}
.mainContent {
margin-right: 0px !important;
}
.navTabs, #loginBar #loginBarHandle, #loginBar, #loginBar .textCtrl, .footer .pageContent {
background-color: #BB1818 !important;

}
#loginBar .textCtrl:focus {
background: white none !important;
color: black !important;
}
}

This will remove the header, sidebar and avatars.
The header will be replaced with an image that looks like the BBC news page (https://i.imgur.com/WGSMI4f.png).
You can change this to any image you want, but you'll need to change the sizes to suit your image. Long banners are best obviously.
It uses the BBC red as a highlight colour (#BB1818). You can change this as well to suit whatever new image you choose.
Restart Firefox to see the changes. It will only affect the followfollow.com domain.
Along with this I'd set signatures to be automatically hidden in your settings file.
 
Back
Top