I’ve been trying to solve my small browser issue since I found the global zoom issue in KDE menu so trying to recreate the larger view I had but I can’t seem to find the info I need for this last part which is the extension icons.
Does anyone have any information on this? Once I solve this part I can share everything I’ve got so far for anyone that may want a larger or custom view of things in Firefox.
I just need to enlarge the extension/download icons and I’m doing this using custom userChrome.css file
Pretty much everything in this row I need to scale up to 2.5, 2.5’ish but can’t find the info I need to just to it by default to the whole row.
Currently I’ve got the whole row like this, just need to match the extentions.
Thankyou @ricklinux
I had previously run across that theme in my searches, however it no longer works.
I did however find the answer to my question after a great many more searches.
It is called
Anyway, I’ve reached a good stopping point as I’ve gotten everything I’m happy with at the moment.
I’ll post a screenshot and then I’ll post the code.
A few things the code is doing…
custom Fwd & Back buttons
All Icons & Fonts are larger
Active Tab color
Orange Status panel at the bottom matches bookmark hover color
Colored address bar based on the site security
Here are the icons but you’ll have to change the code or file type as I had to change them to .png from .ico to upload them.
Here are the button .ico files
here is the userChrome.css
feel free to play with it or what ever, I only did it so I had a larger view of everything.
Instructions for setup are in the file and using with Firefox version 73
/* This is a comment! */
/* current Firefox version 73 Endeavour-Archlinux 2-16-2020 MrEd */
/* Enable Loading of userChrome.css and userContent.css in Firefox
* about:config
* set toolkit.legacyUserProfileCustomizations.stylesheets to true
* create in your mozilla #####.default profile directory a folder named chrome and chrome/icons
* in chrome dir make file named userChrome.css add your rules
* put custom icons in icons directory
*/
/* enableing xul namespace could cause issues */
/* @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */
/* tab font stuff */
#PlacesToolbarItems,
#sidebar-search-container #search-box,
.sidebar-placesTree {
font-size: 20px !important;
font-weight: bold !important;
/*color: white !important;*/
}
label.tab-text {
font-size: 20px !important;
}
/*findbar text n stuff*/
.findbar-textbox {
color: black !important;
font-size: 20px !important;
}
.close-icon {
/*list-style-image: var(--tab-close-image) !important;*/
/*list-style-image: url("icons/moh_spearhead.ico") !important;*/
/*transform: scale(0.2, 0.2) !important;*/
}
#TabsToolbar .tabbrowser-tab .tab-background
{
background-color: var(--inactive-tab-background) !important;
background-image: none !important;
border-radius: var(--tab-radius) var(--tab-radius) 0 0 !important;
}
#TabsToolbar .tabbrowser-tab[selected="true"]
{
z-index: 999;
}
#TabsToolbar .tabbrowser-tab[selected="true"] .tab-background
{
background-color: var(--active-tab-background) !important;
}
#TabsToolbar .tabbrowser-tab:not([selected="true"]):hover .tab-background
{
background-color: var(--inactive-tab-background-hover) !important;
}
/* Jake from State Farm fixes url bar */
#urlbar {
box-shadow: 0 0 3px transparent !important;
border: 1px solid rgb(200,200,200) !important;
background: rgb(248,248,248) !important;
margin-left: 150px !important;
margin-right: 100px !important;
min-width: 300px !important;
max-width: 1000px !important;
min-height: 50px !important;
max-height: 50px !important; /
}
#urlbar {font-size: 15pt !important}
/* toolbar {max-height: 40px !important}*/
#toolbarbutton {max-height: 50px !important}
/* Hey, you dang woodchucks, quit chucking my wood. */
#toolbar-menubar {
/*background: red;*/ /*works*/
/*background-color: rgb(160,32,240) !important;*/ /*works*/
background: #660066; /* works green= #007f00 */
background-image: none !important;
}
#file-menu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important; /* works */
/* color: #FFC500 !important; */ /* works */
}
#edit-menu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important;
}
#view-menu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important;
}
#history-menu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important;
}
#bookmarksMenu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important;
}
#tools-menu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important;
}
#helpMenu {
font-family: HP Simplified !important;
font-size: 20px !important;
color: yellow !important;
}
/* scrollbar color */
/* button icon size and image change for chrome/icons/filename */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
/* Fix back button */
#back-button>.toolbarbutton-icon {
transform: scale(1.5, 1.5) !important;
animation: none !important;
border: none !important;
box-shadow: none !important;
/*background-image: none !important;*/
list-style-image: url("icons/moh_spearhead-back.ico") !important;
/*list-style-image: url(file:///E:/Temp/Mozilla/Firefox/icons/Buttons/test.png */
/* background-color: rgba(0, 240, 255, 1) !important; */
background-color: #cedb87 !important;
/* margin: 5%; */ /* All sides: 5% margin */
margin-left: 10px !important;
/* margin: 5px 5px 5px 5px; */
/* margin-right: 5px !important; */
}
#back-button:not(:hover),
#back-button:not(:hover) > .toolbarbutton-icon {
background: none !important;
}
#back-button:hover,
#back-button:hover > .toolbarbutton-icon {
border-radius: 0px !important;
}
#forward-button>.toolbarbutton-icon {
transform: scale(1.7, 1.7) !important;
/* animation: none !important; */
border: none !important;
box-shadow: none !important;
list-style-image: url("icons/moh_spearhead-back-forward.ico") !important;
margin-left: 30px !important;
/* margin: 5%; */ /* All sides: 5% margin */
}
#stop-button>.toolbarbutton-icon {
transform: scale(1.5, 1.5) !important;
animation: none !important;
border: none !important;
box-shadow: none !important;
fill: red !important;
margin-left: 40px !important;
}
#reload-button>.toolbarbutton-icon {
transform: scale(1.5, 1.5) !important;
animation: none !important;
border: none !important;
box-shadow: none !important;
fill: green !important;
margin-left: 40px !important;
}
#home-button>.toolbarbutton-icon {
transform: scale(1.5, 1.5) !important;
animation: none !important;
border: none !important;
box-shadow: none !important;
fill: blue !important;
margin-left: 40px !important;
}
/* extention icon size */
.toolbarbutton-1
{
--toolbarbutton-hover-background: #cedb87 !important;
--toolbarbutton-active-background: #cedb87 !important;
/*affects all buttons! adjust fwd bk reload stop and home seperatley see above section*/
transform: scale(1.8, 1.8) !important;
}
/* bookmarks toolbar */
#PersonalToolbar toolbarbutton:hover
{
opacity: 1 !important;
/* background-color: #1A1A1D !important; */
background-color: orange !important;
}
#PersonalToolbar {
background-color: #d0ccc7 !important;
font-size: 20px !important;
font-weight: bold !important;
color: #000000 !important;
}
toolbar, nav-bar
{
/* background-color: var(--menu-background) !important; */
background-color: #e1e1e1 !important; /*lt grey*/
}
menubar
{
/* background-color: var(--menu-background) !important; */
background-color: #7b30a5 !important; /*dark purple*/
}
/* status panel position*/
/* #statuspanel
{
-moz-box-ordinal-group: 0 !important;
margin-top: -13px !important;
z-index: 1000000;
} */
/* status panel size - the link area at bottom left also see #fullscr-toggler */
#statuspanel-label
{
background-color: orange !important;
border: var(--active-tab-background) !important;
border-radius: 0 0 var(--tab-radius) 0 !important;
color: black !important;
font-size: 18px !important;
padding: 2px 12px 3px 12px !important;
margin-right: 0 !important;
z-index: 1000000;
}
/* address bar security color
* Originally from:
* http://forums.mozillazine.org/viewtopic.php?p=14404121#p14404121
*/
#urlbar {
position: relative;
z-index: 1;
}
#identity-box:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
background: white;
opacity: 0.2;
}
/* There is also grantedPermissions, but irrelevant. */
/* about:about */
#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity:after {
background: #ff0039; /* Firefox Red 50 */
}
/* about:config */
#urlbar[pageproxystate='valid'] #identity-box.chromeUI:after {
background: #0a84ff; /* Firefox Blue 50 */
}
/* uBlock Origin Dashboard */
#urlbar[pageproxystate='valid'] #identity-box.extensionPage:after {
background: #45a1ff; /* Firefox Blue 40 */
}
/* https://www.github.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity:after{
background: #058b00; /* Firefox Green 70 */
}
/* https://www.google.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain:after{
background: #12bc00; /* Firefox Green 60 */
}
/* https://mixed-script.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked:after {
background: #30e60b; /* Firefox Green 50 */
}
/* https://mixed.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent:after {
background: #d7b600; /* Firefox Yellow 60 */
}
/* https://very.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked:after {
background: #d7b600; /* Firefox Yellow 60 */
}
/* https://self-signed.badssl.com/ but add certificate exception */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden:after {
background: #ffe900; /* Firefox Yellow 50 */
}
/* Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher:after {
background: #a47f00; /* Firefox Yellow 70 */
}
/* https://mixed-script.badssl.com/ but disable protection */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent:after {
background: #d70022; /* Firefox Red 60 */
}
/* http://http-login.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms:after {
background: #a4000f; /* Firefox Red 70 */
}
/* This enables the use of JS external files */
/* more at https://www.reddit.com/r/FirefoxCSS/comments/dhmq17/just_wanted_to_share_my_customizations/ */
hbox#fullscr-toggler
{
-moz-binding: url("userChrome.xml#js")
}
*
{
--color-0: #d1d1db;
--color-1: #e7e7ea;
--color-2: #2a2a2d;
--color-3: #3a3a3d;
--color-4: #4a4a4d;
--color-5: #5a5a5d;
--color-6: #6a6a6d;
--color-7: #7a7a7d;
--color-8: #8a8a8d;
--color-9: #9a9a9d;
--color-a: #aaaaad;
--color-b: #bababd;
--color-c: #cacacd;
--color-d: #dadadd;
--color-e: #7ae7d4;
--color-f: #fafafd;
/*--url-background: #312D4B; */
--url-background: #dbb587;
--menu-background: var(--active-tab-background);
--sidebar-width: 300px;
--sidebar-height: 100%;
--sidebar-header-background: var(--color-2);
--sidebar-header-color: var(--color-e);
--tab-radius: 8px;
--tab-min-height: 36px;
--tabs-background: var(--color-0);
--active-tab-background: #7ae7d4;
--active-tab-color: var(--color-e);
--inactive-tab-background: var(--color-1);
--inactive-tab-background-hover: var(--url-background);
--inactive-tab-color: var(--color-a);
}
/* notes
*
margin: 5%; /* All sides: 5% margin */
/* margin: 10px; /* All sides: 10px margin */
/* margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */
/* margin: 10px 3% -1em; /* top: 10px margin */
/* left and right: 3% margin */
/* bottom: -1em margin */
/* margin: 10px 3px 30px 5px; /* top: 10px margin */
/* right: 3px margin */
/* bottom: 30px margin */
/* left: 5px margin */
/* margin: 2em auto; /* top and bottom: 2em margin */
/* Box is horizontally centered */
/* margin: auto; /* top and bottom: 0 margin */
/* Box is horizontally centered */
*/
