Hello,

The color of the windows you need change in the configurations of your system, the icon you can use the customize tab remove it.

• Customize toolbars

Change color of the window:

• http://windows.microsoft.com/en-us/windows/change-computer-colors#1TC=windows-7

Thanks Diego, Changing the theme color didn't solve it this gray color stuck on the background and I'm using win 7 but with win 8 blue custom theme. I want it to be like this like real win 8 http://img.creativemark.co.uk/uploads/images/082/16082/img3File.png

Menu icon and kasper icons are locked cannot change them by Customize toolbars way.

any help?

islamfarid:

As far as I know, that's a mockup used for showing the features of Firefox 29. I don't think you can actually get it that transparent. I can't do that either.

islamfarid wrote:

i don't know how to use CSS

You can apply user styles using either the Stylish add-on (which I recommend), or the userChrome.css file.

1. Install Stylish and restart Firefox when prompted.
   • https://addons.mozilla.org/firefox/addon/stylish/
2. Click the ≡ Menu Button and choose Add-ons.
3. In the Add-ons Manager, click User Styles on the left.
4. Click the Write New Style button at the top. Paste the following in the text box, give the style a name, then click the Save button.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#TabsToolbar:not(:-moz-lwtheme)::after {
  opacity: 0 !important;
}

tab[selected="true"] {
  color: black !important;
  text-shadow: none !important;
}

tab {
  color: white !important;
  text-shadow:0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 3px #000 !important;
}

#main-window .tabs-newtab-button,
#main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {
  list-style-image: url("chrome://browser/skin/tabbrowser/newtab-inverted.png") !important;
}

#main-window #alltabs-button[type="menu"],
#main-window .toolbarbutton-1 .dropmarker-icon {
  list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png") !important;
}

#main-window #tabview-button {
  list-style-image: url("chrome://browser/skin/tabview/tabview-inverted.png") !important;
}

Credits: I just replaced ::before with ::after to make the style work.

• http://userstyles.org/styles/93827/australis-tab-defogger

I don't know how to change the position of those icons, since I don't have those add-ons. You'd have to get their id with the DOM Inspector add-on, then change their position with a user style like this (this example moves the ≡ Menu Button to the left edge of the window):

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PanelUI-button { -moz-box-ordinal-group: 0 !important; }

• https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
• https://developer.mozilla.org/docs/Web/CSS/-moz-box-ordinal-group

Gingerbread Man THANKS A LOT for your help you made my day :) best wishes for you,

Thanks all either :)