How to move searchbar close button? Topic is solved

Users and developers helping users with generic and technical Pale Moon issues on all operating systems.

Moderator: trava90

Forum rules
This board is for technical/general usage questions and troubleshooting for the Pale Moon browser only.
Technical issues and questions not related to the Pale Moon browser should be posted in other boards!
Please keep off-topic and general discussion out of this board, thank you!
Scorp

How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 02:27

I'm using Palemoon 28.9.0.2

I want to move the search bar's close button from the left to the right.

Like this - https://i.ibb.co/VptzPRR/move-to-the-right.png

The photo above isn't of my actual browser, but that's what I want. I got the photo here where someone needed the same thing for Firefox - https://www.reddit.com/r/FirefoxCSS/com ... h_menu_to/

The reply he got actually works for me too, putting this CSS in my stylesheet:

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-inline: 0 4px !important; }
.findbar-container { padding-inline-start: 8px !important; }
But it doesn't work all the way. This is the result I get - https://i.imgur.com/gR6V3rB.jpg

So we know CSS works, I just don't know what code to use to get the desired result.

Can anyone help? Thanks :)

User avatar
Night Wing
Knows the dark side
Knows the dark side
Posts: 5151
Joined: 2011-10-03, 10:19
Location: Piney Woods of Southeast Texas, USA

Re: How to move searchbar close button?

Unread post by Night Wing » 2021-10-01, 10:18

Scorp wrote:
2021-10-01, 02:27
I'm using Palemoon 28.9.0.2
Off-topic:
Why are you using an old and "unsupported" version of Pale Moon which was released on March 25th, 2020?
Linux Mint 21.3 (Virginia) Xfce w/ Linux Pale Moon, Linux Waterfox, Linux SeaLion, Linux Firefox
MX Linux 23.2 (Libretto) Xfce w/ Linux Pale Moon, Linux Waterfox, Linux SeaLion, Linux Firefox
Linux Debian 12.5 (Bookworm) Xfce w/ Linux Pale Moon, Linux Waterfox, Linux SeaLion, Linux Firefox

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 16:53

Night Wing wrote:
2021-10-01, 10:18
Scorp wrote:
2021-10-01, 02:27
I'm using Palemoon 28.9.0.2
Off-topic:
Why are you using an old and "unsupported" version of Pale Moon which was released on March 25th, 2020?
Because it supports an extension that I absolutely need that none of the other/newer versions support :)

New Tobin Paradigm

Re: How to move searchbar close button?

Unread post by New Tobin Paradigm » 2021-10-01, 18:52

Too bad. Fork it and maintain or do without it or do without support.

We will help those who want to help them selves but no longer will we waste time on the gimmie crowd.
Last edited by New Tobin Paradigm on 2021-10-01, 22:05, edited 1 time in total.

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 19:50

New Tobin Paradigm wrote:
2021-10-01, 18:52
Too bad. Foek it and maintain or do wothout it or do without support.

We will help those who want to help them selves but no longer will we waste time on the gimmie crowd.
A little harsh, but you're right.

Okay, I updated. Now I'm using Palemoon 29.4.1 (64-bit).

It's the exact same thing though. The searchbar close button is on the left, and if I add the CSS from my opening post the close button moves a bit to the right but not all the way, just like the screenshot in my opening post shows.

So can I get some help now for the latest version of Palemoon please?

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

Re: How to move searchbar close button?

Unread post by Blacklab » 2021-10-01, 20:00

@Scorp:

There is a ton of information out there on how to move items in the Find Bar around using CSS. :)

Some diligent searching will bring up all manner of posts in Firefox Support, Reddit, Mozillazine, Userstyles, Bugzilla, etc, etc.

A good start would be carefully reading Frank Lion's posts in this old Mozillazine thread "Highlight All" moved to right side of search bar???: http://forums.mozillazine.org/viewtopic ... 7&start=30

Especially his posts on the 3rd page where he explains how the Find Bar is made up and what is in the various containers... and how to move them. Just be aware he wrote that in 2014 so there may have been other changes along the way... and of course he was describing Firefox, although Pale Moon would have been very similar at that time... and I doubt the Find Bar coding has changed very much since.

PS. I discovered something new about other 'find' options in Pale Moon too... never knew there is a 'Quick Find'...press / (forward slash key) and type... and a 'Quick Find (Links Only)' if you hit the ' key (apostrophe key).

