change background download history

[sasik007]

as in the topic, where can I change the background in the download history window? keyboard shortcut ctrl+j
I have a white background and I want to change it

[Godiesc]

hi, The css used for that window is ogx_library.css. If your Firefox has Dark mode that window should display in dark mode too, but seems like is not your case, maybe the Operative System theme has to do with that, but you have all the code for that window in that file.

[sasik007]

I managed to change only part of it but I can't find the rest, can you help?

[sasik007]

Hello, I managed to set everything up again.
Today I've been playing all day, I found everything, but I can't find one element.
as in the picture, after opening a new tab, the background color of the address changes, but only in the new tab, when I click anywhere it changes again

and these are my changes
/* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text.
https://github.com/Godiesc/firefox-gx /
/ Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text.
https://github.com/Godiesc/firefox-gx /
:root,
:root[lwtheme],
:root:not([lwtheme]){
--toolbar-field-background-color: #1b2329 !important; / toolbar_field */
--toolbarbutton-hover-personal:#1b2329 !important;
--border-radius-urlbar-personal: 30px !important;
--toolbar-field-focus-color: white !important;
--toolbarbutton-icon-fill:green !important;
--toolbar-bgcolor: #34444f !important;
--lwt-toolbarbutton-icon-fill-attention:#568696 !important;
--chrome-content-separator-color: green !important;
--toolbar-color:yellow !important;
--arrowpanel-color:yellow !important;
--organizer-color: white !important;
--organizer-pane-background: black !important;
--organizer-border-color: red !important;
--urlbarView-separator-color: green !important;
--lwt-accent-color: black !important;
--tab-selected-textcolor: red !important;
--lwt-frame: #1b2329!important;
--arrowpanel-background: #1b2329 !important;
--toolbarbutton-disabled-opacity: 1 !important;

--toolbarbutton-border-radius: 30px !important;
#urlbar[open] #urlbar-background {
border-color: green !important;
background-color: #34444f !important;

}

[Godiesc]

hi,
sorry I couldn't answer you previous question, in my country there are a lot of problems with electric energy (blackouts) and I can't work how I would like, I'm trying to solve many issues for the next Firefox update.
The code you share you should be careful to put comments between /* and */ I don't know if you pasted here wrongly or do you have the code in that way that could cause problems.
When you open a NewTab the urlbar becomes 'focus' and you have this variable to set the color:

--toolbar-field-focus-background-color: red !important;

and the code should work in a better way if you put the code( other than the variables) outside the root{}, here is your code:

/* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text.
https://github.com/Godiesc/firefox-gx */

:root,
:root[lwtheme],
:root:not([lwtheme]){
--toolbar-field-background-color: #1b2329 !important; / toolbar_field */
--toolbarbutton-hover-personal:#1b2329 !important;
--border-radius-urlbar-personal: 30px !important;
--toolbar-field-focus-color: white !important;
--toolbarbutton-icon-fill:green !important;
--toolbar-bgcolor: #34444f !important;
--lwt-toolbarbutton-icon-fill-attention:#568696 !important;
--chrome-content-separator-color: green !important;
--toolbar-color:yellow !important;
--arrowpanel-color:yellow !important;
--organizer-color: white !important;
--organizer-pane-background: black !important;
--organizer-border-color: red !important;
--urlbarView-separator-color: green !important;
--lwt-accent-color: black !important;
--tab-selected-textcolor: red !important;
--lwt-frame: #1b2329!important;
--arrowpanel-background: #1b2329 !important;
--toolbarbutton-disabled-opacity: 1 !important;

--toolbarbutton-border-radius: 30px !important;
--toolbar-field-focus-background-color: red !important;  /* I added this variable */
}

#urlbar[open] #urlbar-background {
   border-color: green !important;
   background-color: #34444f !important;
}

[sasik007]

sorry for my language, I used a translator. I have it as I pasted it here, so what you sent has already been corrected?

[Godiesc]

sorry for my language, I used a translator. I have it as I pasted it here, so what you sent has already been corrected?

yes, small change but I fixed it a little.

[sasik007]

ok thank you, I'll check how it works and I will continue to have fun, it's just a shame that it's hard to find the right entries

[Godiesc]

yeah, still now I find new variables that I could use, and its css and you can change in many ways the style of the elements, for example the variable I shared you change the background color when the urlbar is 'focus' but you can use too other code directly in the element like this:

#urlbar[focused] #urlbar-background {
  background-color: yellow !important;
}

if you like to change the FIrefox UI with CSS you could spend time learning CSS in any internet source and with the Developer console you can inspect the elements of the browser and play with them. :)

[sasik007]

thanks, but I have one more question: is it possible to make the button background round? now I have a background when I hover the mouse but I would like to have a background of "circles" all the time

[sasik007]

it would be nice to make the same background for example of bookmarks

[Godiesc]

You can change the border radius (more pixels more roundness)

