Need help creating a Stylem style Topic is solved

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Need help creating a Stylem style

Unread post by Navigator » 2023-03-10, 17:41

I am trying to create a Stylem style that affects one of the about:addons subpages as Enobarbous showed me.
Enobarbous wrote:
2023-02-27, 09:07

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#addon-list .button-link {
  color:red!important; /*Replace "red" with the desired color*/
}
This time it is the font size or zoom of https://addons.palemoon.org/?component=discover as loaded in the "Get Add-ons" tab of the Add-ons Manager. That page loads too small for me, but I don't want to zoom everything else within the the Add-ons Manager as they are already large. If I view just https://addons.palemoon.org/?component=discover my zoom setting is remembered, but it is not used within the Frame of the tab. How can I make that larger using Stylem?

Enobarbous
Apollo supporter
Apollo supporter
Posts: 49
Joined: 2022-12-06, 17:44

Re: Need help creating a Stylem style

Unread post by Enobarbous » 2023-03-10, 20:40

Right?
font.jpg

Something like this

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("https://addons.palemoon.org/?component=discover") {
#Discover-Wrapper {
  font-size:20px!important; /*font only*/
  /*transform: scale(1.1)!important; /*entire page*/
  }
}
Note that if the size is too large, the text will go beyond the borders of the elements. This can be fixed, but I'm a little lazy :)
Besides, given that all the buttons on this page do is open a new tab addons.palemoon.org/bla-bla... For my taste it is easier to add addons.palemoon.org to bookmarks and remove "Get Addons" item in about:addon by setting extensions.getAddons.showPane = false
I am sorry for the use of auto-translator to post

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-03-10, 21:24

:clap:

Added larger "button" sizes.

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("https://addons.palemoon.org/?component=discover") {
#Discover-Wrapper {
  font-size:18px!important; /*font only*/
  }
#Discover-Wrapper .amobutton {
  width:300px!important; 
  height:90px!important;
  }
}

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-03-20, 16:02

Enobarbous wrote:
2023-03-10, 20:40
Right?
Enobarbous, you have helped me twice to use Stylem. I am trying to learn but I have another area I would like to change and I have no idea how to approach it, if it is possible. On the other elements it was possible to use the Inspector tool to look at the source but I see no way to do that here.

The location field where you type a URL has a drop-down menu of possible matches from Bookmarks and History as you type. These have both a title and a URL. The title is easy to read but the URL is dark blue on dark gray. I would like to change blue to red or something else with higher contrast.

I cannot provide a screen capture as every time I press the "Print Screen" key Linux Mint closes that menu before starting the capture, and I don't know of another way.

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Need help creating a Stylem style

Unread post by moonbat » 2023-03-20, 20:58

Navigator wrote:
2023-03-20, 16:02
I cannot provide a screen capture as every time I press the "Print Screen" key Linux Mint closes that menu before starting the capture, and I don't know of another way.
You can install a custom screenshot application to trigger from pressing printscreen. I use Mint XFCE edition, and have set it to launch xfce4-screenshooter. You can also install Shutter if you're using Cinnamon/MATE edition; I prefer the former because it's much lighter.
Go to the Software Manager in the app menu (under System category) and search for Shutter (or xfce4-screenshooter). Supply the root password when prompted and it will install it.
After installing it, go to System - Keyboard - Application shortcuts tab and you can add a shortcut to Shutter to launch it by pressing print-screen. Specify the command as /usr/bin/shutter or /usr/bin/xfce4-screenshooter. Shutter lets you capture a part of the screen or the active window or even a website and has plenty of options on saving them; xfce4-screenshooter is a little basic but loads faster.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

Enobarbous
Apollo supporter
Apollo supporter
Posts: 49
Joined: 2022-12-06, 17:44

Re: Need help creating a Stylem style

Unread post by Enobarbous » 2023-03-20, 22:39

Navigator wrote:
2023-03-20, 16:02
The location field where you type a URL has a drop-down menu of possible matches from Bookmarks and History as you type. These have both a title and a URL. The title is easy to read but the URL is dark blue on dark gray. I would like to change blue to red or something else with higher contrast.
This menu?
menu.jpg
If so, for links it is something like this

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.private-autocomplete-richlistitem .ac-url-box .ac-url-text {
  color:red!important;
}
As for "how to determine the right selector," I use DOM Inspector (it works for pm) and button "Attributes Inspector" for Custom Button extension (from this post).
I am sorry for the use of auto-translator to post

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-03-21, 17:15

