Badge time.png   The Paragon Wiki Archive documents the state of City of Heroes/Villains as it existed on December 1, 2012.

Difference between revisions of "Template talk:BadgeBox"

From Paragon Wiki Archive
Jump to: navigation, search
m
 
(Text Alignment)
 
(15 intermediate revisions by 7 users not shown)
Line 1: Line 1:
{{BadgeBox|Badge icon???|Big bold letters|Description}}
+
<nowiki>{{BadgeBox|Badge icon???|Big bold letters|Description}}</nowiki>
 +
 
 +
== Slight change to template ==
 +
 
 +
I put the <nowiki>[[Image: ... ]]</nowiki> part on the template side, rather than on the article side.  That would make it easier to make alterations in the future, if needed.  --[[User:StarGeek|StarGeek]] 12:38, 4 May 2006 (PDT)
 +
 
 +
 
 +
 
 +
I'm looking to use the box for exploration badges on the city zone pages.  In order to not need an additional line of text above every box just to contain a link to the badge's article, I've edited the template itself to turn the bolded name into a link.  Now the template can be used with or without an additional text line as the needs of the individual badge dictate. - [[User:Sister Leortha|Sister Leortha]] 10:41, 6 June 2006 (PDT)
 +
 
 +
== DPL ==
 +
 
 +
