MozillaZine

How Do I Change the Address Bar Colors?

User Help for Mozilla Firefox
barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 20th, 2017, 9:49 am

koolx wrote:I ran into an issue with the menu popup. Please look at the screen shot. You will see there are white separator lines. I tried to use 'display: none'. But that messes up other elements. What code do you recommend to change their color?

The problem with those is that they get styled by the OS. So we can't change the color directly.

But does this help? -
Code: Select all
menuseparator {
  -moz-appearance: none !important;
  border-top: 1px solid #A0F !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}


koolx wrote:is there a way to change the background color of the fields in the bookmark panel?

(This one really does have to be specific to the bookmark panel. When I made it more generic, it broke the Stylish CSS editor.)
Code: Select all
#editBookmarkPanel textbox {
  -moz-appearance: none !important;
  background-color: #000;
  color: #FFF;
}


I realise that doesn't restyle the "Folder" dropdown. This code got background color changes working there...
Code: Select all
menulist {
  -moz-appearance: none !important;
  background-color: #000 !important;
  color: #FFF !important;
}

... but removes the dropmarker. Less than ideal, to say the least. So I add this code to get the dropmarker back, but I'm not sure if it helps or just makes it worse.
Code: Select all
menulist > dropmarker {
  display: inherit !important;
}


I guess that's a matter of opinion.

koolx wrote:And to the change the color of the borders around 'Done', 'Remove Bookmark' and the two buttons above it to the right?

For all buttons
Code: Select all
button {
  -moz-appearance: none !important;
  border: 2px solid #4AF !important;
}


and for the "Done" button
Code: Select all
button[default="true"] {
  border: 2px solid #A0F !important;
}
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 21st, 2017, 1:04 am

Hi barbaz,

Greatly appreciate your help! Your codes work! But I got a slight issue and need help on another if you dont mind please...

First issue... the right-click menu popup looks good in the History window. But in the Downloads window the menu popup font color is black, not white. Look at the screen shot. What code makes it white?

Image



------------------------------------------ EDIT ------------------------------------------

Please disregard the above. It looks like its fixed now. But theres a problem I noticed just now. The font color of the popup menu in the Add-ons, Extensions, Appereance, Userstyles windows is black. I dont understand it. Please take a look at this screen shot and you'll see what I mean circled in red.

What code would change the font color to white?

Image


And please look at the icons circled in red in this screen shot. How I can change the color of the icons and the plus and minus signs in the panel menu UI?

Image


..

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 21st, 2017, 9:04 am

koolx wrote:The font color of the popup menu in the Add-ons, Extensions, Appereance, Userstyles windows is black. I dont understand it. Please take a look at this screen shot and you'll see what I mean circled in red.

The code I posted here viewtopic.php?p=14738140#p14738140 - that is, the CSS in the second code box - restyles that menu for me. If it's not working everywhere for you, try adding !important on the "color" lines.

koolx wrote:And please look at the icons circled in red in this screen shot. How I can change the color of the icons and the plus and minus signs in the panel menu UI?

Does this help? -
Code: Select all
#PanelUI-popup #zoom-out-button > image,
#PanelUI-popup #zoom-in-button > image,
#PanelUI-popup #history-panelmenu > image,
#PanelUI-popup #add-ons-button > image,
#PanelUI-popup #preferences-button > image {
  filter: invert(100);
}
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 21st, 2017, 2:57 pm

barbaz wrote:The code I posted here viewtopic.php?p=14738140#p14738140 - that is, the CSS in the second code box - restyles that menu for me. ]


Thanks barbaz.. everything works perfectly. Appreciate your help!

But I got one last issue. This is weird. The following is my code that gives the background pages of Add-ons, List of Extension, and Options a background image. What bothers me is the 1st code. "#sidebar-splitter". If you notice, its got a double bracket at the end. When I remove just one of the brackets the whole code doesnt work. I dont understand why. Is there a way to make this whole code work without the 1st code?

Btw, look at the screen shot showing before with the code intact. And another showing what it looks like without the code (or without one of the brackets). FYI both sets of codes have different '@-moz-document' just to let you know!!!

Code: Select all
@-moz-document url("chrome://browser/content/browser.xul"){

#sidebar-splitter {
  border-color: #333 !important;
  }}


