Forum:New Metabox development

The following text has been relocated from Forum:New theme proposal:

Copied text
On the subject of updating Metabox, I accidentally worked up this as a new style of message box. What do you think?

 Hello! I don't have a name yet, because I'm brand new! What do you think of me?

As I said, this design was more-or-less a complete accident, much like the headers on the main page. I think it would be a pretty good replacement for Metabox, but I'd like to hear what you all think about that. Here's another "real case" example to compare the two:


 * Metabox deletion template

 Delete This page has been nominated for deletion. Reason: just because
 * "New Metabox" deletion template

You can discuss this nomination at Category talk:Candidates for deletion. Thoughts? --  LostInRiverview talk • blog  •  contribs 05:53, March 27, 2015 (UTC)


 * The metabox is excellent! It looks really pretty! But I've already told this to LiR on IRC. :p I have one thing in mind. In the above examples, you used icons from TS3 and TS4. The one from TS4 is rescaled to 60px, but all icons from TS3 are in 54x54px. You can see the "Hello!" header text doesn't align with content text.


 * This can be fixed if the header text is wrapped around, like how LiR did it with the content text by adding margin to the text. The wraparound is necessary so that the text would align if it's really long. Since header text is rarely more than 2 lines, LiR didn't use it there, and I agreed. But seeing this small problem, I think that wrapping around the header text can also solve it.

  Hello! I don't have a name yet, because I'm brand new! What do you think of me?


 * What do you think?  Nikel  Talk  –  Vote!  06:28, March 27, 2015 (UTC)


 * Another thing is that since TS3 icons are smaller than TS4 ones, the icon above looks hanging to the border... Maybe if it's centered it would look better for smaller icons? I'll try tweaking it and see how it looks.  Nikel  Talk  –  Vote!  06:31, March 27, 2015 (UTC)

  Hello! I don't have a name yet, because I'm brand new! What do you think of me?  Delete This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.


 * There. I made the div width 70px and the icon float center. It's subtle, but... I like it better.  Nikel  Talk  –  Vote!  06:38, March 27, 2015 (UTC)
 * You're right, that is an improvement. You can actually notice the header protrudes slightly more on the left now. Very good job. --  LostInRiverview talk • blog  •  contribs 06:41, March 27, 2015 (UTC)

I was kinda skeptic about this new theme, but it really looks good! I love the green color here! Øôppdëckš 08:09, March 27, 2015 (UTC)


 * I think the Metabox looks good with the fresh look. I do Nikel's improvement make it look better. I like it. -- Icemandeaf (talk) 17:00, March 27, 2015 (UTC)

  Hello! I don't have a name yet, because I'm brand new! What do you think of me?  Delete This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.


 * I added rounded borders (because I like the roundedness, but you can do away with it if you don't want it). A left margin to the icon was also added so that it wouldn't hide the newly rounded header. And I also added a bottom margin to the Metabox so that the shadow isn't completely hidden when there are multiple boxes stacked onto each other. I know it is very subtle, but it seems to make a difference to me. What do you all think? -- Icemandeaf (talk) 17:21, March 27, 2015 (UTC)
 * When I developed the theme and the main page style, I deliberately avoided rounded corners. My preference would be to keep the squared corner style going in the other templates, but of course if others would like to have the round corners instead, that's something that can be decided. My focus right now is to get Metabox in-line with the main page style, which does not use rounded corners. So, if we choose to make this box with rounded corners, then that should probably be applied to the main page style as well. As far as my own personal opinion, I would rather keep the square corners. --  LostInRiverview talk • blog  •  contribs 18:41, March 27, 2015 (UTC)
 * Understandable, and I am actually ok with that. So here is the changes without the rounded corners. Very minor stuff, but I think the margins added make it look nice. -- Icemandeaf (talk) 18:53, March 27, 2015 (UTC)

 <div style="background: #3571C3; width: auto; margin: 5px; font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;"> Hello! I don't have a name yet, because I'm brand new! What do you think of me? <div style="border: 1px solid #E0E0E0; text-align: left; background: #F5EAFA; width: 85%; box-shadow: 1px 1px 3px #777; margin-bottom: 1px;"> <div style="background: #9932CC; width: auto; margin: 5px; font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">Delete This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion. I do have a concern regarding font colors versus the header colors, specifically for the yellow/gold "featured content" templates. Take a look: <div style="background: #; border: 1px solid #E0E0E0; text-align: left; width: 85%; box-shadow: 1px 1px 3px #777; margin-bottom: 1px;"> <div style="background: #; width: auto; margin: 5px; font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">Featured Article
 * "Featured content" gold

Additionally, there are other matters that should be considered. Right now, Metabox can be displayed in two forms; the "standard" form, or a "small" form, like this for example:

I'm not sure how we would accommodate a header on this template, or even if we'd want to.

As well, right now metabox can be displayed with or without an image; what will this new template look like if an image isn't included? --  LostInRiverview talk • blog  •  contribs 21:18, March 27, 2015 (UTC)

Continued discussion
I have relocated this discussion onto its own thread so that we can further focus on the issues relevant to Metabox.

I have taken the code that we've refined above and placed it into a new template: Metabox2. Metabox2 is generally in a testing phase right now, but I feel most of the bugs are worked out. There are a few matters still up for discussion, of which I have listed out a few. I am sure this list is not exhaustive so if I've forgotten something please point it out.
 * What to do when Metabox doesn't have an image. Right now, Metabox can be utilized either with or without an icon. I have edited Metabox2 to make the image parameter optional, but I am not sure if my solution is the most elegant. Observe:


 * Simply put, I'm not sure if having that blank space on the left side of the template is ideal. Surely using an icon would be the preferred approach but in some situations it is not practical to do so. Additionally, several templates that utilize Metabox do not have images, so we need to do our best to make sure Metabox2 is backward compatible.


 * No header specified. Another matter of backward compatibility is that of the template's header when the  parameter is not specified. On Metabox,   is an optional parameter, so there are several cases where a headline is not specified. I have tried to adapt Metabox2 to this situation, while still maintaining some portion of the header bar, since the bar itself is a defining feature of the template.


 * As you can see, there are a few issues with my approach, not the least of which is that the image inside the template is larger than the template itself. As well, I have maintained a small strip of the "header bar," but is this the ideal approach?


 * Small version. In preparing for rolling-out the template, I prepared a small version, just as Metabox Prime has the option to set a small version of the template. I haven't gotten any feedback on this design, however. Check it out:


 * Legacy support for old parameters. Metabox one utilizes parameters for custom colours:  and  . Metabox2 has two custom color options as well:   and  . For sake of backward compatibility, I have set Metabox2 to interpret a bordercolor input as if it were the headercolor, and we can carry this into the full rollout of the template as well. However, it may be necessary or preferable to make other modifications to the template as well. Specifically I'm talking about changing either the names of parameters or the accepted entries for those parameters. The biggest question mark right now for me is whether we should adjust the   parameter to allow File: input or not. Right now, when specifying an image to be used in the template (on Metabox1 and Metabox2), the name of the file must be included without the File: prefix. Most other templates that utilize images require that prefix, so should this template be edited to conform to that quasi-standard? And if we chose to do that, would Metabox2 have any issues with backward compatibility?

As I said, there's a few matters still up for discussion. --  LostInRiverview talk • blog  •  contribs 18:56, March 30, 2015 (UTC)