Office 2003 userChrome.css Skin Release Versions 1.7 + 1.0

lordmedikit · Post by **lordmedikit** » February 19th, 2004, 1:52 pm

Release Versions 1.7 and 1.0 (in other colours).

This theme mod is designed to modify the look of the default theme in Firefox and make it look more like that of Office 2003. It may work with other themes and Mozilla based programs like Thunderbird but this hasn't been tested. Versions 1.2 and 1.0 (of the coloured skins) onwards should work quite nicely when themes are enabled in Win XP.

----------------------------------------------------------------------------------------

Version 1.7 Release:

http://www.danielryan.org/files/Office2 ... ion1.7.zip

Blue Office 2003 Skin Version 1.0:

http://www.danielryan.org/files/Office2 ... lue1.0.zip

Green Office 2003 Skin Version 1.0:

http://www.danielryan.org/files/Office2 ... een1.0.zip

Silver Office 2003 Skin Version 1.0:

http://www.danielryan.org/files/Office2 ... ver1.0.zip

----------------------------------------------------------------------------------------

Place the userChrome.css and the "office2003theme" folder in the "chrome" folder of your profile folder.

The profile folder can be found under C:\Documents and Settings\Admin\Application Data named either "Phoenix" or "Firefox".

Once there, go through these folders "\Profiles\default\thisnamevaries\chrome". Make sure to backup any current version of userChrome.css before pasting it in.

This version works slightly differently to the last one so you may want to delete the 2 .gif files that were placed directly under the chrome folder if you installed the last version. They are now kept in the "office2003theme" folder.

----------------------------------------------------------------------------------------

The skins from versions 1.5 and 0.93 respectively should all have the ability to have the menu toolbar with a horizontal gradient. To enable this go into toolbarbuttons.css and change this:

Code: Select all

/* Remove this text and the before and after this code slashes to make the menu 
toolbar have a horizontal gradient.
toolbar[type="menubar"] {
  -moz-appearance: none !important;
  background: #F5F5F4 url("toolback.gif") left repeat-y !important;
}
*/

Into this:

Code: Select all

toolbar[type="menubar"] {
  -moz-appearance: none !important;
  background: #F5F5F4 url("toolback.gif") left repeat-y !important;
}

Note: the background colour value will vary depending on what skin you are using (in the above code).

----------------------------------------------------------------------------------------

If you are using the Cute Menus extension theme, you will need to disable it in order for this mod to work correctly. If you don't you will have the cumulative effect of 2 skin mods conflicting with each other. If you have this problem it will probably look like this: http://www.danielryan.org/files/cutemenutheme.png

----------------------------------------------------------------------------------------

If you are using a custom theme that had a curved urlbar, this theme will also cause problems. The solution is to delete urlbar.css in the office2003theme folder. If you have this problem it will probably look like this: http://www.danielryan.org/files/curved.png

----------------------------------------------------------------------------------------

This skin hides some things that I consider redundant. If you want any of the following, delete them from misc.css.

Code: Select all

/* Hide the "Go" menu. */
menu[label="Go"] {
  display: none !important;
}

/* Hide Firefox Update icon in status bar. */
#statusbar-updates {
  display: none !important;
}

/* Hide Send Page/Image/Link from right click menu. */
#context-sendpage,
#context-sendimage,
#context-sendlink {
  display: none !important;
}

----------------------------------------------------------------------------------------

Here are some screenshots of what the default skin looks like:

This is what hovering buttons look like:

<img src="http://www.danielryan.org/files/hoverbuttons.png" border="0">

This is what active (whilst clicking) buttons look like:

<img src="http://www.danielryan.org/files/activebuttons.png" border="0">

This is what open buttons look like:

<img src="http://www.danielryan.org/files/openbuttons.png" border="0">

This is what menus look like:

<img src="http://www.danielryan.org/files/openmenu.png" border="0">

This is what the tabs look like:

<img src="http://www.danielryan.org/files/tabs.png" border="0">

This is what the print preview looks like (with a hovered selected button):

<img src="http://www.danielryan.org/files/printhover.png" border="0">

This is what the options look like (with a clicked button):

<img src="http://www.danielryan.org/files/options.png" border="0">

And finally, this is what selected buttons (like in the javaconsole) look like:

<img src="http://www.danielryan.org/files/javaconsole.png" border="0">

If I have made any blatant errors or if you feel I have missed someting important please notify me.

Any skin authors who want to take this and use it as a mod for their theme feel free.

----------------------------------------------------------------------------------------

If you prefer older versions, these can be downloaded here:

