Skinning the statusbar

me4get · Post by **me4get** » December 12th, 2002, 11:49 am

How can you use userChrome.css to skin the statusbar ?

flii · Post by **flii** » December 12th, 2002, 12:00 pm

already a thread that talks about this.

you might check out http://www.mozillazine.org/forums/viewtopic.php?p=11419 for ideas.

laszlo · Post by **laszlo** » December 12th, 2002, 8:08 pm

Depends on what you want to do exactly. This is the basic XUL structure:

Code: Select all

<statusbar id="status-bar" class="chromeclass-status">
  <statusbarpanel id="security-button" class="statusbarpanel-iconic"/>
  <statusbarpanel id="page-report-button" class="statusbarpanel-iconic"/>
  <statusbarpanel id="statusbar-display" flex="1"/>
  <statusbarpanel id="statusbar-progresspanel" class="statusbarpanel-progress">
    <progressmeter class="progressmeter-statusbar" id="statusbar-icon"/>
  </statusbarpanel>
</statusbar>

If neither this nor the thread Flii gave you help anything, ask again.

me4get · Post by **me4get** » December 13th, 2002, 10:27 pm

I'm trying to skin the statusbar and scrollbar, using only userChrome.css
to use my own graphic. The skin Woody for Phoenix does this inside the theme, But I want to have an easier method than having to create a full theme. I've managed to skin the top parts of Phoenix, but not the statusbar and scrollbar

laszlo · Post by **laszlo** » December 13th, 2002, 10:54 pm

What about

Code: Select all

statusbar {
  background-image: url("image.png") !important;
}

to skin all statusbars or

Code: Select all

#status-bar {
  background-image: url("image.png") !important;
}

to skin only the main window status bar, with "image.png" in the same dir as userChrome.css? Doesn't this work?

me4get · Post by **me4get** » December 13th, 2002, 11:51 pm

Neither of those 2 works. I'm running the latest Phoenix.

laszlo · Post by **laszlo** » December 14th, 2002, 12:00 am

I forgot about the nsITheme changes... Try this (you'll lose the new optics though):

Code: Select all

statusbar {
  -moz-appearance: none !important;
  background-image: url("image.png") !important;
}

flii · Post by **flii** » December 14th, 2002, 1:30 am

i'm trying it too laszlo, and it's not working for me, either. i even tried the moz-appearance before you posted it. nadda thing.

@me4get: dang, i didn't see you were the one who asked about skinning the scroll bar in that thread i linked to. lol. have you found an answer? i can get the non-scrollbar part of my bookmark manager to skin, but that's it. i've been going through all the links alan gave, but no luck with either the status bar nor the scrollbar. also, a lot of the mozilla examples don't seem to work on phoenix...

francois · Post by **francois** » December 14th, 2002, 6:45 am

After doing some research on that after the other thread I succesfully changed the status bar appearance.
I am using Mozilla/5.0 (X11; U; Linux i586; en-US; rv:1.3a) Gecko/20021205 Phoenix/0.4,
hope nothing changed much since. In my userChrome.css I have:

Code: Select all

statusbarpanel, progressmeter {
background-image: url("image.png")!important;
background-color: none !important;
}

statusbarpanel {
-moz-appearance: none !important;
background-color: transparent !important;
}

I don't now if it is too much code or not, but it basically work. The progressmeter indicator is still grey
though I did not work out how to change that. I am still searching for the scrollbar as well.

flii · Post by **flii** » December 14th, 2002, 12:57 pm

this is how it looks for me. very cool, except for that weird spot below the down arrow. however, i found how to get the progress bar to be skinned, as well. replace everything you posted with just this:

Code: Select all

statusbarpanel, progressmeter {
  -moz-appearance: none !important;
  background-image: url("image.jpg")!important;
  background-color: none !important;
  }

me4get · Post by **me4get** » December 14th, 2002, 5:49 pm

Now all I need is for the scrollbar. Everything else is working.

francois · Post by **francois** » December 15th, 2002, 4:01 am

Flii wrote:this is how it looks for me. very cool, except for that weird spot below the down arrow. however, i found how to get the progress bar to be skinned, as well. replace everything you posted with just this:
Code: Select all
statusbarpanel, progressmeter {
  -moz-appearance: none !important;
  background-image: url("image.jpg")!important;
  background-color: none !important;
  }

I have tried something like that before, and retried it with your code. It does not really solve the problem
of the gray meter. And you lose the mozilla appearance for the progress meter which is not so good in my
opinion. Yes the background image has changed and so has the appearance but the progress bar is still gray!

flii · Post by **flii** » December 15th, 2002, 11:02 am

really? i updated my image to show how mine looks while in progress. what else had you wanted? my progress bar is blue, the rest is skinned... obviously i'm dense. lol. my apologies.

francois · Post by **francois** » December 16th, 2002, 4:01 am

Well mine is gray, while the rest of my skin is green, that may be a default colour picked from the desktop or the theme.
For the progress bar the -moz-appearance bit change the progress bar from something that looks like a scrollbar
to something that look like your snapshot. May be I should take some snapshot and e-mail them to you privately when
I have time.

me4get · Post by **me4get** » December 16th, 2002, 5:49 pm

I changesd to this:
statusbarpanel, progressmeter {
-moz-appearance: none !important;
background-image: url("bluefluffyclouds.jpg")!important;
background-color: transparent !important;
}

Now the bar is skinned at all times as shown here: