reduce padding in compact_extensions_panel.css about firefox-csshacks HOT 15 CLOSED

I changed that style to make the default height a bit more compact but make the settings icons a tiny bit bigger.

If you want to make them even more compact then change the padding on line 14 - although if you want to go below 4px then you need to also decrease the padding for the settings icon on line 17 as well.

from firefox-csshacks.

Do you know how to change this purple Download window color?

from firefox-csshacks.

You can change the background of this dialog like this:

@-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml"){
  :root{
    background: #f00 !important;
  }
}

from firefox-csshacks.

That worked. Thank you.
I'm confused why some of these changes work in userChrome and other in userContent?

the code looks very similar

@-moz-document url("about:newtab"),url("about:blank"), url("about:home") {  
    body {
        background-color: #252525 !important;
    }
}

@-moz-document url-prefix("chrome://mozapps/content/extensions/aboutaddons.html"), url("about:addons"){

  .toggle-button[aria-pressed="true"] {
    background: #0078d7 !important;
  }
}

from firefox-csshacks.

Yeah, I can see how that seems confusing. The difference is in what context the resource you are trying to modify is loaded.

Addons manager, newtab page etc. are all loaded in content context. Simple (although not always accurate) way to think about this is that they are all loaded inside the web-content area. On the other hand content inside this panel is loaded in chrome context, that is in the same context as rest of the Firefox's toolbars UI etc.

Note that @-moz-document is in no way specific to userContent.css - it's just that if you don't use @-moz-document rules in userContent.css then all your styles inside that file will apply to all websites as well. You could just as well use all your styles inside userChrome.css to apply only to the specific chrome documents, but most of the time that is not necessary since you can just use specific css selectors that won't match anything in other chrome documents except the one you care about. In the panel styling example then, using @-moz-document rule was just the easiest route I could think of to target only that one specific dialog.

from firefox-csshacks.

Thank you for that explanation. I assumed that "@-moz-document" is suppose to be in userContent, but good to know that "it depends" ^^
Probably some stuff didn't work because I put it in the wrong CSS.

I try to target this drag and drop color since a few days. Do you know how to tackle this?

from firefox-csshacks.

You should be able to change that color like this:

toolbarbutton.bookmark-item[dragover="true"][open="true"]{
  background-color: #f00 !important;
}

I'll close this issue since the original problem was resolved.

from firefox-csshacks.

That worked again, Thank you so much. Sure the og issue is solved, no problem.

I don't want to annoy you, but there is also this weird blue outline in searchboxes, or input boxes in generall. It's not everywhere but some websites fall back to this firefox blue ^^

from firefox-csshacks.

Do you know how to reorder the order of the right click items on bookmarks?

from firefox-csshacks.

You need to manually add order property to items such that the end result is in order you like - this can get really convoluted especially with separators.

The selectors will also depend on what exact list of items you are talking about. In case you are talking about menu popup opened by right-clicking a bookmark or folder in bookmarks toolbar then this might produce your desired layout:

#placesContext_open\:newcontainertab,
#toggle_PersonalToolbar,
#show-other-bookmarks_PersonalToolbar,
#placesContext_showAllBookmarks,
#placesContext_editSeparator{
  display: none
}
#placesContext_cut,
#placesContext_copy,
#placesContext_paste_group{
  order: 2;
}
#placesContext_deleteSeparator{
  order: 3;
}
#placesContext_show_folder\:info,
#placesContext_deleteFolder,
#placesContext_delete,
#placesContext_show_bookmark\:info,
#placesContext_deleteBookmark{
  order: 4;
}

from firefox-csshacks.

Awesome, thank you so much. That feels much better now :)
Do you know how to change the right click on the addressbar? I would like to remove "copy withouth tracking" and also dependent on which website you are on there is this "add xyz" button at the bottom. Getting rid of it would be nice ^^

...........youtube.........................................................................github........................................................................................neutral

from firefox-csshacks.

Simply hiding some elements is much easier, this would simply be:

#strip-on-share,
.menuseparator-add-engine,
.urlbar-input-box .context-menu-add-engine{
  display: none;
}

But I suggest you go and check how to use browser toolbox to inspect the UI yourself and check some CSS basics guides - there are loads around the web. Learning this bit will make it much easier and faster for yourself to change various random aspects of the browser rather than relying on somebody else.

from firefox-csshacks.

Yes I heard about it, I will have to do it.
I have a question, on the older firefox versions when you right-clicked an image, there was an option to "show image"(like in the current tab). Now there is only the option "show image in new tab", which in the older version of firefox, was the 2nd option. Do you know if this functionality is still there? Or was it removed?

from firefox-csshacks.

That behavior was removed, but you can get similar behavior back by using an extension.

from firefox-csshacks.

Any idea how to tackle this blue line inside some search/input boxes? This is really annoying ^^

from firefox-csshacks.