Enobarbous wrote:
2023-03-20, 22:39
If so, for links it is something like this

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.private-autocomplete-richlistitem .ac-url-box .ac-url-text {
  color:red!important;
}
That is exactly what I needed. Thank you.

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-03-21, 18:10

moonbat wrote:
2023-03-20, 20:58
You can install a custom screenshot application to trigger from pressing printscreen. I use Mint XFCE edition, and have set it to launch xfce4-screenshooter. You can also install Shutter if you're using Cinnamon/MATE edition; I prefer the former because it's much lighter.
I am using Mint Cinnamon. I will need to use Shutter rather than xfce4-screenshooter in this case?

User avatar
andyprough
Astronaut
Astronaut
Posts: 698
Joined: 2020-05-31, 04:33

Re: Need help creating a Stylem style

Unread post by andyprough » 2023-03-21, 18:46

Navigator wrote:
2023-03-21, 18:10
I am using Mint Cinnamon. I will need to use Shutter rather than xfce4-screenshooter in this case?
flameshot is also a very nice screenshot program on GNU/Linux.

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Need help creating a Stylem style

Unread post by moonbat » 2023-03-21, 22:00

Navigator wrote:
2023-03-21, 18:10
I am using Mint Cinnamon. I will need to use Shutter rather than xfce4-screenshooter in this case?
Not sure, perhaps if you install an XFCE application it will also install related XFCE dependencies. I am using the Caja file manager from MATE rather than the default Thunar that XFCE uses, and while installing it there were other MATE related dependencies. Might be overkill for a simple screenshot app so you could go with Shutter instead.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-04-09, 19:48

Enobarbous wrote:
2023-03-20, 22:39
As for "how to determine the right selector," I use DOM Inspector (it works for pm) and button "Attributes Inspector" for Custom Button extension (from this post).
Enobarbous, this is another request for your help. I am trying to learn the DOM Inspector but I still fail.

I would like to make the separators within Toolbar menus, including the Bookmarks Toolbar Items, more visible: thicker, a space above and below, and a different color. Please help me if you have the patience.

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Need help creating a Stylem style

Unread post by Blacklab » 2023-04-09, 23:13

Navigator wrote:I would like to make the separators within Toolbar menus, including the Bookmarks Toolbar Items, more visible: thicker, a space above and below, and a different color.
Curiously, it seems Bookmarks Toolbar Separators may be one of those items that it probably isn't possible to change with CSS userstyles alone?

Looking at a lot of posts on the subject of thickening and/or colouring the Bookmarks Toolbar Separators I can't see anyone having success... hide, delete, invert; Yes... thicken, widen, colour; No. I tested a lot of userstyles with no joy either. The technical reason for this apparent intransigence to normal CSS rules changing width or colour are beyond my grasp of CSS userstyles and browser UI coding... the suggestion in a couple of posts is that the Separators actually use 'native-like' styling (on Windows at least)?

Delighted to be corrected, informed, educated by those with more detailed knowledge of this somewhat niche subject! :)

--------------------

The CSS selector for the Bookmarks Toolbar Separators is just 'toolbarseparator' or '#PlacesToolbarItems > toolbarseparator'... so you can do some online searches yourself and look-up the various attempts to alter the thickness and colour (be careful with dates of posts as to which Firefox UI version is being referred to... Firefox's selectors and CSS in use changes over time!).

Try adding several separators to Pale Moon's Bookmarks Toolbar (right-click > 'New Separator')... and then try this code from an old Reddit 'r/Firefox' thread from 10 years ago: https://www.reddit.com/r/firefox/commen ... ansparent/ The selectors are correct for Pale Moon... and with that CSS userstyle active (highly recommend using Lootyhoof's excellent 'Stylem' extension for quick CSS testing & tweaking) all the Bookmarks Toolbar Separators will disappear as expected:

Code: Select all

#PlacesToolbarItems toolbarseparator { opacity: 0 !important; }
--------------------

PS. On a slightly brighter note you might enjoy the numerous Bookmarks Toolbar tweaks in the final version of 'Roomy Bookmarks Toolbar (v1.4 17)' extension saved in the Classic Add-ons Archive (CAA) before Firefox 57 moved to only supporting WebExtensions in November 2017. :thumbdown:

