MozillaZine

[SOLVED] Importing other style sheets into userChrome.css

User Help for Mozilla Firefox
xanthon
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 25th, 2018, 5:37 pm

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?
Last edited by xanthon on January 28th, 2018, 3:30 pm, edited 3 times in total.

Frank Lion

User avatar
 
Posts: 19996
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 25th, 2018, 5:50 pm

xanthon wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

xanthon
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 25th, 2018, 5:59 pm

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
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 25th, 2018, 6:10 pm

No, that made no difference.

Frank Lion

User avatar
 
Posts: 19996
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 25th, 2018, 6:32 pm

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

xanthon
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 25th, 2018, 8:17 pm

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
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 25th, 2018, 9:09 pm

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

MarkRH

User avatar
 
Posts: 1237
Joined: September 12th, 2007, 2:30 am
Location: Oklahoma City, OK

Post Posted January 25th, 2018, 9:31 pm

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
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 25th, 2018, 9:41 pm

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

User avatar
 
Posts: 19996
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 26th, 2018, 7:31 am

xanthon wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Brummelchen
 
Posts: 3519
Joined: March 19th, 2005, 10:51 am

Post Posted January 26th, 2018, 9:47 am

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
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 26th, 2018, 3:43 pm

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.

Image

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

User avatar
 
Posts: 19996
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 27th, 2018, 4:02 am

xanthon wrote: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.


xanthon wrote: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 - viewtopic.php?p=14771130#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) - viewtopic.php?f=7&t=2777255
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

xanthon
 
Posts: 167
Joined: December 17th, 2005, 11:55 pm

Post Posted January 27th, 2018, 7:26 pm

Thanks.

dickvl

User avatar
 
Posts: 52386
Joined: July 18th, 2005, 3:25 am

Post Posted January 27th, 2018, 11:26 pm

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 */

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 9 guests