Porting the Halloween theme

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

Moderators: FranklinDM, Lootyhoof

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Porting the Halloween theme

Unread post by Goodydino » 2017-12-11, 18:34

Ed Hume just gave me permission to port the Halloween theme over to Pale Moon. I am not sure how to do that exactly. I got all the colours more or less fixed so that they look appropriate to that kind of theme, but there are two padlocks in the identity box for secure pages, one from Halloween and one from the extension Theme Compatibility Provider. That does not bother me, but some people might think it overkill. The padlocks from the extension are the ones I would suggest eliminating, since the Halloween ones are easier to see. I cannot give support for questions about it, since I do not know much about creating themes. All I do is edit them if I think they need that.
A screenshot:
Screen Shot 2017-12-11 at 11.28.35.png
Does anyone like that idea?

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1568
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: Porting the Halloween theme

Unread post by Lootyhoof » 2017-12-11, 19:46

Great! Always happy to see more people work on themes. :)

One thing to note though: Please don't rely on the Theme Compatibility Provider. It's designed as a crutch for end-users specifically, for use with themes that aren't compatible with Pale Moon. As you're working on this, it would be advisable to include these fixes in the theme directly. Please see here for documentation on Pale Moon-specific theme changes.

To more easily see what elements are named and where they're styled, I'd also highly recommend the use of DOM Inspector coupled with Element Inspector. With this, you can press Shift+Right Click on any element, and it will show up in DOM Inspector, which will show you what files are styling the element in addition to what styles are used. You can also delete stylings here to test if that fixes (or breaks) something, as well as add stylings to see if that would work in the theme. I personally use this all the time, and it helps a lot if something isn't styled right but it isn't immediately obvious why.

If you need any help, feel free to let me know and I'll do my best.

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Porting the Halloween theme

Unread post by Goodydino » 2017-12-11, 20:09

I used the Theme Compatibility Provider once to get the theme into a workable condition, then extracted it from the profile and further edited it and re-installed it from that. The fixes are now in the theme directly. I am no longer using the extension because I no longer need it. I have no idea where the fixes were applied, however. I also have no idea how to post a theme.

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Porting the Halloween theme

Unread post by Goodydino » 2017-12-11, 22:12

I have no idea where to find the extra padlock image. DOM Inspector identified it as padlock-ib, but there is nothing by that name in the theme, either a file or the content of a stylesheet. The Hslloween padlock is page-proxy-favicon, and is set from browser.css. One anomaly is that the page-proxy-favicon produces a doorhanger when clicked, which says, "You are connected to", followed by a blank, and, "which is run by", followed by another blank. I do not understand why the information is blank. There is a button, "More information..." which opens Page Info. The extension-added padlock simply opens Page Info. If the Halloween padlock would simply open Page Info instead of the doorhanger, that would be better, but I cannot fix that. I am not an expert in theme structure.

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1568
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: Porting the Halloween theme

Unread post by Lootyhoof » 2017-12-12, 00:29

You could override the styling of the padlock with those from the theme. For example, the below could be placed in browser.css, and simply replace the URLs within to suit your images:

Code: Select all