Both of those 'Quick Find' options auto-hide again after about 5 seconds if unused. Learn something new every day :D
Last edited by Blacklab on 2021-10-01, 20:20, edited 1 time in total.

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 20:20

Blacklab wrote:
2021-10-01, 20:00
@Scorp:

There is a ton of information out there on how to move items in the Find Bar around using CSS. :)

Some diligent searching will bring up all manner of posts in Firefox Support, Reddit, Mozillazine, Userstyles, Bugzilla, etc, etc.

A good start would be carefully reading Frank Lion's posts in this old Mozillazine thread "Highlight All" moved to right side of search bar???: http://forums.mozillazine.org/viewtopic ... 7&start=30

Especially his posts on the 3rd page where he explains how the Find Bar is made up and what is in the various containers... and how to move them. Just be aware he wrote that in 2014 so there may have been other changes along the way... and of course he was describing Firefox, although Pale Moon would have been very similar at that time... and I doubt the Find Bar coding has changed very much since.

PS. I discovered something new about other 'find' options in Pale Moon too... never knew there is a 'Quick Find' (press '/' and type) and a 'Quick Find (Links Only)' if you hit the ' key (apostrophe key).

Both of those 'Quick Find' options auto-hide again after about 5 seconds if unused. Learn something new every day :D
I tried it already. See, this code moves the close button a bit to the right like in my screenshot:

Code: Select all

-moz-box-ordinal-group: 2 !important;
But it doesn't move it all the way to the right.

So I tried adding position:fixed and margin-left CSS to the stylesheet.

The margin-left worked, but then it moved the close button and everything to the right of it instead of just moving the close button. So I guess the position:fixed had no effect.

See, if I could see the html/css of the search bar I could probably figure it out, but I can't/don't know how to see the html/css of the search bar because you can't see it when you do inspect element :/

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

Re: How to move searchbar close button?

Unread post by Blacklab » 2021-10-01, 20:30

I've not spent time looking at modifying the Find Bar so I don't have an immediate solution.

But I expect the answer lies in Frank Lion's Mozillazine post where he explains that there are effectively two sets of containers 'nested' in the Find Bar...
Frank Lion wrote:...the find bar is one 'box' and within it there are only two boxes - .findbar-closebutton and .findbar-container.
and...
Frank Lion wrote:A clearer example would be in the findbar-container itself. This 'box' contains 5 boxes (the searchbar bit, the up arrow, the down arrow, Highlight and 'Match Case')...
or at least that was how the Find Bar was organised back in 2014!

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 21:52

Blacklab wrote:
2021-10-01, 20:30
I've not spent time looking at modifying the Find Bar so I don't have an immediate solution.

But I expect the answer lies in Frank Lion's Mozillazine post where he explains that there are effectively two sets of containers 'nested' in the Find Bar...
Frank Lion wrote:...the find bar is one 'box' and within it there are only two boxes - .findbar-closebutton and .findbar-container.
and...
Frank Lion wrote:A clearer example would be in the findbar-container itself. This 'box' contains 5 boxes (the searchbar bit, the up arrow, the down arrow, Highlight and 'Match Case')...
or at least that was how the Find Bar was organised back in 2014!
I played around with it a bit. I managed to get the CSS selectors for all the elements in the findbar by installing the DOM Inspector and Element Inspector extensions.

caa:addon/dom-inspector-6622
caa:addon/element-inspector

So this CSS:

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; }
.findbar-textbox { -moz-box-ordinal-group: 0 !important; }
.findbar-find-next { -moz-box-ordinal-group: 0 !important; }
.findbar-find-previous { -moz-box-ordinal-group: 0 !important; }
.findbar-highlight { -moz-box-ordinal-group: 0 !important; }
.findbar-case-sensitive { -moz-box-ordinal-group: 0 !important; }
.findbar-entire-word { -moz-box-ordinal-group: 0 !important; }
Does this - https://i.imgur.com/u551ZeY.jpg

And then if I add margin-left: 920px !important" to the .findbar-closebutton then it moves it all the way to the right. Like this - https://i.imgur.com/eeDYgaF.jpg

So that's good, I got what I wanted. But I still want the searchbox to be all the way to the left, then the arrows, then the highlight, then the match case, and then the whole words.

