X
Tap here to go to the mobile version of the site.

Support Forum

Can I change size of "Bookmark this Page" box?

Posted

When adding a bookmark, I often have to find the right folder to categorise the link, which often requires a lot of looking around the folder structure. This is made much harder by the limited size of the bookmarks box as it is. Is there a way to change it, or make in variable?

Thanks!

When adding a bookmark, I often have to find the right folder to categorise the link, which often requires a lot of looking around the folder structure. This is made much harder by the limited size of the bookmarks box as it is. Is there a way to change it, or make in variable? Thanks!
Attached screenshots

Chosen solution

You would have to browse/search the Firefox source code.

But you would normally use the Browser Toolbox to inspect a specific element and find its selector.

Read this answer in context 0
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0

More Information

jscher2000
  • Top 10 Contributor
8695 solutions 71066 answers

Helpful Reply

Yes, but, it's not an easily available setting. The way you can modify toolbars and panels that drop from toolbars is through an optional file named userChrome.css which Firefox checks at startup.

To allow more space for folders, it's useful to remove the image at the top, so here is a combination of rules to try. Please allow 10 minutes for this.

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* Add/Edit Bookmarks Drop-down */
/* Taller Folder List */
#editBMPanel_folderTree {
  min-height: 350px !important; 
}
/* Hide Giant Thumbnail and Favicon */
#editBookmarkPanelImage, 
*|div#editBookmarkPanelFaviconContainer {
  display: none !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Finder window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

There are boring videos for Mac and Windows if you like videos.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