#padlock-ib[padshow="ib-trans-bg"][level="ev"] {
  list-style-image: url("padlock_mod_ev.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="ev"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="ev"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="high"] {
  list-style-image: url("padlock_mod_https.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="high"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="high"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="low"],
#padlock-ib[padshow="ib-trans-bg"][level="mixed"] {
  list-style-image: url("padlock_mod_low.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="low"]:hover,
#padlock-ib[padshow="ib-trans-bg"][level="mixed"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="low"]:hover:active,
#padlock-ib[padshow="ib-trans-bg"][level="mixed"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="broken"] {
  list-style-image: url("padlock_mod_broken.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="broken"]:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
  background-color: transparent;
}

#padlock-ib[padshow="ib-trans-bg"][level="broken"]:hover:active {
  -moz-image-region: rect(0px 48px 16px 32px);
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="ev"] {
  list-style-image: url("padlock_mod_ev.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="ev"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="ev"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="high"] {
  list-style-image: url("padlock_mod_https.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="high"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="high"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="low"],
#padlock-ib-left[padshow="ib-left"][level="mixed"] {
  list-style-image: url("padlock_mod_low.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="low"]:hover,
#padlock-ib-left[padshow="ib-left"][level="mixed"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="low"]:hover:active,
#padlock-ib-left[padshow="ib-left"][level="mixed"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="broken"] {
  list-style-image: url("padlock_mod_broken.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="broken"]:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
  padding:2px;
  background-color: transparent;
}

#padlock-ib-left[padshow="ib-left"][level="broken"]:hover:active {
  -moz-image-region: rect(0px 48px 16px 32px);
  padding:2px;
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="ev"] {
  list-style-image: url("padlock_mod_ev.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="ev"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="ev"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="high"] {
  list-style-image: url("padlock_mod_https.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="high"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="high"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="low"],
#padlock-ub-right[padshow="ub-right"][level="mixed"] {
  list-style-image: url("padlock_mod_low.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="low"]:hover
#padlock-ub-right[padshow="ub-right"][level="mixed"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="low"]:hover:active,
#padlock-ub-right[padshow="ub-right"][level="mixed"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="broken"] {
  list-style-image: url("padlock_mod_broken.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="broken"]:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
  background-color: transparent;
}

#padlock-ub-right[padshow="ub-right"][level="broken"]:hover:active {
  -moz-image-region: rect(0px 48px 16px 32px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="ev"] {
  list-style-image: url("padlock_mod_ev.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="ev"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="ev"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="high"] {
  list-style-image: url("padlock_mod_https.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="high"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="high"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="low"],
#padlock-sb[padshow="statbar"][level="mixed"] {
  list-style-image: url("padlock_mod_low.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="low"]:hover,
#padlock-sb[padshow="statbar"][level="mixed"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="low"]:hover:active,
#padlock-sb[padshow="statbar"][level="mixed"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="broken"] {
  list-style-image: url("padlock_mod_broken.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="broken"]:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
  background-color: transparent;
}

#padlock-sb[padshow="statbar"][level="broken"]:hover:active {
  -moz-image-region: rect(0px 48px 16px 32px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="ev"] {
  list-style-image: url("padlock_mod_ev.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="ev"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="ev"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="high"] {
  list-style-image: url("padlock_mod_https.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="high"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="high"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="low"],
#padlock-tab[padshow="tabs-bar"][level="mixed"] {
  list-style-image: url("padlock_mod_low.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="low"]:hover,
#padlock-tab[padshow="tabs-bar"][level="mixed"]:hover {
  -moz-image-region: rect(0px 30px 16px 14px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="low"]:hover:active,
#padlock-tab[padshow="tabs-bar"][level="mixed"]:hover:active {
  -moz-image-region: rect(0px 44px 16px 28px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="broken"] {
  list-style-image: url("padlock_mod_broken.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="broken"]:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
  background-color: transparent;
}

#padlock-tab[padshow="tabs-bar"][level="broken"]:hover:active {
  -moz-image-region: rect(0px 48px 16px 32px);
  background-color: transparent;
}
Note that the :hover and :hover:active code is only needed if your padlock images have hover/active (clicked) states.

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Porting the Halloween theme

Unread post by Goodydino » 2017-12-12, 22:13

That does not work. What I get is a normal bookmark image instead of the Halloween padlock, and the added padlock is still there. Your code is obviously not overriding the added padlock. I do not know what is putting that in there, because searching the files from the installation archive does not find it (at least, not as padlock-ib).
I guess the doorhanger can stay. I had made a mistake with the text colour, and now all the text shows up.

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 575
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Porting the Halloween theme

Unread post by FranklinDM » 2017-12-12, 23:01

The URLs for the first padlock icon (the theme-like) can be found at the

Code: Select all

page-proxy-favicon
and the like selectors. If I remember it correctly, to remove the first padlock and restore the tab's site icon, you need to comment some attributes that are covered by that selector and the like (

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: Porting the Halloween theme

Unread post by SpockFan02 » 2017-12-12, 23:10

I can confirm that the padlock in normal, unthemed Pale Moon is indeed #padlock-ib. Try adding { display: none !important; } to page-proxy-favicon and styling #padlock-ib to look like the Halloween theme's padlock (with the same image, etc.). That would get rid of the weird doorhanger and solve the double-padlock problem.

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: Porting the Halloween theme

Unread post by SpockFan02 » 2017-12-12, 23:15

Ah, cripes, #page-proxy-favicon is meant to be the favicon of the page you're viewing... So, don't use display: none...

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Porting the Halloween theme

Unread post by Goodydino » 2017-12-12, 23:32

SpockMan02 wrote:I can confirm that the padlock in normal, unthemed Pale Moon is indeed #padlock-ib. Try adding { display: none !important; } to page-proxy-favicon and styling #padlock-ib to look like the Halloween theme's padlock (with the same image, etc.). That would get rid of the weird doorhanger and solve the double-padlock problem.
You almost got it! I added #padlock-ib {display: none !important;}, and there is no more double padlock. The one that is hard to see is gone.
Now, how do I post a theme?

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: Porting the Halloween theme

Unread post by SpockFan02 » 2017-12-13, 00:21

Goodydino wrote:...
Now, how do I post a theme?
Read this.

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Porting the Halloween theme

Unread post by Goodydino » 2017-12-13, 18:55

The instructions say to use the PM system, but I do not see any way to attach an .xpi file. Also, I do not have a web site, so I cannot host anything. If there is some way to send the icon, screenshot, additional info in a text file, as well as the .xpi file to someone, I can do that.

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: Porting the Halloween theme

Unread post by SpockFan02 » 2017-12-13, 19:16

Goodydino wrote:The instructions say to use the PM system, but I do not see any way to attach an .xpi file. Also, I do not have a web site, so I cannot host anything. If there is some way to send the icon, screenshot, additional info in a text file, as well as the .xpi file to someone, I can do that.
You could try Google Drive or something similar, maybe. I've never done this.

riiis
Lunatic
Lunatic
Posts: 471
Joined: 2014-05-17, 15:51
Location: USA

Re: Porting the Halloween theme

Unread post by riiis » 2017-12-13, 20:26

Goodydino wrote:The instructions say to use the PM system
The "PM" in the instructions refers to the Pale Moon forum's "Private messages" system (link will be found at the top of this forum page, after you log in). Since the abbreviation "PM" is also commonly used to refer to Pale Moon, or "preventive maintenance", or the time between noon and midnight-- "Private messages" perhaps should not be abbreviated in the instructions, but instead spelled out. Thus, you should send your theme submission to Lootyhoof and FranklinDM via private message, with your xpi file, icon file, and other files as attachments to this private message.

User avatar
SpockFan02
Astronaut
Astronaut
Posts: 535
Joined: 2017-09-24, 16:35
Location: Mak pupulusšum, California

Re: Porting the Halloween theme

Unread post by SpockFan02 » 2017-12-14, 02:07

Oh, so you can attach files to PMs? That's good to know!

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Porting the Halloween theme

Unread post by Goodydino » 2017-12-14, 20:39

I sent in the Halloween theme. If I left anything out, please explain it.

Locked