So I tried this:

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-left: 920px !important }
.findbar-textbox { -moz-box-ordinal-group: 0 !important; }
.findbar-find-next { -moz-box-ordinal-group: 0 !important; }
.findbar-find-previous { -moz-box-ordinal-group: 0 !important; }
.findbar-highlight { -moz-box-ordinal-group: 1 !important; }
.findbar-case-sensitive { -moz-box-ordinal-group: 1 !important; }
.findbar-entire-word { -moz-box-ordinal-group: 1 !important; }
Doesn't work. It just puts the highlight/match/whole boxes on the right side of the close button. But why? I mean the code should be dictating that tetbox/findnext/findprevious are container 0, then the highlight/casesensitive/entireword are container 1, and closebutton is container 2, and align accordingly.

Well I got this far. Can anyone help put the ball through the net?

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 22:44

So this is what I settled with:

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-left: 920px !important }
.findbar-highlight { -moz-box-ordinal-group: 0 !important; }
.findbar-case-sensitive { -moz-box-ordinal-group: 0 !important; }
.findbar-entire-word { -moz-box-ordinal-group: 0 !important; }
It puts the elements like this:

Highlight | Match Case | Whole Words | Search Box | Next | Previous | ----> Close Button

I tried putting the highlight box on the left of the search box at least, but I couldn't do it. The problem is that the xul.hbox container that holds the searchbox+next+previous+close buttons doesn't have a class or an ID or any selector. The only thing it has like an identifier of sorts is "anonid" which is findbar-textbox-wrapper, but I don't know how or if it's even possible to apply CSS to anonid. I did a quick google search and didn't find anything helpful on that.

I thought about re-writing the HTML or whatever in order to break up the stupid containers. Make each button in the findbar independent of each other. Then I could arrange them however I wanted. But I don't know where the code for that is located, and even if I did I'm not sure if such an edit could break the entire browser or something. Like I have a website based on Laravel and 1 little edit anywhere can bring the entire website down haha. Not sure how browsers react to edits, never did such a thing.

Well anyway, I got my X close button to the right of the page as I wanted, so success there.

I didn't get the alignment I wanted for the rest of the stuff in the findbar, but no matter, in fact this way may be better. The stupid highlight/matchcase/wholewords are stuck on the left side, forgotten there as they should be because I barely ever use them, and the rest of it is aligned nicely.

80/20 rule. I'm 80% happy with the result, good enough, moving on :)

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 23:06

Okay, I made it even better for my needs.

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-left: 950px !important; }
.findbar-highlight { -moz-box-ordinal-group: 0 !important; margin-left: 170px !important; margin-right: 20px !important; }
.findbar-case-sensitive { display:none !important; }
.findbar-entire-word { display:none !important; }
This completely removes the Match Case and Whole Words containers, freeing up the space.

Then it moves the Highlight All box to the right, which is where I like it because I tend to have the sidebar open on the left and I'm used to the searchbar starting where the sidebar ends, not beneath it.

Then it moves the Search Box just a little bit to the right of the Highlight All box, otherwise they're sort of stuck together and I don't like the look.

And of course it moves the Close button all the way to the right.

And I tested it, it works on Palemoon 28.9.0.2, which is what I'm using :D

User avatar
Admin
Site Admin
Site Admin
Posts: 405
Joined: 2012-05-17, 19:06

Re: How to move searchbar close button?

Unread post by Admin » 2021-10-01, 23:09

Scorp wrote:
2021-10-01, 23:06
And I tested it, it works on Palemoon 28.9.0.2, which is what I'm using :D
As already pointed out, you really, really should not be using a version that old.
Please update to the current version.
Did you know that moral outrage triggers the pleasure centers of the brain? It's unlikely you can actually get addicted to outrage, but there is plausible evidence that you can become strongly predisposed to it.
Source: https://www.bbc.co.uk/programmes/p002w557/episodes/downloads - "The cooperative species" and "Behaving better online"
Image

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 23:17

Admin wrote:
2021-10-01, 23:09
Scorp wrote:
2021-10-01, 23:06
And I tested it, it works on Palemoon 28.9.0.2, which is what I'm using :D
As already pointed out, you really, really should not be using a version that old.
Please update to the current version.
Man I have to use this version, it's the only one where the iMacros extension works.

And you can tell me to fork the extension or whatever, to make it work for the XUL system, but that's not so easy.