Yes, but, it's not an easily available setting. The way you can modify toolbars and panels that drop from toolbars is through an optional file named '''userChrome.css''' which Firefox checks at startup. To allow more space for folders, it's useful to remove the image at the top, so here is a combination of rules to try. Please allow 10 minutes for this. ''This assumes you do not already have a userChrome.css file. If you ''do'' already have a working userChrome.css file, you just need to add the rule under (A) to your file.'' '''(A) Select and copy the following style rule code''' <pre>/* Add/Edit Bookmarks Drop-down */ /* Taller Folder List */ #editBMPanel_folderTree { min-height: 350px !important; } /* Hide Giant Thumbnail and Favicon */ #editBookmarkPanelImage, *|div#editBookmarkPanelFaviconContainer { display: none !important; } </pre> '''(B) Generate and download a''' <code>userChrome.css</code> '''file''' Open the following page and paste the above rules into the editor, replacing the sample rule: https://www.userchrome.org/download-userchrome-css.html Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot) Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot) Minimize that Finder window for later reference. '''(C) Create a new''' <code>chrome</code> '''folder in your profile folder''' The following article has the detailed steps for that (#1, #2, and I recommend #3) https://www.userchrome.org/how-create-userchrome-css.html There are boring videos for Mac and Windows if you like videos. '''(D) Move the''' <code>userChrome.css</code> '''file you generated in Step B into the''' <code>chrome</code> '''folder you created in Step C''' The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
Was this helpful to you? 1
Quote

Question owner

Thanks for your reply. That was straightforward. However, I diligently followed the steps and there was no effect on that box. Any ideas why?

I'm on Firefox Quantum 66.0.4

Thanks for your reply. That was straightforward. However, I diligently followed the steps and there was no effect on that box. Any ideas why? I'm on Firefox Quantum 66.0.4
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8695 solutions 71066 answers

I would backtrack through the steps to make sure things ended up in the right place with the right names.

I would backtrack through the steps to make sure things ended up in the right place with the right names.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17477 solutions 157949 answers

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file and not as a RTF file (open the file in a Firefox tab).

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

It is not that difficult to create userChrome.css if you have never used it. The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder. *https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name <u>chrome</u> in this folder (name is all lowercase). In the <b>chrome</b> folder you need to create a text file with the name <u>userChrome.css</u> (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file and not as a RTF file (open the file in a Firefox tab). You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.
Was this helpful to you?
Quote

Question owner

I have retraced the steps. Below is a screenshot which shows my firefox info screen, the userChrome.css file itself in finder, and its contents. This should be everything. Have I missed anything?


Thanks both for your help I really appreciate it!

I have retraced the steps. Below is a screenshot which shows my firefox info screen, the userChrome.css file itself in finder, and its contents. This should be everything. Have I missed anything? Thanks both for your help I really appreciate it!
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17477 solutions 157949 answers

The screenshot shows that you didn't add the !important flag (display:none!important;) This flag is required to be able to override existing CSS rules.

#editBMPanel_folderTree { min-height: 40em !important; }

#editBookmarkPanelImage,
*|div#editBookmarkPanelFaviconContainer,
#editBookmarkPanel .panel-header { display: none !important; }
The screenshot shows that you didn't add the !important flag (display:none!important;) This flag is required to be able to override existing CSS rules. <pre><nowiki>#editBMPanel_folderTree { min-height: 40em !important; } #editBookmarkPanelImage, *|div#editBookmarkPanelFaviconContainer, #editBookmarkPanel .panel-header { display: none !important; } </nowiki></pre>
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8695 solutions 71066 answers

cor-el said

The screenshot shows that you didn't add the !important flag (display:none!important;) This flag is required to be able to override existing CSS rules.

I think that might be caused by an issue with email notifications. To copy the code in its fullest form, it is best to come back to this thread and copy from this page instead of an email.

''cor-el [[#answer-1222889|said]]'' <blockquote> The screenshot shows that you didn't add the !important flag (display:none!important;) This flag is required to be able to override existing CSS rules. </blockquote> I think that might be caused by an issue with email notifications. To copy the code in its fullest form, it is best to come back to this thread and copy from this page instead of an email.
Was this helpful to you?
Quote

Question owner

I think I've got that right now, and restarted (screenshot attached), but still nothing. Any more ideas?!


Thanks again for your ongoing attention.

I think I've got that right now, and restarted (screenshot attached), but still nothing. Any more ideas?! Thanks again for your ongoing attention.
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8695 solutions 71066 answers

Helpful Reply

Hi malinod, sorry for the delay, I was away for a week at a conference.

What program are you using for your CSS viewer? It's funny that the tabs are shaped like the old Google Chrome tabs.

Anyway, if Firefox is not reading the file correctly, could you reconfirm that it is saved in the place that Firefox looks for it? You could check the video for clarification if my page didn't do the job. https://vimeo.com/245560075

Hi malinod, sorry for the delay, I was away for a week at a conference. What program are you using for your CSS viewer? It's funny that the tabs are shaped like the old Google Chrome tabs. Anyway, if Firefox is not reading the file correctly, could you reconfirm that it is saved in the place that Firefox looks for it? You could check the video for clarification if my page didn't do the job. https://vimeo.com/245560075
Was this helpful to you? 1
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17477 solutions 157949 answers

Try to add the default @namespace line at the top of the file.

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

Did you try to open userChrome.css in a Firefox tab to confirm that the file is OK?

Can you post the location of the userChrome.css file?

Try to add the default @namespace line at the top of the file. <pre>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ </pre> Did you try to open userChrome.css in a Firefox tab to confirm that the file is OK? Can you post the location of the userChrome.css file?
Was this helpful to you? 1
Quote

Question owner

Thank you both! It's fixed now. The problem was that the chrome folder was not inside the Profile sub-folder, but just a level up.

Very silly oversight. Thank you again for your patience, it really means a lot to me.

Do you know where the documentation that lists every Firefox element that can be customised is?

Thank you both! It's fixed now. The problem was that the chrome folder was not inside the Profile sub-folder, but just a level up. Very silly oversight. Thank you again for your patience, it really means a lot to me. Do you know where the documentation that lists every Firefox element that can be customised is?
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17477 solutions 157949 answers

Chosen Solution

You would have to browse/search the Firefox source code.

But you would normally use the Browser Toolbox to inspect a specific element and find its selector.

You would have to browse/search the Firefox source code. *https://dxr.mozilla.org/mozilla-release/ But you would normally use the Browser Toolbox to inspect a specific element and find its selector. *https://developer.mozilla.org/en-US/Tools/Browser_Toolbox
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.