[SOLVED] Importing other style sheets into userChrome.css

[xanthon]

Two references : https://drafts.csswg.org/css-cascade-3/ ... def-import and https://www.w3schools.com/cssref/pr_import_rule.asp

I have the following lines before other code in userChrome.css :

Code: Select all

@import url("searchbar.css") scene;
@import url("tabbar.css") scene;

The other css files are in the same folder (/chrome) as userChrome.css. However, the styles in the other documents are NOT applied. If I copy the contents of those documents into userChrome.css, the styles ARE applied. I have tried with and without " scene".

The content of the stylesheet searchbar.css is as follows. The desired result is to reconfigure the search bar so that it lists the names of the search engines.

Code: Select all

@-moz-document url(chrome://browser/content/browser.xul) {
  /* Make the one-off buttons span the full width */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] {
    width: 100% !important;
    height: 24px !important;
    background-image: none !important;
    padding-left: 6px !important;
    box-sizing: content-box !important;
    line-height: 1em !important;
  }
  /* Hide the empties */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item:not([tooltiptext]) {
    display: none !important;
  }
  /* Fix up borders */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext], 
  #PopupSearchAutoComplete .addengine-item {
    border-bottom: 1px solid #ccc !important;
  }
  #PopupSearchAutoComplete .search-setting-button.search-panel-header, 
  #PopupSearchAutoComplete .addengine-item,
  #PopupSearchAutoComplete .search-panel-header.search-panel-current-input {
    border-top: none !important;
    max-height: 26px !important;
    min-height: 16px !important;
    padding-top: 1px !important;
  }
  /* Insert descriptive name for search engine plugin */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]::after {
    content: attr(tooltiptext);
    margin: 5px 6px 0px !important;
    display: block !important;
  }
  /* Fix icon positioning */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box {
    display: inline-flex !important;
    width: 16px !important;
    max-width: 16px !important;
    border: none !important;
    padding: 0 0 !important;
  }
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box > .button-icon {
    display: block !important;
    margin-top: 4px !important;
    margin-left: -1px !important;
  }
  /* Lock in space for 5 search suggestions with scroll bar */
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .tree-bodybox,
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .autocomplete-treebody {
    display: flex !important;
    flex: 1 1 auto !important;
  }
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .autocomplete-treebody {
    max-height: calc(5 * 1.5em) !important;
    min-height: calc(5 * 1.5em) !important;
  }
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .tree-scrollbar[collapsed="true"] {
    visibility: visible !important;
  }
  /* User style options */
    /* One column - standard spacing (built-in above) */
    /* Hiding "Search for ..." */
  #PopupSearchAutoComplete .search-panel-header.search-panel-current-input {
    display: none !important;
  }
    /* Not hiding "Add ..." engine */
    /* Not hiding "Change Search Settings" */
    /* Search bar tooltip text only visible on mouseover */
    /* For light theme */
  #PopupSearchAutoComplete .search-panel-one-offs:not(:hover):not([selected]), 
  #PopupSearchAutoComplete .searchbar-engine-one-off-item:not(:hover):not([selected]) {
    color: #111 !important;
    background-color: #fafafa !important;
  }
  #PopupSearchAutoComplete .search-panel-header, 
  #PopupSearchAutoComplete .search-panel-input-value, 
  #PopupSearchAutoComplete .addengine-item {
    color: #111 !important;
  }
}

Can anyone see what I am doing wrong?

[Frank Lion]

Can anyone see what I am doing wrong?

I'm reckoning that you are not putting the @import urls ABOVE the namespace line?

It's not your fault, the first link is written by some geek who doesn't make that clear.

[xanthon]

Thanks for replying. I am not using a namespace line, following a recommendation made in response to another question on mozilla.org.

I'll try using a string instead of an url as mentioned on the w3schools page :

Code: Select all

@import"searchbar.css";
@import "tabbar.css";

[xanthon]

No, that made no difference.

[Frank Lion]

WFM placing a valid test red.css in the chrome folder and this at the head in userChrome.css and it's reading it fine -

Code: Select all

@import url("red.css");

The content of the stylesheet searchbar.css is as follows

...is the absence of double braces at the end of that code another recommendation by mozilla.org?