Version 1.6 Release (You will want this if you are using the new Winstripe theme as it fixes a small problem with the dropmarker image on the urlbar.):

http://www.danielryan.org/files/Office2 ... ion1.6.zip

I have also now got these new variations of my skin for people to test which mimic the look of office with these three Win XP skins applied:

Blue Office 2003 Skin Version 0.93:

http://www.danielryan.org/files/Office2 ... ue0.93.zip

Green Office 2003 Skin Version 0.93:

http://www.danielryan.org/files/Office2 ... en0.93.zip

Silver Office 2003 Skin Version 0.93:

http://www.danielryan.org/files/Office2 ... er0.93.zip

Version 1.5 Release:

http://www.danielryan.org/files/Office2 ... ion1.5.zip

Version 1.4 Release:

http://www.danielryan.org/files/Office2 ... ion1.4.zip

I have also now got these new variations of my skin for people to test:

Blue Office 2003 Skin Version 0.91:

http://www.danielryan.org/files/Office2 ... ue0.91.zip

Green Office 2003 Skin Version 0.91:

http://www.danielryan.org/files/Office2 ... en0.91.zip

Silver Office 2003 Skin Version 0.92:

http://www.danielryan.org/files/Office2 ... er0.92.zip

Version 1.3 Release:

http://www.danielryan.org/files/Office2 ... ion1.3.zip

Version 1.2:

http://www.danielryan.org/files/Office2 ... ion1.2.zip

Version 1.1:

http://www.danielryan.org/files/Office2 ... ion1.1.zip

Version 1.0:

http://www.danielryan.org/files/Office2 ... ion1.0.zip

Version 0.5 (doesn't have buttons that change colour when depressed and lots of other fixes I added):

http://www.danielryan.org/files/Office2 ... ion0.5.zip

Howver, please do not notify me of any problems with this older version.

rumester · Post by **rumester** » February 20th, 2004, 1:55 am

Can this .css be used in Thunderbird? I am on Win 2000 and I'm a heavy user of Thunderbird, and don't like the grey-ish colour of Thunderbird, I'd rather the silverish tone of Thunderbird on XP. Can this silverish colour be achieved through playing with userchrome.css ? What parameters should I change?

Thanks a lot !!!

lordmedikit · Post by **lordmedikit** » February 20th, 2004, 2:41 am

rumester wrote:Can this .css be used in Thunderbird? I am on Win 2000 and I'm a heavy user of Thunderbird, and don't like the grey-ish colour of Thunderbird, I'd rather the silverish tone of Thunderbird on XP. Can this silverish colour be achieved through playing with userchrome.css ? What parameters should I change?

Thanks a lot !!!

I haven't tried it with Thunderbird, but its logical that it would use the same paramaters as Firebird so just try it out. Obviously you will have to put it in whatever the Thunderbird profile folder is.

TychoQuad · Post by **TychoQuad** » February 20th, 2004, 2:44 am

Very effective! thanks!

I took the liberty of removing the tab and privacy recolour code... I think the defaults look better... But then again, I'm on XP

gloubi · Post by **gloubi** » February 20th, 2004, 2:58 am

absolutely good job !!
I also took the liberty to put those lines for url bar and search bar :

#urlbar {
-moz-appearance: none !important;
border: solid 1px !important;
font-family: Verdana !important;
color: blue !important;
background-image: url("backarea.gif") !important;
}

#search-bar {
-moz-appearance: none !important;
border: solid 1px !important;
font-family: Verdana !important;
color: blue !important;
background-image: url("backarea.gif") !important;
}

and this file :
(put them in the same directory than userChrome.css)

...

lordmedikit · Post by **lordmedikit** » February 20th, 2004, 3:15 am

///IMPORTANT
I have made a small bug fix to do with the toolbar height changing.

I would advise everyone to re download the file again if this bothers you.
IMPORTANT\\\

Its great that you people are enjoying this. I have tried to comment the file so that you can take out the bits you dislike so that is cool.

One thing, this will work with larger toolbars, but it won't look as nice because the image will basically just be the top part of the toolbar. This was however a better solution to me than having it repeat as that looked ugly.

BTW: Could someone confirm whther it works with Thunderbird or not?

gloubi · Post by **gloubi** » February 20th, 2004, 3:47 am

also this for "Search Button" extension :

#search-button:hover,
#search-button:hover:active {
color: black !important;
-moz-appearance: none !important;
-moz-border-top-colors: #0A246A !important;
-moz-border-right-colors: #0A246A !important;
-moz-border-bottom-colors: #0A246A !important;
-moz-border-left-colors: #0A246A !important;
border: 1px solid #0A246A !important;
background: #B6BDD2 !important;
}

Kevin Hughes · Post by **Kevin Hughes** » February 20th, 2004, 4:58 am

What do I have to edit in the userChrome.css file to fix the ugly borders?

lordmedikit · Post by **lordmedikit** » February 20th, 2004, 6:28 am

Kevin Hughes wrote:What do I have to edit in the userChrome.css file to fix the ugly borders?

Sorry, I forgot to mention that this will only work with the default *grey* skin of Firefox, especially when using larger toolbars:

lordmedikit wrote:One thing, this will work with larger toolbars, but it won't look as nice because the image will basically just be the top part of the toolbar.

It is only a mod and if you are using another skin or letting windows control the style of Firefox (I didn't know it could do this) then this will not work / look at all appealing.

If there is anybody that thinks different or can alter it than please tell me, but I think that your problem is that you are using another skin?

This is not a new skin per se, but unlike a lot of other *mods* it does really require you to be using the default base skin.

lordmedikit · Post by **lordmedikit** » February 20th, 2004, 6:43 am

Another small update to fix a problem.

The menu was basically having the the background applied to it seperately which ended up looking a bit ugly if your top toolbar is large as in Kevin Hughes post. This won't however fix his other issue, which I think is due to using a non-standard theme.

cheeaun · Post by **cheeaun** » February 20th, 2004, 8:05 am

Uh.. are these hard-coded colors? I mean, will it use my system colors for the gradients all?

lordmedikit · Post by **lordmedikit** » February 20th, 2004, 8:26 am

cheeaun wrote:Uh.. are these hard-coded colors? I mean, will it use my system colors for the gradients all?

Yeah all the colours are hard coded, what other ways are there to do them? (Remember I am new to this).

As for the gradients, if you mean the backgounds to the toolbars, etc. then yes this again hard coded because it is an image file.

Basically, this is a small mod that should change the default skin.

If this isn't happening please notify me and I will try to find out what is wrong.

cheeaun · Post by **cheeaun** » February 20th, 2004, 9:05 am

lordmedikit wrote:
cheeaun wrote:Uh.. are these hard-coded colors? I mean, will it use my system colors for the gradients all?
Yeah all the colours are hard coded, what other ways are there to do them? (Remember I am new to this).

Well, I've done a lot of coding to make the 'native-colored' OfficeXP sub-skin for my Phoenity skin. Have a look:
- http://phoenity.com/temp/officexpmenus.css
- http://phoenity.com/temp/lightbg.png
- http://phoenity.com/temp/lighterbg.png

lordmedikit wrote:As for the gradients, if you mean the backgounds to the toolbars, etc. then yes this again hard coded because it is an image file.

you could use alpha PNG images..

lordmedikit · Post by **lordmedikit** » February 20th, 2004, 12:33 pm

Kevin Hughes wrote:What do I have to edit in the userChrome.css file to fix the ugly borders?

I may have solved your problem by giving a background colour to the toolbars so that they should now merge seamlessly. If you could re-download the file and test this and tell me if it works I would be most grateful.

cheeaun wrote:
lordmedikit wrote:
cheeaun wrote:Uh.. are these hard-coded colors? I mean, will it use my system colors for the gradients all?
Yeah all the colours are hard coded, what other ways are there to do them? (Remember I am new to this).

Well, I've done a lot of coding to make the 'native-colored' OfficeXP sub-skin for my Phoenity skin. Have a look:
- http://phoenity.com/temp/officexpmenus.css
- http://phoenity.com/temp/lightbg.png
- http://phoenity.com/temp/lighterbg.png
lordmedikit wrote:As for the gradients, if you mean the backgounds to the toolbars, etc. then yes this again hard coded because it is an image file.

you could use alpha PNG images..

Sorry if I seem rude but none of that really makes any sense to me.

However, you may have over-estimated the scope of what I am doing somewhat. This is not supposed to be anything more than a simple, small mod to make the default theme look more like that of Office 2003. Anything, much more complicated is really beyond me and I don't have the time to do now.

Kevin Hughes · Post by **Kevin Hughes** » February 20th, 2004, 1:14 pm

lordmedikit wrote:Another small update to fix this problem for anyone that is having it:

<img src="http://danielryan.org/files/office2003look7.jpg" border="0">

It is difficult to see in this shot, but the menu was basically having the the background applied to it seperately which ended up looking a bit ugly if your top toolbar is large as in Kevin Hughes post. This won't however fix his other issue, which I think is due to using a non-standard theme.

No, I'm using FireFox default theme. I'm gonna try with a new profile.

[edit]
New profile seems to resolve the problem. Awesome mod!

[/edit]