Porting the Halloween theme

Anything about browser themes, both Full Themes and Lightweight Themes (personas) should go here.

Moderators: satrow, Lootyhoof, Andrew Gilbertson

Goodydino
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Porting the Halloween theme

Unread postby Goodydino » Mon, 11 Dec 2017, 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: 1007
Joined: Thu, 09 Feb 2012, 23:35
Location: United Kingdom

Re: Porting the Halloween theme

Unread postby Lootyhoof » Mon, 11 Dec 2017, 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
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Re: Porting the Halloween theme

Unread postby Goodydino » Mon, 11 Dec 2017, 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
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Re: Porting the Halloween theme

Unread postby Goodydino » Mon, 11 Dec 2017, 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: 1007
Joined: Thu, 09 Feb 2012, 23:35
Location: United Kingdom

Re: Porting the Halloween theme

Unread postby Lootyhoof » Tue, 12 Dec 2017, 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
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Re: Porting the Halloween theme

Unread postby Goodydino » Tue, 12 Dec 2017, 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: 113
Joined: Sat, 14 Jan 2017, 02:40
Location: Manila, Philippines
Contact:

Re: Porting the Halloween theme

Unread postby FranklinDM » Tue, 12 Dec 2017, 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 (
Image

User avatar
SpockFan02
Lunatic
Lunatic
Posts: 353
Joined: Sun, 24 Sep 2017, 16:35

Re: Porting the Halloween theme

Unread postby SpockFan02 » Tue, 12 Dec 2017, 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
Lunatic
Lunatic
Posts: 353
Joined: Sun, 24 Sep 2017, 16:35

Re: Porting the Halloween theme

Unread postby SpockFan02 » Tue, 12 Dec 2017, 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
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Re: Porting the Halloween theme

Unread postby Goodydino » Tue, 12 Dec 2017, 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
Lunatic
Lunatic
Posts: 353
Joined: Sun, 24 Sep 2017, 16:35

Re: Porting the Halloween theme

Unread postby SpockFan02 » Wed, 13 Dec 2017, 00:21

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

Read this.

Goodydino
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Re: Porting the Halloween theme

Unread postby Goodydino » Wed, 13 Dec 2017, 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
Lunatic
Lunatic
Posts: 353
Joined: Sun, 24 Sep 2017, 16:35

Re: Porting the Halloween theme

Unread postby SpockFan02 » Wed, 13 Dec 2017, 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: 369
Joined: Sat, 17 May 2014, 15:51
Location: USA

Re: Porting the Halloween theme

Unread postby riiis » Wed, 13 Dec 2017, 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
Lunatic
Lunatic
Posts: 353
Joined: Sun, 24 Sep 2017, 16:35

Re: Porting the Halloween theme

Unread postby SpockFan02 » Thu, 14 Dec 2017, 02:07

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

Goodydino
Fanatic
Fanatic
Posts: 242
Joined: Tue, 10 Oct 2017, 21:20

Re: Porting the Halloween theme

Unread postby Goodydino » Thu, 14 Dec 2017, 20:39

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


Return to “Themes”

Who is online

Users browsing this forum: No registered users and 2 guests