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

background: url('http://www.coldplaying.com/forum/gallery/data/1174/phill2.jpg') !important;

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.

Edit:

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://www.google.com/webhp),

url-prefix(http://www.google.com/search?),

url-prefix(http://www.google.com/advanced_search),

url-prefix(http://www.google.com/preferences),

url-prefix(http://www.google.com/language_tools),

url-prefix(http://images.google.com/webhp),

url(http://www.google.com/intl/en/),

url(http://www.google.com/intl/en/options/),

url-prefix(http://www.google.com/movies),

url-prefix(http://blogsearch.google.com),

url-prefix(http://www.google.com/custom?),

url-prefix(http://www.google.com/#hl),

url-prefix(http://images.google.com/images?),

url-prefix(http://news.google.com/news?),

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

 

body

{

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}

 

 

input[name=q]

{

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.

 

Enjoy!

whoa thanks!!!:stunned:

no problem :)

:)

That is so fucking COOL. :stunned:

I'm getting a new laptop pretty soon and I don't want this shitty AOL anymore. I'm definately getting firefox and adding that stuff on! :dance:

it looks great :D

WOW Thank You! Awesome! :o

Wow that's awesome, thanks for sharing!:D

that's awesome!!!

but i don't have firefox. :disappointed:

Thanks so much! I added all of this . :D

you can download firefox brooke. i have both firefox and safari, but i mostly use firefox. i didnt know you could do that cool stuff though :o

that's awesome!!!

but i don't have firefox. :disappointed:

 

DL it... firefox rox!:cool:

Oh thats fricken awesome! I really like the google page!!!

Amazing, thanks for sharing!!

you can download firefox brooke. i have both firefox and safari, but i mostly use firefox. i didnt know you could do that cool stuff though :o

 

DL it... firefox rox!:cool:

 

well, i use Flock, which i think is firefox based, but i can't add the extensions. :(

oh well! :rolleyes:

Thanks!

 

I can't get the google thing working though :(

 

edit: oh I see. google.ca

Ok so how do I use this remove it permanently add on!?

Right click on the link you want to get rid of and in the drop down there should be remove this permanently. Just click on that and that should do it.

That's so cool :D Thanks!

Wow :o Thanks for this! :nice:

 

But, I can't find this sequence --> Tools -> Add-Ons -> User Styles,

Did you already download the add-on "Stylish"? If you have, it should just be a choice when you go to your add-ons...

This is cool!

 

 

Now I have to find out how exactly to install it, I'm terrible @ technology shizzle even with clear instructions...

Thanks for this!! Sooo great!! :dance:

A little question, how do you get your background of your blank page to be black in colour instead of the default white? Now I have the B-stage picture centred on a white page unlike yours.

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