First of all I'm no coder. Second of all information on making a XUL extension or editing a webextension into XUL is scarse. And third of all the people who offer services to make/edit Chrome/Firefox extensions online either have never heard of Palemoon or want to charge crazy amounts for the work.

For example, I wanted this to work on Palemoon - https://addons.mozilla.org/en-US/firefo ... ube-audio/

So I contacted about 30 people who offer extensions services. A few didn't reply, a few told me they never heard of Palemoon, a few told me they only work with Webextensions. One quotes me $100, another quotes me $200-300, another quotes me $300-400, another quotes me $500, and another wanted $5,000 + $50 per month.

So where does that leave me? Pay $100 or $500 dollars to get a little extension made to work? Money doesn't grow on trees man :)

Anyway so I looked around and started using the Centaury browser for this specific need that I have.

I use Palemoon for everything I can, as I've found it's the best when it comes to CPU and Memory demands in most cases. I like the browser very much. If it had webextensions support, even limited, it would be so sweet :)

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

Re: How to move searchbar close button?

Unread post by Blacklab » 2021-10-01, 23:23

Well done... :thumbup:

Er... sort of... had me puzzled for a while... then realised you must have a much wider screen... desktop monitor I assume?

So i had to take some of the padding out of lines 1 & 2 to see the close button at all on an old 1366x768 laptop screen! :?

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-left: 500px !important; }
.findbar-highlight { -moz-box-ordinal-group: 0 !important; margin-left: 70px !important; margin-right: 20px !important; }
.findbar-case-sensitive { display:none !important; }
.findbar-entire-word { display:none !important; }
I'll bet there's a neater way to do this... but not tonight Josephine!

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-01, 23:30

Blacklab wrote:
2021-10-01, 23:23
Well done... :thumbup:

Er... sort of... had me puzzled for a while... then realised you must have a much wider screen... desktop monitor I assume?

So i had to take some of the padding out of lines 1 & 2 to see the close button at all. :?

Code: Select all

.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-left: 500px !important; }
.findbar-highlight { -moz-box-ordinal-group: 0 !important; margin-left: 70px !important; margin-right: 20px !important; }
.findbar-case-sensitive { display:none !important; }
.findbar-entire-word { display:none !important; }
I'll bet there's a neater way to do this... but not tonight Josephine!
Thanks man :)

Yeah, I know, there's gotta be a more elegant way of doing this. But I gotta get the ball through the goal line. By hook or by crook, but I gotta do it. And it's done hahaha :D

I'm using a lap top actually. Just a regular little lap top. Screen Resolution 1920x1080. That's what's up 8-)

If you can find a neater way to do it let me know. God will reward you in the afterlife for your kindness :twisted: :clap: :lol: :thumbup:

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

Re: How to move searchbar close button?

Unread post by Blacklab » 2021-10-01, 23:40

If I do I'll add it on to this thread... :D

You can of course play around with the Find Bar's 'Search/Text Box' width too:

Code: Select all

/* Find Toolbar: Custom input field width */
findbar#FindToolbar .findbar-textbox { width: 500px !important }

or

/* Find Bar - Adjust the width of the text field */
.findbar-textbox { width:30em !important; }
I probably nicked one of those ideas from 'Cor-el' (who scripts are usually excellent) in a Firefox Support Q&A here: https://support.mozilla.org/en-US/quest ... 166?page=2

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-02, 05:06

So I forgot to take this into account - https://i.imgur.com/yn6oOcH.jpg

When you type something in the search bar, if it finds something a text appears, and if it doesn't find something a text appears. And when it appears it just takes up space there moving everything to the right of it further to the right, and making my close button go off the page. Son of a b**ch!!!

So I got this going now:

Code: Select all

[anonid="findbar-textbox-wrapper"] { -moz-box-ordinal-group: 4 !important; margin-left: 60px !important; }
.findbar-closebutton { -moz-box-ordinal-group: 2 !important; margin-left: 880px !important;}
.findbar-highlight { -moz-box-ordinal-group: 1 !important; }
.findbar-case-sensitive { -moz-box-ordinal-group: 0 !important; }
.findbar-entire-word { -moz-box-ordinal-group: 0 !important; }
.findbar-find-fast.find-status-icon { -moz-box-ordinal-group: 2 !important; display:none !important; }
.findbar-find-fast.found-matches { -moz-box-ordinal-group: 3 !important; }
.findbar-find-fast.findbar-find-status { display:none !important; }
And it looks sweet - https://i.imgur.com/mokBejU.jpg