Certainly broken @-moz-document url code in your searchbar.css would explain why the same code works in userChrome.css i.e. you don't need the @-moz-document url wrapping in that file for the rest of the .css to work.

[xanthon]

Thanks for replying. What do you mean by "the absence of double braces at the end of that code" and "broken @-moz-document url code"?

[xanthon]

It seems that it is the file searchbar.css which is the problem. What amendments would you suggest?

[MarkRH]

In that searchbar.css try one of two things.

1. Get rid of that first line:

Code: Select all

@-moz-document url(chrome://browser/content/browser.xul) {

Or, 2: Add a "}" after the last line because you never closed the opening "{" at the end of the first line.

[xanthon]

Thanks for replying. I have tried getting rid of that line to no avail. I have also tried the following :

Code: Select all

@-moz-document url-prefix() {

I have re-pasted the code because the last '}' was accidentally omitted when I first copied the code.

[Frank Lion]

It seems that it is the file searchbar.css which is the problem. What amendments would you suggest?

I see the {} count is now balanced.

There's nothing wrong with that code - I tested it in a new searchbar.css that I created in Firefox 58.

That pretty much leaves only 2 things - the files are misnamed or they are in the wrong location and the @import urls are just not finding the files. Unlikely, but there's not much left.

If you don't fix this yourself, I'll need a screenshot of the contents of your chrome folder and your code for the top 20 lines of your userChrome.css pasted here.

Good luck.


Btw I'd like the link to where someone thought the XUL namespace isn't needed in userChrome.css.

[Brummelchen]

solution is that simple...

@import url(searchbar.css);

dont know about the quotes, but scene" is definitely wrong - i already wondered first time when reading because Aris never used it...
https://github.com/aris-t2/customcssforfx

[xanthon]

Thanks for the replies. I tried with and without ' scene', currently without.

I was wrong about the file tabbar.css; it is being imported.

This is the topic I happened upon at support.mozilla, org : Does userChrome.css really require the @namespace url... line?

Quite by chance I have come across the following additional namespace :

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

I am attaching a snapshot of the chrome folder. I use a Linux system and there is a link in the appropriate location to the .mozilla folder.



These are the top lines of code in userChrome.css. You will see that I have commented the import code relating to searchbar.css.

Code: Select all

/* @import url("searchbar.css"); */
@import url("tabbar.css");

/* global font */
* {
  font-size: 13pt !important;
}

/* change font size in bookmarks */
#personal-bookmarks .bookmark-item > .toolbarbutton-text { font-size:13pt !important; }

/* Global UI font for ALL menus-options and dropdown menus */
    * { font-size: 13pt !important; 
}

/* change font color of popup menus */
menupopup > menu,
menupopup > menuitem,
popup > menu,
popup > menuitem {
  color: darkblue !important;
}

[Frank Lion]

I am attaching a snapshot of the chrome folder....
...These are the top lines of code in userChrome.css. You will see that I have commented the import code relating to searchbar.css.

I see no errors in either.

As the importing of tabbar.css is working, I suggest you add your searchbar.css coding to the end of that file, comment in both userChrome.css and tabbar.css what you have done and move on. You can always come back to that one at a future date, if needed.

This is the topic I happened upon at support.mozilla, org : Does userChrome.css really require the @namespace url... line?

Makes sense. cor-el on that thread is dickvl here. Dick's second language is English (which is why he doesn't explain stuff much) and he has been giving advice on userChrome.css stuff for over 10 years. His .css snippets are always 100% accurate.

Meantime, the other guy does mainly html web page stuff here and struggles on simple .css - http://forums.mozillazine.org/viewtopic ... #p14771130 With the Firefox 57+ release suddenly requiring the need of userChrome.css to customise the UI there has been much questionable advice floated about.

You may find this thread generally useful (the more advanced .css stuff is in the middle pages) - http://forums.mozillazine.org/viewtopic ... &t=2777255

[xanthon]

Thanks.

[dickvl]

Each file you import in userChrome.css needs to have the @namespace line at the start of the file.
userChrome.css needs this line as well, but all @import rules need to be before the @namespace line in userChrome.css.

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */