Jump to content

For Coldplayers that use Firefox


Recommended Posts

Hello there, I wasn't sure which thread to put this in as the designs and ideas themselves are not my own so I figured a new thread would do fine, let me know if I'm wrong. :)


I was recently introduced to Firefox by my more technologically inclined brother and, since then, have been using its add-ons and features to coldplay-ify my browser, tabs, and google web search and figured others here might want to do the same if they haven't already.



My browser, by using the new Personas add-on (http://www.getpersonas.com/gallery/All/Popular) to search for Coldplay now looks like this



and, i think, looks pretty damn awesome when paired with Coldplay's official website.


That specific one can be found here - > http://www.getpersonas.com/persona/18629

but, if you prefer a more yellow approach, theres also this one - > http://www.getpersonas.com/persona/5392


For both my tabs and for google I used a website called Userstyles (http://userstyles.org/) which after downloading the add-on Stylish (https://addons.mozilla.org/en-US/firefox/addon/2108) allows anyone to make or download styles for any website (like facebook or youtube) to better fit their tastes.



For my tabs whenever I open a blank one instead of a white screen I now get this




by installing this style ->http://userstyles.org/styles/11919 into stylish and then editing the code so instead of a picture of the world I get a picture of Coldplay


To edit go to Tools -> Add-Ons -> User Styles, click on about:blank - World Map, click edit, scroll down about halfway until you see this

background: url('http://www.bnb.tv/img/global_map.jpg') !important;

and replace the url for the world map picture with a picture of your choosing. Currently I'm using

which I found here in the Coldplaying gallery.


For my Google instead of the plain white I now get this






To coldplay-ify Google you have to install, with Stylish, Google Web Search - Dark Blue (Transparent) here ->http://userstyles.org/styles/7482

For the original code unless you are in Canada you have to replace all of the google.ca within the code to the google that you use in order for this to work.


Same as with the tabs in order to change the background you have to go to Tools -> Add-Ons -> User Styles, click on Google Web Search - Dark Blue (Transparent), click edit, scroll down slightly until you see this

background-color: transparent !important; background-image: url("http://interfacelift.com/dl/wallpaper/01545_thefarmhouse_1440x900.jpg")

and replace the url in quotes with a picture of your choosing. Currently I'm using


background-color: transparent !important;

background-image: url("http://i171.photobucket.com/albums/u311/JJP9090/Reign_of_love__by_Qudee.png")

which I found on deviant art by Qudee.

This one


also looks pretty cool.


If you want to move google and the search box up or down you have to find this




/* Replacement images



/* big logo */

img[src*=logos/], img[src$=logo.gif], div[style*=logo_plain.png], img[src$=logo_google_suggest.gif], img[src^=logos/holiday] {

margin-top: 6% !important;

width: 0 !important;

height: 103px !important;

padding-left: 281px !important;

margin-top: 20px !important;



add the bolded line into the code and make the blue number higher or lower to fit how high or low you want them to be.


Or, if you just want to move the search bar up or down-

Just copy and paste the bolded part in the spoiler and add it into your own code and then the blue number change to fit how high or low you want the search bar



* Google Web Search - Dark Blue (Transparent version) by Waffle

* Credit to the following:

* Valacar - Google Web Search - dark blue redesign (vC) [http://userstyles.org/styles/843] March 27th 2008

* Griffal - @bsolutely the best skin 4 Facebook - summer theme [http://userstyles.org/styles/6775]

* Paweł Kubisz's - @bsolutely the best skin 4 Facebook - Spring Skin [http://userstyles.org/styles/5537]



* copy to gedit, notepad etc and do a find/replace to change to google.com etc



@-moz-document url(http://www.google.com/),















url-prefix(http://scholar.google.com/schhp?) {




background-color: transparent !important;

background-image: url("http://i171.photobucket.com/albums/u311/JJP9090/Reign_of_love__by_Qudee.png") !important;

background-attachment: fixed !important;

background-repeat: repeat-x !important;

background-position: bottom left !important;



#res {background: #30466e !important; opacity:.8!important}





background:#181818 !important;

color:#b8b8b8 !important;

padding: 0px 5px !important;

width:250px !important;

margin-top: 86px !important;







For my specific Google I got my brother to make a few adjustments with the google logo a little higher and the search bar smaller and lower so if you want the look I have when editing the code erase all of the code already provided and pm me and ill send it to you. I also downloaded the add-on "Remove It Permanently" (https://addons.mozilla.org/en-US/firefox/addon/521) to get rid of the extra google links.


Take note that when any of the code is edited if anything !important is deleted accidentally besides the url changes none of it will work, I know i've done that countless times.


Also, once again, I did not create any of this artwork or write the code so some questions you have I may not be able to answer, sorry, but hopefully there are some members here who could do that.



Link to comment
Share on other sites

Wow :o That's very cool! Thanks for sharing!

And I use firefox :D

I'm gonna add that stuff now :)


EDIT: I've done it now!

It would be nice if you posted that code for google, 'cause I want my logo a little bit higher. :cheesy:

Thank you! :D

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...