I just updated the template to optionally use DPL, and I started a thread on the forums [http://paragonwiki.com/forums/viewtopic.php?t=493 here] to discuss it. -- [[User:Sekoia|Sekoia]] 05:22, 10 May 2007 (EDT)
 +
 
 +
== Text Alignment ==
 +
First two examples to show what I mean:
 +
 
 +
{{BadgeBox|Germinator Terminator}}
 +
{{BadgeBox|Ace}}
 +
 
 +
Is there a way to force the badge name and description text to '''always''' align with one another and then center the badge image in the remaining space?  I would mess with it myself, but I am never very secure in messing with things that use DPL and I also didn't want to F anything up if folks don't care about the text mismatch that tends to drive me batty.  {{User:Thirty7/Sig}} 08:29, 25 June 2012 (UTC)
 +
 
 +
:Are you talking about essentially bumping the text in Ace to the right in order to align it with the text in Germinator Terminator?  I suppose we ''could'' probably hard-code the size of the left division to something like 130 (arbitrary number I'm just throwing out there because it covers the 128-wide image in the first box), but we'd have to make sure that's large enough for ''all'' badge images and it might not look very good when smaller badges are listed by themselves.  Alternately, we might add an optional parameter (something like "imagewidth", maybe?) to the template to allow you to force the size of the left division to a particular size. --[[User:Eabrace|Eabrace]] [[File:Healthbar notify phone.png|20px|link=User talk:Eabrace]] 11:46, 25 June 2012 (UTC)
 +
 
 +
::Yes, I mean moving Ace's text to the right to align it to the wider badge.  The 'imagewidth' parameter you are suggesting, would that: A) be used to allow for less space when a badge is listed alone to reduce whitespace in the box or B) to decrease the size of large badge icons so that a smaller width for that cell can be used in general?  Also, I am fairly sure that the badges max out at 128px in width.  If you are curious how a similar thing looks, [[OuroPortal:Pointsphere (Justice)/Badges|Pointsphere (Justice)/Badges]] might give you a clue aabout it, though there are no descriptions there and some large badges are made a bit smaller.  {{User:Thirty7/Sig}}
 +
 
 +
: I took a stab at this and it's not an easy thing to manage the way I was hoping. The current template works as following: the image gets just as much space as it needs on the left, then the text gets all the remaining space on the right, and the whole things uses the full width of the space available. Unfortunately, specifying a width for the image's side doesn't work because of how we're letting the text get the remaining width. I've tried a bunch of combinations and I haven't found a solution that lets us always have the text get all the remaining space, the full block to get the whole width, and the image's side to flexibly either get a specified width or take just as much space as it needs. I think the best we could do would be to give the left side a universally fixed width, which is exactly what the page on the OuroPortal did. That would make a series of Badge Boxes look good provided at least one of them used the full widths. But when one or more of them didn't use the full width, or especially when an article just uses one, it'd look really weird having all that excess space. -- [[User:Sekoia|Sekoia]] 19:35, 25 June 2012 (UTC)
 +
 
 +
{|  style="background-color: #F4F4FF; border: 1px solid #AAAAFF;"
 +
| style="vertical-align: top; padding: 0.25em;" | <div style="width: 128px; display: inline-block; text-align: center;">[[File:Badge_tourism_hazard.png]]</div>
 +
| style="width:100%; padding: 0.25em;" | '''[[Ace Badge|Ace]]'''<br />
 +
This statue honors Mustang, a valiant hero who fought during WWII.
 +
|}
 +
::Am I, uh... missing something? If that's not what you were talking about, then I'm not clear on what can't be done. --[[User:GuyPerfect|GuyPerfect]] 19:49, 25 June 2012 (UTC)
 +
 
 +
: I'm not sure what Guy did differently than I was doing (perhaps it's the "display: inline-block;", I hadn't tried that). In any case, as soon as I posted my previous message I realized there was a simple way to do this. Instead of trying to make one set of styles work for all cases, it's very easy to make two separate sub-templates that each can be styled separately. So that's what I did. The template now has a left= option that can be provided to give a series of templates the same width for the left section. If omitted, they auto-size as before. As a side effect, the layout code for the template isn't repeated twice in the template anymore, and having it separate from all the DPL/#if calls will make modifying them easier in the future. It's also a little bit less bug prone (for instance, I noticed that the which= option wasn't always being used in the original, because it had only been added to one of the two spots where it was needed). -- [[User:Sekoia|Sekoia]] 20:07, 25 June 2012 (UTC)
 +
 
 +
{|  style="background-color: #F4F4FF; border: 1px solid #AAAAFF; width: 100%"
 +
| style="vertical-align: top; padding: 0.25em; width:128px; text-align: center" | [[File:Badge_tourism_hazard.png]]
 +
| style="padding: 0.25em;" | '''[[Ace Badge|Ace]]'''<br />
 +
This statue honors Mustang, a valiant hero who fought during WWII.
 +
|}
 +
::Could also do it this way, I suppose. (-: --[[User:GuyPerfect|GuyPerfect]] 20:25, 25 June 2012 (UTC)
 +
 
 +
:::Looks like we have a winner! --[[User:Eabrace|Eabrace]] [[File:Healthbar notify phone.png|20px|link=User talk:Eabrace]] 00:40, 26 June 2012 (UTC)
 +
 
 +
::::Woot!  Thanks for taking the time on this!  I messed around on my userpage but got absolutely nowhere with it at all.  It really was totally obnoxious to me that things didn't align.  So, the question is, how do I go about making sure this works on all the pages that call this template (no need for you to do that... unless it's Bot-able, that is).  {{User:Thirty7/Sig}} 01:59, 26 June 2012 (UTC)
 +
 
 +
:::::The template maintains its old behavior if the left= option is not present, so there's no need to do anything--it still works just fine. You only really "need" to use it where you want to use the new functionality: on pages with lists of badges whose icons aren't a uniform list. You'll have to add "left=??" to each, where "??" is a number you'll have to figure out (a width in pixels). I would look to see what the width is for the widest badge image on that page, and then maybe add 2 to that. -- [[User:Sekoia|Sekoia]] 02:51, 26 June 2012 (UTC)
 +
 
 +
::::::Okay, it was that last part that I was making sure of.  Thanks.  {{User:Thirty7/Sig}} 07:52, 26 June 2012 (UTC)

Latest revision as of 07:52, 26 June 2012

{{BadgeBox|Badge icon???|Big bold letters|Description}}

Slight change to template

I put the [[Image: ... ]] part on the template side, rather than on the article side. That would make it easier to make alterations in the future, if needed. --StarGeek 12:38, 4 May 2006 (PDT)


I'm looking to use the box for exploration badges on the city zone pages. In order to not need an additional line of text above every box just to contain a link to the badge's article, I've edited the template itself to turn the bolded name into a link. Now the template can be used with or without an additional text line as the needs of the individual badge dictate. - Sister Leortha 10:41, 6 June 2006 (PDT)

DPL

I just updated the template to optionally use DPL, and I started a thread on the forums here to discuss it. -- Sekoia 05:22, 10 May 2007 (EDT)

Text Alignment

First two examples to show what I mean:


File:Badge defeat seedofhamidon.png Germinator Terminator

The Praetorian Hamidon should know by now that sending one colonizing Seed isn't enough to retake First Ward. You dread the day it does... You have taken down the Seed of Hamidon to earn this badge.

File:Badge tourism hazard.png Ace

This statue honors Mustang, a valiant hero who fought during WWII.

Is there a way to force the badge name and description text to always align with one another and then center the badge image in the remaining space? I would mess with it myself, but I am never very secure in messing with things that use DPL and I also didn't want to F anything up if folks don't care about the text mismatch that tends to drive me batty. — Pill-37.png Talk · Cont 08:29, 25 June 2012 (UTC)

Are you talking about essentially bumping the text in Ace to the right in order to align it with the text in Germinator Terminator? I suppose we could probably hard-code the size of the left division to something like 130 (arbitrary number I'm just throwing out there because it covers the 128-wide image in the first box), but we'd have to make sure that's large enough for all badge images and it might not look very good when smaller badges are listed by themselves. Alternately, we might add an optional parameter (something like "imagewidth", maybe?) to the template to allow you to force the size of the left division to a particular size. --Eabrace Healthbar notify phone.png 11:46, 25 June 2012 (UTC)
Yes, I mean moving Ace's text to the right to align it to the wider badge. The 'imagewidth' parameter you are suggesting, would that: A) be used to allow for less space when a badge is listed alone to reduce whitespace in the box or B) to decrease the size of large badge icons so that a smaller width for that cell can be used in general? Also, I am fairly sure that the badges max out at 128px in width. If you are curious how a similar thing looks, Pointsphere (Justice)/Badges might give you a clue aabout it, though there are no descriptions there and some large badges are made a bit smaller. — Pill-37.png Talk · Cont
I took a stab at this and it's not an easy thing to manage the way I was hoping. The current template works as following: the image gets just as much space as it needs on the left, then the text gets all the remaining space on the right, and the whole things uses the full width of the space available. Unfortunately, specifying a width for the image's side doesn't work because of how we're letting the text get the remaining width. I've tried a bunch of combinations and I haven't found a solution that lets us always have the text get all the remaining space, the full block to get the whole width, and the image's side to flexibly either get a specified width or take just as much space as it needs. I think the best we could do would be to give the left side a universally fixed width, which is exactly what the page on the OuroPortal did. That would make a series of Badge Boxes look good provided at least one of them used the full widths. But when one or more of them didn't use the full width, or especially when an article just uses one, it'd look really weird having all that excess space. -- Sekoia 19:35, 25 June 2012 (UTC)
Badge tourism hazard.png
Ace

This statue honors Mustang, a valiant hero who fought during WWII.

Am I, uh... missing something? If that's not what you were talking about, then I'm not clear on what can't be done. --GuyPerfect 19:49, 25 June 2012 (UTC)
I'm not sure what Guy did differently than I was doing (perhaps it's the "display: inline-block;", I hadn't tried that). In any case, as soon as I posted my previous message I realized there was a simple way to do this. Instead of trying to make one set of styles work for all cases, it's very easy to make two separate sub-templates that each can be styled separately. So that's what I did. The template now has a left= option that can be provided to give a series of templates the same width for the left section. If omitted, they auto-size as before. As a side effect, the layout code for the template isn't repeated twice in the template anymore, and having it separate from all the DPL/#if calls will make modifying them easier in the future. It's also a little bit less bug prone (for instance, I noticed that the which= option wasn't always being used in the original, because it had only been added to one of the two spots where it was needed). -- Sekoia 20:07, 25 June 2012 (UTC)
Badge tourism hazard.png Ace

This statue honors Mustang, a valiant hero who fought during WWII.

Could also do it this way, I suppose. (-: --GuyPerfect 20:25, 25 June 2012 (UTC)
Looks like we have a winner! --Eabrace Healthbar notify phone.png 00:40, 26 June 2012 (UTC)
Woot! Thanks for taking the time on this! I messed around on my userpage but got absolutely nowhere with it at all. It really was totally obnoxious to me that things didn't align. So, the question is, how do I go about making sure this works on all the pages that call this template (no need for you to do that... unless it's Bot-able, that is). — Pill-37.png Talk · Cont 01:59, 26 June 2012 (UTC)
The template maintains its old behavior if the left= option is not present, so there's no need to do anything--it still works just fine. You only really "need" to use it where you want to use the new functionality: on pages with lists of badges whose icons aren't a uniform list. You'll have to add "left=??" to each, where "??" is a number you'll have to figure out (a width in pixels). I would look to see what the width is for the widest badge image on that page, and then maybe add 2 to that. -- Sekoia 02:51, 26 June 2012 (UTC)
Okay, it was that last part that I was making sure of. Thanks. — Pill-37.png Talk · Cont 07:52, 26 June 2012 (UTC)