Code: Select all
@-moz-document regexp("(chrome://browser/content/about.ialog.xul|about:(?!blank|stylish-edit|downloads|devtools-toolbox|looppanel|pocket).*)"){

/*Selector in Add-ons, Stylish, Extensions, Options, etc.*/ 
:not(menupopup) {
  background-color:transparent!important;
  }

/*Bkgd image in Add-ons, Stylish, Extensions, Options, etc.*/
  #headered-views, #nav-header, #categories {
    background:url("file:///C:/Users/x/Documents/Blue&Red.jpg") fixed #000 !important;
    background-size: cover !important; margin: 0 !important;
  }

/*White text in Add-ons, Stylish, Extensions, Options, etc.*/ 
:not(#ׂ) {
  color: white !important;
  text-shadow: none !important;
  }

/*Dark transparent buttons in Add-ons, Stylish, Extensions, Options, etc.*/
button,[type="button"]:not(.newtab-control):not(#newtab-customize-button),toolbarbutton,textbox [type="text"],menulist,table[role="presentation"], #warning_message,[type="search"], .newtab-cell,.alert, [role="dialog"], #newtab-customize-panel {
  background-color: rgba(0,0,0,.5) !important;
  border: 0 !important;
  }


With codes intact:
Image

Without the code (or without one of the brackets):
Image

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 21st, 2017, 3:46 pm

That second bracket matches the bracket of the @-moz-document. Removing that bracket would cause a syntax error.
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 21st, 2017, 10:10 pm

barbaz wrote:That second bracket matches the bracket of the @-moz-document. Removing that bracket would cause a syntax error.


I see. Well is there any way of removing that first code without messing up the look of the Options page, for example?

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 21st, 2017, 10:58 pm

Well, there's no obvious reason why removing that first code would mess anything up. But I notice your second code is missing a closing bracket for the @-moz-document. If that's not because you posted only part of the code, you might try adding the missing bracket.

If that doesn't help, can you please post that entire CSS file or user style (with the first code left in)?
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 22nd, 2017, 1:55 pm

barbaz wrote:Well, there's no obvious reason why removing that first code would mess anything up. But I notice your second code is missing a closing bracket for the @-moz-document. If that's not because you posted only part of the code, you might try adding the missing bracket.

If that doesn't help, can you please post that entire CSS file or user style (with the first code left in)?


Hi barbaz, I want to thank you for your follow ups to my issue. Added the extra bracket as you suggested. Hugely appreciate that. As to your request, heres my CSS code which covers this issue:

Code: Select all
@-moz-document url("chrome://browser/content/browser.xul"){
 
  /*Side Panel Expanded*/ 
  .panel-subview-body, #PanelUI-historyMore {
    background: #222 !important;
    color: white !important;
  }
  /*Side Panel Expanded*/ 
  .panel-subview-header {
    background: #333 !important;
    color: lightyellow !important;
    font-size: 18px !important;
  }
 

/*Left Bookmark Panel*/ 
.panel-arrowcontent, .popup-internal-box {
  background: linear-gradient(to left, #444,#111) !important;
    color: white !important;
  }
  /*Bookmark Panel - bottom buttons*/ 
  .box-inherit.button-box  {
    background: #444 !important;
     color: lightyellow !important;
  }
    /*Bookmark Panel - bottom buttons*/   
  button {
  -moz-appearance: none !important;
  border: 0px solid #555 !important;
}
/*Bookmark Panel - Fields*/ 
  #editBookmarkPanel textbox, menulist {
    border: none !important;
  -moz-appearance: none !important;
  background-color: #444 !important;
  color: white !important;
}
  /*Bookmark Panel - Other Fields*/
  #editBMPanel_folderTree > treechildren, listboxbody  {
    background: #444 !important;
    color: white !important;
    margin-left: -1px !important;
     margin-right: -1px !important;
     margin-top: -1px !important;
     margin-bottom: -1px !important;
  }
/*Downloads bkgd color in the browser's toolbar in the upper right hand*/
  #downloadsHistory {
    background: #444 !important;
  }
 

/*Necessary for codes below to work*/
#sidebar-splitter {
  border-color: #333 !important;
  }}

@-moz-document regexp("(chrome://browser/content/about.ialog.xul|about:(?!blank|stylish-edit|downloads|devtools-toolbox|looppanel|pocket).*)"){

/*Selector in Add-ons, Stylish, Extensions, Options, etc.*/ 
:not(menupopup) {
  background-color:transparent!important;
  }
/*Bkgd image in Add-ons, Stylish, Extensions, Options, etc.*/
  #headered-views, #nav-header, #categories {
    background:url("file:///C:/Users/x/Documents/Blue&Red.jpg") fixed #000 !important;
    background-size: cover !important; margin: 0 !important;
  }
