Firefox CSS

446 readers
1 users here now

Pushing the limits of the Firefox Browser through the use of CSS.

#join #firefoxcss:mozilla.org

Post your Firefox UI customizations here!

What is userChrome.css?

Rules (enforced)

  1. Posts must have flair!

  2. Follow Lemmy.World rules

  3. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.

  4. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.

  5. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.

  6. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

Guidelines (not enforced)

Consider adding the following info to help people try your tweaks:

  1. Screenshots should have code in comments.

  2. Include Firefox version

  3. When asking for help you should share your custom style to help others understand what you are doing. This is increasingly important the more custom rules you have.

  4. List any other addons that may be changing the UI

  5. If a custom wallpaper is used, include a link to the original.

  6. If someone's comment solves you problem, reply to the comment to let them know, and change your post flair to solved.

Wiki

Find Helpful Knowledge and answers to common issues in /c/FirefoxCSS wiki.

Links

Lemmy Communities

Websites

founded 1 year ago
MODERATORS
WandererLagomorph770@lemmy.world
listing: all - local
1
1
Is it possible to get this effect of blurring tab content behind the top bar in Firefox? (lemmy.world)
submitted 1 week ago by TheTwelveYearOld@lemmy.world to c/firefoxcss@lemmy.world
1 comments fedilink
2
11
My attempt at making a theme for vertical tabs. It has a redesigned devtools tab, a more resonsive homepage, and it supports firefox themes better than the default. Github link in the comments (youtu.be)
submitted 1 week ago by bali10050@lemmy.world to c/firefoxcss@lemmy.world
1 comments fedilink
3
0
Any idea how to do this? (www.reddit.com)
submitted 2 weeks ago* (last edited 2 weeks ago) by mobsenpai@lemmy.world to c/firefoxcss@lemmy.world
1 comments fedilink
 
 

Make firefox look like this?

4
6
Is anybody else experiencing issues with the urlbar on Nightly changing its height/margins? (lemm.ee)
submitted 3 weeks ago* (last edited 2 weeks ago) by 001Guy001@lemm.ee to c/firefoxcss@lemmy.world
3 comments fedilink
 
 

like this: https://i.imgur.com/vu85Vtp.png

Previously I've used the "Decrease toolbar height" section from here, which stopped working correctly a few days ago so I messed around and ended up with:

toolbar#nav-bar {
  height: 26px !important;
}
.urlbar-input-container {
  height: 26px !important;
  margin-top: -4px !important;
  margin-bottom: 0px !important;
}
#urlbar-background {
  height: 20px !important;
  margin-top: -1px !important;
  margin-bottom: 0px !important;
}

But almost every day the urlbar moves up or down from where I set it and I have to change the values above accordingly.

edit: the changes seem to have stopped. I've updated the code with the currently-working values

5
6
New URL bar issue after updating ESR. My fault? (lemmy.world)
submitted 1 month ago* (last edited 1 month ago) by AresUII@lemmy.world to c/firefoxcss@lemmy.world
1 comments fedilink
 
 

EDIT: Fixed the dropdown by nuking line 15, still trying to solve the selection highlighting turning green again

My userChrome:

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 0px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 0px 0px !important;
}

/* Make urlbar appear more compact */
#urlbar[breakout]{
  margin-inline-start: 0px !important;
  width: 100% !important;
  left: 0 !important;
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
}
#urlbar[breakout]:not([open]){ bottom: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; }
.urlbarView{ margin-inline: 0 !important; width: auto !important; }
.urlbarView-row{ padding: 0 2px !important; }
.urlbarView-row-inner{ padding-inline-start: 4px !important; }
#urlbar-background{ animation: none !important; }
#urlbar-input-container{ padding: 1px !important; height: 100% !important; }
#identity-icon{ margin-block: var(--urlbar-icon-padding) }
.urlbarView > .search-one-offs:not([hidden]){ padding-block: 0px !important; }


#nav-bar:-moz-lwtheme #urlbar ::-moz-selection,
#nav-bar:not(:-moz-lwtheme) #urlbar ::-moz-selection {
        background-color: #3040cf !important; /*it's green again; want to fix this too*/
    color: white !important;
}

/* Set blank page background-color */
/* Uses color from theme_colors if available */

#tabbrowser-tabpanels{
  background-color: var(--uc-light-bkgnd-color,rgb(0,0,0)) !important;
}