BTW - The whole CAA archive is downloaded as a single extension... and a very large one at 42.6MB! Once installed, you can search within the CAA extension's many hundreds of pre-WebExtensions Add-ons in thousands of versions. Due to the size of CAA, and relatively infrequent use, I store it on another 'Test Profile' of Pale Moon, and not on my daily default profile.

Roomy Bookmarks Toolbar v1.4.17 - 'About this Add-on' page from CAA.png
Roomy Bookmarks Toolbar v1.4.17 - 'About this Add-on' page - as saved in the Classic Add-ons Archive (CAA).

Copy of 'Roomy Bookmarks Toolbar v1.4 17' from CAA attached below for ease and simplicity (scanned clean)... a random selection of options worked correctly on a test profile using latest Pale Moon 32.1.0... but no guarantee it all works, caveat emptor! :) :
Attachments
roomy_bookmarks_toolbar-1.4.17-fx.xpi
(60.04 KiB) Downloaded 2 times
Last edited by Blacklab on 2023-04-10, 00:41, edited 1 time in total.

User avatar
moonbat
Knows the dark side
Knows the dark side
Posts: 4942
Joined: 2015-12-09, 15:45
Contact:

Re: Need help creating a Stylem style

Unread post by moonbat » 2023-04-10, 00:29

Roomy bookmarks toolbar has long since been forked for PM as Cozy Bookmarks Toolbar so there's no need for all this rigmarole. There are 200+ extensions for Pale Moon already, suggest you look there first for a solution rather than relying on dead and unmaintained FF extensions from CAA as your first place to look.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Image
Linux Mint 21 Xfce x64 on HP i5-5200 laptop, 12 GB RAM.
AutoPageColor|PermissionsPlus|PMPlayer|Pure URL|RecordRewind|TextFX

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-04-10, 16:24

Blacklab wrote:
2023-04-09, 23:13
Looking at a lot of posts on the subject of thickening and/or colouring the Bookmarks Toolbar Separators I can't see anyone having success... hide, delete, invert; Yes... thicken, widen, colour; No.
I appreciate the detailed post. Picking out the most hopeful part what do you mean by invert? Right now I have black lines on dark gray that are nearly invisible; if those could be made white it would be useful.

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-04-10, 16:38

Blacklab wrote:
2023-04-09, 23:13
(highly recommend using Lootyhoof's excellent 'Stylem' extension for quick CSS testing & tweaking) all the Bookmarks Toolbar Separators will disappear as expected:

Code: Select all

#PlacesToolbarItems toolbarseparator { opacity: 0 !important; }
I tried this just to see it work and I realize it removes the vertical separator bars, but the ones I want to change are actually the horizontal bars within the menus. I forgot there were two different kinds when I posted. Perhaps changing the horizontal bars is still possible?

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Need help creating a Stylem style

Unread post by Blacklab » 2023-04-10, 17:22

Navigator wrote:I realize it removes the vertical separator bars, but the ones I want to change are actually the horizontal bars within the menus.
Many different menus in the browser UI... not clear exactly which of 'the menus' you trying to alter?

Changing the colour/width/length of separator bars seems to be difficult, complex, perhaps not possible, regardless of the menu type involved. Hiding menu separators seems to be the easier option.

--------------------

BTW - Almost all bookmarks separators can be added and deleted using right-click menu on respective Bookmarks Toolbar or Bookmarks Menu (dropdown). There are a few 'fixed' separators in Bookmarks Menu (dropdown) that require a CSS userstyle or an extension to hide them.

Deleting the 'optional' separator bars can require very accurate pointer positioning to hit the 1px wide line accurately. Thus, very much easier to add/delete/drag separators from within the Bookmarks Library.

The same 'optional' separators display inside the Library as on the Bookmarks Toolbar/Menu (dropdown). Can either use Library's 'Organize Tab > New Separator' to add a separator, or Right-click menu to both add and delete... can also simply 'click & drag' to reposition separators as required.

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-04-10, 19:14

Blacklab wrote:
2023-04-10, 17:22
Navigator wrote:I realize it removes the vertical separator bars, but the ones I want to change are actually the horizontal bars within the menus.
Many different menus in the browser UI... not clear exactly which of 'the menus' you trying to alter?

Changing the colour/width/length of separator bars seems to be difficult, complex, perhaps not possible, regardless of the menu type involved. Hiding menu separators seems to be the easier option.
Pardon me. I am not trying to be vague. There are horizontal separators in the main menus File, Edit, View, etc. but especially those shown within folders on the "Bookmarks Toolbar Items" object as named in the toolbar customization dialog. These are optional separators that I can add or delete at will but they are essentially invisible as they are black on dark gray, and 1px high as you noted.

In the Organize Bookmarks (Bookmarks Library) these same optional separators are much more visible, thicker and with generous space above and below.

Blacklab
Board Warrior
Board Warrior
Posts: 1080
Joined: 2012-06-08, 12:14

Re: Need help creating a Stylem style

Unread post by Blacklab » 2023-04-10, 20:28

IMHO you have set yourself a difficult task. Although you will be able to find the correct selectors for the separators in the Bookmarks Menu and its folders using the DOM Inspector or Browser Toolbox you are then faced with writing/finding/modifying/testing CSS userstyles to adjust the appearance of the various separators you wish to alter.

A little online research suggests that altering separator colour/width/opacity via CSS is not simple. It may be possible to construct the necessary CSS userstyles from inspecting the browser and then diligently searching all the likely CSS discussion sites for 'separator' related Q&A threads (e.g. Mozillazine, Mozilla Support (SUMO), Reddit subs; r/Firefox & r/FirefoxCSS, GitHub, userstyles.org, etc.) to see how others have tackled modifying separators? There are a good number of separator related CSS topics out there, but AFAICS no neat answer provided on a plate. Legwork beckons. :)