#PersonalToolbar,
#nav-bar{
  --toolbarbutton-hover-background: yellow !important;
  --toolbarbutton-border-radius: 10px !important;
}

[sasik007]

you misunderstood me, I already have it done but I want the background to be there all the time

[Godiesc]

okay, I think this could work:

/* Nav-bar buttons */

#nav-bar .toolbarbutton-1 {
  &:not([disabled]) {
    &:not(:hover) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
      background-color: green !important;
    }
  }
}

/* Bookmark-bar buttons */

toolbarbutton.bookmark-item:not(.subviewbutton) {
  background-color: green !important;
}

[sasik007]

You are great, thank you very much, it works.
the only thing missing is that when you move the mouse over the tabs you are not there and on the tools everything is ok.

[sasik007]

I recorded a video so you know what I mean, it's OK in the tools, but not in the tabs

Nagrywanie.2024-11-18.150118.mp4

[Godiesc]

the hover variable just put into the bookmarksbar ID:

#PersonalToolbar {
  --toolbarbutton-hover-background: yellow !important;
}

[sasik007]

I paste it into my ogx.trick but it doesn't work, can you modify mine and paste it here?

[sasik007]

ok, it works, but it changes the color in the tools and I want to have this shadow in the bookmark

[Godiesc]

I don't understand you, sorry. you showed me in your video that you don't have the effect when the mouse is over the bookmarks-bar elements so I gave you the code to change that background. maybe the language gap is a problem here.

[sasik007]

here where the mouse shows

Nagrywanie.2024-11-18.193620.mp4

[Godiesc]

maybe the problem is a previous code /* Bookmark-bar buttons */, change a little bit to solve the problem:

/* Bookmark-bar buttons */

toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover) {
  background-color: green !important;
}

and after that you can change the 'hover' background with the code I gave you:

/* New 'hover' background color */

#PersonalToolbar {
  --toolbarbutton-hover-background: yellow !important;
}

[sasik007]

it's almost ok but now I have a green background
--toolbarbutton-hover-background: yellow !important;

this only changes in tools and not in bookmarks

Nagrywanie.mp4

[sasik007]

could you add a new tab shape?
like the ones I have in my bookmarks??
please

[Godiesc]

Maybe you want wavefox: https://github.com/QNetITQ/WaveFox

[sasik007]

no, I don't like it, I spent too much time to arrange it the way I want, there's really not much left :-) you've probably had enough of me by now.Can you help again?

[Godiesc]

If you like the default tabs you don't need this theme, just some little code to add in your userChrome.css

[sasik007]

in firefox these tabs are square and i want bubbles, and i like the menu on the left, maybe you're right but i won't be able to do it.so how can you help with what I wrote above?

[Godiesc]

Well I guess you should delete all the code from ogx_tabs-bar.css and use this variables:

--tab-border-radius: 12px !important;
--tab-block-margin: 4px !important;

And unset the preference in about:config page to remove tab-shapes

[sasik007]

Ok, tomorrow I will continue having fun.and is my code correct? do I need to fix something? I would also like to change these 3 buttons to those from mac os close, minimize etc. is it possible?

[sasik007]

ok, last two questions and I'll let you rest for now :-)
1.text color in search bar
because now when I change the color
--toolbar-color: changes the color of everything for me
2. when I listen to music, there is this speaker icon at the top, but it looks bad, it doesn't look clear, how can I remove it or make it clear?

[sasik007]

q.mp4

nice option, but illegible and it's hard to hit the speaker icon with the mouse

[sasik007]

hey and how will you write back to me??

[Godiesc]

hi again,
The speaker icon in your setup seems edited in a wrong way, it's not how the theme show it.

for the url font color you have this variable:
--toolbar-field-color: blue !important;

PD: The theme was made for work well in Firefox release version, if you use beta/developer/nightly versions you will see issues until I fix them.

[sasik007]

I use Mercury

[sasik007]

May I ask you not to close this topic? I would like to have more questions and could you answer me in your free time?

[sasik007]

Can anything be changed here? e.g. the shape of these squares, color, etc.?

[Godiesc]

for the new-tab page you have the file: chrome/components/ogx_UC-newtabpage.css, I don't see the wordmark near to the Firefox logo, maybe a difference for your browser and Firefox.

As you can read in the main github page you have the file: ogx_root-personal.css with usefull rules to change the main aspects of the browser, in that file you have the variable: --newtab-pinnedsites-background to change the background color of pinned sites.

[sasik007]

I can't find anything to change on this home page.

But a quick question, the entry from this frame when searching is?

[Godiesc]

you have:
#urlbar{...} and #urlbar-background{...}

[sasik007]

I can't find it, can you tell me all the paths to it?

[Godiesc]

hi, you ask me for the ID, but if you want all the code applied for that section you have all the css files in chrome/components folder, the folders have a intuitive name for your understanding. for the section you asked is the file: ogx_urlbar-searchbar.css