Theme UI issues on PM 28

[Utnapishtim]

Since updating to PM 28 I'm having two UI issues with themes

• There's a very thin black line between the tab bar and the bookmarks toolbar above it
• The find bar is not themed

[Goodydino]

For the findbar, I had to add a couple of settings to global/findbar.css. In the element "findbar", I had to add a background colour and a text colour. It fixed that for my theme, so it should fix it for other themes as well.

[unknownone]

This issue is discussed also in this topic https://forum.palemoon.org/viewtopic.php?f=3&t=19930

[spline]

For the findbar, I had to add a couple of settings to global/findbar.css. In the element "findbar", I had to add a background colour and a text colour. It fixed that for my theme, so it should fix it for other themes as well.

Can you post specifically/exactly what you added? Having trouble getting my old theme to work with the findbar now...

[Lootyhoof]

To clear up some confusion here: the OP is referring to lightweight themes (personas), not the complete themes like are on https://addons.palemoon.org/themes/.

@OP: The issue you describe was filed in Issue #713 (UXP).

Off-topic:

For the findbar, I had to add a couple of settings to global/findbar.css. In the element "findbar", I had to add a background colour and a text colour. It fixed that for my theme, so it should fix it for other themes as well.

Can you post specifically/exactly what you added? Having trouble getting my old theme to work with the findbar now...

I would suggest checking the Complete Theme Changes for Pale Moon wiki page. This provides detailed information on what changed per Pale Moon version.

[Utnapishtim]

To clear up some confusion here: the OP is referring to lightweight themes (personas), not the complete themes like are on https://addons.palemoon.org/themes/.

@OP: The issue you describe was filed in Issue #713 (UXP).

Off-topic:

For the findbar, I had to add a couple of settings to global/findbar.css. In the element "findbar", I had to add a background colour and a text colour. It fixed that for my theme, so it should fix it for other themes as well.

Can you post specifically/exactly what you added? Having trouble getting my old theme to work with the findbar now...

I would suggest checking the Complete Theme Changes for Pale Moon wiki page. This provides detailed information on what changed per Pale Moon version.

Where is this findbar.css located? I'd like to change this so that I can finally upgrade from PM27.9.4. The gray find bar looks incredibly ugly on my colorful theme.

[Lootyhoof]

It's not possible to apply a lightweight theme to the findbar anymore, since it is now per-tab and not part of the main window.

[Utnapishtim]

It's not possible to apply a lightweight theme to the findbar anymore, since it is now per-tab and not part of the main window.

That blows Is it possible to make my theme not lightweight then? Would that fix this?

[Goodydino]

You can edit a theme to make the findbar any colour you like. In global > findbar.css, edit the item called "findbar".

Code: Select all

findbar {
  -moz-appearance: none !important;
  background: black;
  color: #FFBB44;
<etc.>
}

[Utnapishtim]

You can edit a theme to make the findbar any colour you like. In global > findbar.css, edit the item called "findbar".

Code: Select all

findbar {
  -moz-appearance: none !important;
  background: black;
  color: #FFBB44;
<etc.>
}

I couldn't find any findbar.css on my system.

I've got this theme, FWIW.

[Goodydino]

You have to unarchive the .xpi installer file for the theme you are using and find it in the main global subdirectory. Once you have changed it, you save the archive and install it again.

[Utnapishtim]

You have to unarchive the .xpi installer file for the theme you are using and find it in the main global subdirectory. Once you have changed it, you save the archive and install it again.

Oh you mean in the theme. It's a lightweight theme, there doesn't seem to be an .xpi.

Looking at the install page, it seems all the data is in the Install button

Code: Select all

<button class="Button Button--action InstallButton-button Button--action Button--puffy" type="submit" data-browsertheme="{"accentcolor":"#111c2e","author":"MaDonna","category":"Nature","description":"Theme Designed by MaD♥nna","detailURL":"https://addons.mozilla.org/en-US/firefox/addon/sunrise_by_madonna/","footer":"https://addons.cdn.mozilla.net/user-media/addons/710410/footer.png?modified=a5c8d287","footerURL":"https://addons.cdn.mozilla.net/user-media/addons/710410/footer.png?modified=a5c8d287","header":"https://addons.cdn.mozilla.net/user-media/addons/710410/header.png?modified=a5c8d287","headerURL":"https://addons.cdn.mozilla.net/user-media/addons/710410/header.png?modified=a5c8d287","iconURL":"https://addons.cdn.mozilla.net/user-media/addons/710410/icon.png?modified=a5c8d287","id":"710410","name":"SUNRISE  by MaDonna","previewURL":"https://addons.cdn.mozilla.net/user-media/addons/710410/preview.png?modified=a5c8d287","textcolor":"#c9e6ff","updateURL":"https://versioncheck.addons.mozilla.org/en-US/themes/update-check/710410","version":"1.0"}"><span class="Icon Icon-plus"></span>Install Theme</button>

Looks like I'll have to figure out how to turn this into an .xpi

[FranklinDM]

You can add the piece of code that Goodydino gave using Stylem (and add a new user style) or by adding it to your userChrome.css file.

[Utnapishtim]

You can add the piece of code that Goodydino gave using Stylem (and add a new user style) or by adding it to your userChrome.css file.

Nice, thanks needed some tinkering (apparently background-image doesn't work without background??), but works! Unfortunately, for my theme on the other PC I'll have to crop the footer image to get the find bar edge to line up with status bar. What an annoying idea, per-tab findbar...

[Utnapishtim]

Coming back to this, anyone got advice for this problem?

• There's a very thin black line between the tab bar and the bookmarks toolbar above it

[FranklinDM]

This was fixed 27 days ago in trunk but there's a workaround that you can include in your userChrome.css or by creating a new user style with the following:

Code: Select all

menubar:-moz-lwtheme,
toolbox:-moz-lwtheme,
toolbar:-moz-lwtheme {
  border-style: none;
}

Remove this when a stable version containing the fix gets released.

[Utnapishtim]

Thanks. Hope the fix gets pushed out soon.

[Utnapishtim]

Actually, it doesn't seem that this does anything. I've just noticed that the black line only shows up when the window is maximized in PM28.0.1.

I've applied the fix in userChrome.css, and later in Stylem as well and no combination of fixes changes the fact that the line shows in maximized windows and doesn't show in non-maximized ones.

[loxodont]

This was fixed 27 days ago in trunk but there's a workaround that you can include in your userChrome.css or by creating a new user style with the following:
...
Remove this when a stable version containing the fix gets released.

thanks FranklinDM,
I added these lines to Stylem add-on in Pale Moon 28.0.1 portable x86 and the black lines have been zapped.

[Utnapishtim]

Changed the find bar to be a browser-global toolbar again (like in Pale Moon 27) instead of per-tab. For people who prefer search terms to be saved on a per-tab basis (like with the per-tab findbar previously), this is possible by setting findbar.termPerTab to true. This resolves a number of issues, including styling with lightweight themes not applying to the find bar, and status pop-ups overlapping the find bar.

Thanks!!!