This 2018 SUMO thread 'how to change color of bookmark separators in folders opened from bookmarks toolbar' might be a good place to start? Contains suggestions from cor-el and jscher2000; both of them have been writing CSS userstyle tweaks for Firefox for more than a decade!

FWIW - My preference is to delete/hide several Bookmarks Menu items and all separators... but leave the separators on all other menus as is. To clean up the Bookmarks Menu dropdown panel itself I use a modified version of the CSS suggested by 'cor-el' in this old Mozilla Support (SUMO) thread: https://support.mozilla.org/en-US/questions/877124. (The BookmarkMenuHider 1.4.1 extension, available in CAA, achieves the same with a few more options.)

Enobarbous
Apollo supporter
Apollo supporter
Posts: 49
Joined: 2022-12-06, 17:44

Re: Need help creating a Stylem style

Unread post by Enobarbous » 2023-04-11, 06:04

Navigator wrote:
2023-04-10, 19:14
There are horizontal separators in the main menus File, Edit, View, etc. but especially those shown within folders on the "Bookmarks Toolbar Items" object as named in the toolbar customization dialog.
It's a little more complicated. Well, not more complicated, but the styling of this element is less logical. So you'll probably have to fiddle with the individual selection of colors / indentation, etc.
But as an example:

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
menuseparator {
  -moz-appearance:none !important; /* without it, the other rules are ignored */
  border-top:3px solid red;
  border-bottom:3px solid orange;
  background-color: blue;
  padding:2px;
  /*height:5px;*/
}
menuseparator.jpg
menuseparator.jpg (18.06 KiB) Viewed 980 times
menusep2.jpg
menusep2.jpg (16.52 KiB) Viewed 978 times
Please help me if you have the patience.
I have a lot of patience, but not always good with time :)



Blacklab wrote:
2023-04-09, 23:13
Looking at a lot of posts on the subject of thickening and/or colouring the Bookmarks Toolbar Separators I can't see anyone having success... hide, delete, invert; Yes... thicken, widen, colour; No.
This is caused by the hard-coded "-moz-appearance" in the browser's native style. If you redefine it as "-moz-appearance:none !important;" in the custom style, a full styling is possible.
I am sorry for the use of auto-translator to post

User avatar
Navigator
Moon lover
Moon lover
Posts: 99
Joined: 2023-02-24, 17:53

Re: Need help creating a Stylem style

Unread post by Navigator » 2023-04-15, 15:52

Enobarbous wrote:
2023-04-11, 06:04
It's a little more complicated. Well, not more complicated, but the styling of this element is less logical. So you'll probably have to fiddle with the individual selection of colors / indentation, etc.
But as an example:

Code: Select all

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
menuseparator {
  -moz-appearance:none !important; /* without it, the other rules are ignored */
  border-top:3px solid red;
  border-bottom:3px solid orange;
  background-color: blue;
  padding:2px;
  /*height:5px;*/
}
menuseparator.jpgmenusep2.jpg
Please help me if you have the patience.
I have a lot of patience, but not always good with time :)
That's great! Thanks so much for this. I am perfectly happy waiting for your expertise.

Locked