/*White text in Add-ons, Stylish, Extensions, Options, etc.*/ 
:not(#ׂ) {
  color: white !important;
  text-shadow: none !important;
  }
/*Dark transparent buttons in Add-ons, Stylish, Extensions, Options, etc.*/
button, [type="button"]:not(.newtab-control):not(#newtab-customize-button), toolbarbutton, textbox, [type="text"], menulist,table[role="presentation"], #warning_message, [type="search"], .newtab-cell, .alert,[role="dialog"], #newtab-customize-panel {
  background-color: rgba(0,0,0,.5) !important;
  border: 0 !important;
  }}

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 22nd, 2017, 3:09 pm

I would guess that you might have removed the "extra" bracket in this code -
koolx wrote:
Code: Select all
/*Necessary for codes below to work*/
#sidebar-splitter {
  border-color: #333 !important;
  }}

If I'm careful to preserve that bracket, I don't notice any change with the code removed. Whereas if I delete the bracket along with the code, everything becomes default styles.

BTW I generally prefer to put the closing brackets for @-moz-document's on their own line, for exactly this reason. :)
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 22nd, 2017, 5:26 pm

barbaz wrote:I would guess that you might have removed the "extra" bracket in this code -
koolx wrote:
Code: Select all
/*Necessary for codes below to work*/
#sidebar-splitter {
  border-color: #333 !important;
  }}

If I'm careful to preserve that bracket, I don't notice any change with the code removed. Whereas if I delete the bracket along with the code, everything becomes default styles.

BTW I generally prefer to put the closing brackets for @-moz-document's on their own line, for exactly this reason. :)


Hi barbaz,

I deleted the code in question (posted below). And I have cut and pasted the other code as a separate CSS. Everything is working well as before. Only difference is that now my CSS codes are in order without any overlap. Appreciate all your help with everything. You still the man dude!

Code: Select all
/*Necessary for codes below to work*/
#sidebar-splitter {
  border-color: #333 !important;
  }}

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 22nd, 2017, 6:07 pm

Great! Glad to help. :D
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 24th, 2017, 3:54 pm

Hi barbaz,

Excuse the bother. Need a small hand on a small issue. Would you happen to know how to change the highlight color to the history search panel? Heres a screen shot.. thanks man.

Image

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 24th, 2017, 9:13 pm

koolx wrote:Would you happen to know how to change the highlight color to the history search panel?

These codes work for me -
viewtopic.php?p=14738263#p14738263
viewtopic.php?p=14738315#p14738315
*Always* check the changelogs BEFORE updating that important software!

koolx

User avatar
 
Posts: 508
Joined: July 11th, 2014, 7:37 pm

Post Posted March 25th, 2017, 2:02 am

Hi barbaz,

Thank you very much. The codes worked for that element. Now I want to know what code applies the same highlighting to the bookmarks panel window and history panel to the right. Below are the screenshots to specifically show you the elements in question:

I also want to change the font size for both these elements. I tried using 'font-size' but it doesnt work. Maybe you know the appropriate code that works. Looking forward to your reply. Thanks man.

Image

Image

barbaz
 
Posts: 1590
Joined: October 1st, 2014, 3:25 pm

Post Posted March 25th, 2017, 8:16 am

For the bookmarks panel
Code: Select all
menupopup > [_moz-menuactive]:not([disabled="true"]) {
  -moz-appearance: none !important;
  background-color: #06A !important;
  color: #FFF !important;

  /* fix change in size when mouse over a menuitem .......*/
  padding: 3px;
}

/* fix keystroke text colors .....*/
menupopup > [_moz-menuactive]:not([disabled="true"]) > * > .menu-iconic-accel,
menupopup > [_moz-menuactive]:not([disabled="true"]) > * > .menu-accel {
  color: #FA0;
}


For the history panel
Code: Select all
#PanelUI-history toolbarbutton:hover {
  background-color: #A0F;
  color: #FFF;
}

In the history panel, it doesn't seem to be possible to restyle the text indicating keystrokes, like "Ctrl+Shift+H".
*Always* check the changelogs BEFORE updating that important software!

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot] and 16 guests