And if you see in my CSS above, I'm using display: none on this "findbar-find-fast.findbar-find-status." Basically, here you go:

Before - https://i.imgur.com/TAG0fmA.jpg
After - https://i.imgur.com/WLACw9R.jpg

As you can see, Before the "Phrase not found" text would appear and move everything to the right, thus hiding my close button. But After the text does not appear, nothing moves, my close button remains where it is. And in terms of knowing that nothing has appeared I get the sound notification and the container where I type the text turns red, and that's more than enough to know which way the wind blows.

Now, this still leaves me with one last problem. When I search and find something, a text appears, like "1 of 1 found." See the first screenshot I shared in this post. And I would like to keep this functionality in place. I tried playing with position:relative and position:absolute and display:fixed and margin-right and margin-left and padding, but I got nowhere. Basically I figured I''ll give the element where the "1 of 1 found" appears enough free space so that even when the text appears, it just takes the already empty space and doesn't move anything else.

But no matter what I tried it didn't work :thumbdown:

Any wizard here that can do some black magic and solve this one? It's like stuck at 99% haha :D

If I can't solve it I guess I'll just set display:none on the findbar-find-fast.found-matches and leave it like that. In this case whether my search finds something or not, no text will appear, nothing will ever move, and I'll be okay. Still, I'd love to be able to have the found-matches text actually appear but not move anything...

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

Re: How to move searchbar close button?

Unread post by Blacklab » 2021-10-02, 09:52

Whilst looking around 'the usual suspects' CSS code websites and forums (here, Firefox Support, Mozillazine, Reddit, Userstyles, Bugzilla, etc.) for some scripting ideas Re: how to alter the Find Bar layout...a now defunct (post-Firefox 57) Firefox Addon called 'FindBar Tweak' written by 'Quicksaver' was mentioned a number of times:

FindBar Tweak.jpg

Using WayBackMachine you can still grab different copies of the FindBar Tweak Addon's .xpi file from 2013 onwards... and download to your desktop (or wherever)... and could then open-up the Addon and have a look at Quicksaver's Find Bar coding.

Alternatively, Quicksaver's GitHub page for 'FindBar Tweak' is still listed: https://github.com/Quicksaver/FindBar-Tweak... with all the Addon's build information... and where he also states "Feel free to fork and use however you like." Most kind and obliging of him. :)

FindBar Tweak's functionality is explained in this ghacks article: https://www.ghacks.net/2013/07/16/findb ... ificantly/

Scorp

Re: How to move searchbar close button?

Unread post by Scorp » 2021-10-03, 00:42

Okay guys it's done, I figured it out. Good old persistence and experimentation did the trick.

So I got it working, and then I went through my CSS and cleaned it up by removing each line that I thought was not necessary and then checking to see if it affected anything. The code is as clean as possible and functional:

Code: Select all


[anonid="findbar-textbox-wrapper"] {
-moz-box-ordinal-group: 4 !important;
bottom:0 !important;
margin-left:410px !important;
width:80vw !important;
position:fixed !important;
}

.findbar-closebutton {
position: relative !important;
float: right !important;
margin-left: 1100px !important;
margin-bottom: -25px !important;
}

.findbar-find-fast.found-matches {
-moz-box-ordinal-group: 3 !important;
}

.findbar-find-fast.findbar-find-status {
-moz-box-ordinal-group: 3 !important;
}

.findbar-highlight {
-moz-box-ordinal-group: 1 !important;
}

.findbar-case-sensitive {
-moz-box-ordinal-group: 0 !important;
}

.findbar-entire-word {
-moz-box-ordinal-group: 0 !important;
}

.findbar-find-fast.find-status-icon {
display:none !important;
}

From bottom to top. The last bit of code hides an unnecessary icon. The 5 pieces on top of it align 5 elements as I want them left to right. The next one puts the closebutton on the right side where I want it. And the first one, well, it just allows the whole thing to work.

Here are the results:

Image

Image

Image

The first photo is how it looks when I open the search bar.

The second photo is how it looks when I search for something and find nothing.

The third photo is how it looks when I search for something and find something.

So that's it, we're done here, I got exactly what I wanted. That's what's up 8-)

Locked