Овај сајт ће имати ограничену функционалност док га будемо ажурирали у циљу побољшања вашег искуства. Ако неки чланак не реши ваш проблем и желите да поставите питање, на располагању ће вам бити наше заједнице подршке @FirefoxSupport на Twitter-у и /r/firefox на Reddit-у.

Претражи подршку

Избегните преваре подршке. Никада од вас нећемо тражити да зовете или шаљете поруке на број или да делите личне податке. Пријавите сумњиве радње преко „Пријавите злоупотребу” опције.

Сазнај више

Changing URL status bar background/text color

more options

When I'm hovering the mouse over a link, a URL status bar appears at the bottom of the window. Is there any way to change the background and text color of that URL status bar? I'm attaching an image showing what is that status bar.


Thanks, Itai

When I'm hovering the mouse over a link, a URL status bar appears at the bottom of the window. Is there any way to change the background and text color of that URL status bar? I'm attaching an image showing what is that status bar. Thanks, Itai

Изабрано решење

I think you only need the one with !important, so try:

#statuspanel-label {
  color: #c2c2c4 !important; /* light text */
  background-color: #00061c !important; /* dark background */
  border-color: #00061c !important; /* dark border */
}
Прочитајте овај одговор са објашњењем 👍 0

Сви одговори (8)

more options

Hi Itai, there's no built-in setting for that, and I don't think themes on the add-ons site can modify it, either.

That leaves the community-supported option of using a custom style rule in an optional userChrome.css file.

Have you already set up a userChrome.css file? If it's completely new to you, I have a website with general information about it: https://www.userchrome.org/

What colors were you thinking of?

more options

jscher2000 said

Hi Itai, there's no built-in setting for that, and I don't think themes on the add-ons site can modify it, either. That leaves the community-supported option of using a custom style rule in an optional userChrome.css file. Have you already set up a userChrome.css file? If it's completely new to you, I have a website with general information about it: https://www.userchrome.org/ What colors were you thinking of?


Hi jscher2000, I tried to add the code below to the userChrome.css file, but with no success of seeing any change.

.statuspanel-label { background: #131314 !important; color: #2D2D2D !important; /*background: #1E1E1E !important;*/ /*font-size: 13pt !important;*/ /*font-weight: normal !important;*/ /*color: darkslateblue !important;*/ }''

more options

jscher2000 said

Hi Itai, there's no built-in setting for that, and I don't think themes on the add-ons site can modify it, either. That leaves the community-supported option of using a custom style rule in an optional userChrome.css file. Have you already set up a userChrome.css file? If it's completely new to you, I have a website with general information about it: https://www.userchrome.org/ What colors were you thinking of?

Hi jscher2000, I tried to add the code below to the userChrome.css file, but with no successes of seeing any change.

.statuspanel-label { background: #131314 !important; color: #2D2D2D !important; /* background: #1E1E1E !important;*/ /* font-size: 13pt !important;*/ /* font-weight: normal !important;*/ /* color: darkslateblue !important;*/ }

more options

Hi, it's an id attribute, not a class name, so:

#statuspanel-label {
  background: #131314 !important;
  color: #2D2D2D !important;
}

However, there's not enough contrast between those colors so it's not readable, at least for me.

These seem to be the built-in colors on Windows (regular and dark system theme):

@media (-moz-windows-default-theme) {
  #statuspanel-label {
    background-color: #f9f9fa;
    color: #444;
  }
}

@media (prefers-color-scheme: dark) {
  #statuspanel-label {
    background-color: hsl(240, 1%, 20%);
    border-color: hsl(240, 1%, 40%);
    color: rgb(249, 249, 250);
  }
}
more options

any suggestions for Ubuntu? it's not readable for me.

more options

What colors do you want?

more options

I found this pretty comfortable:


  1. statuspanel-label {
 background: #00061c !important;
 color: #c2c2c4 !important;

}

@media (-moz-windows-default-theme) {

 #statuspanel-label {
   background-color: #00061c;
   color: #c2c2c4;
 }

}

@media (prefers-color-scheme: dark) {

 #statuspanel-label {
   background-color: #00061c;
   color: #c2c2c4;
 }

}

but now I would like to change the status bar border from white to dark as well. see picture.

Измењено од стране itai590

more options

Одабрано решење

I think you only need the one with !important, so try:

#statuspanel-label {
  color: #c2c2c4 !important; /* light text */
  background-color: #00061c !important; /* dark background */
  border-color: #00061c !important; /* dark border */
}