FANDOM


Mentoring requests Mafia game wiki

What is your username? Are you an admin on the wiki you are asking about?

ReapTheChaos, admin on the mafia game wiki.

Please link to the wiki (or the specific templates or pages you want help with) here:

w:c:mafiagame

What would you like help with?

Building new portable infobox. I have a draft version, put out by the conversion tool, along with the our current infobox on w:c:mafiagame:ReapTheChaos Sandbox 3. What we're looking for is to get the new style to look more like the old ones.

Any other information (e.g. links, screenshots, or snippets):

Responses

Done.

See:

/theme.css

Live preview:

http://infoboxpreview.appspot.com/?snapshotId=-K55mcMZtIMd3_xFNRUB

Dessamator (talk) 12:52, December 9, 2015 (UTC)


Looks good, so how would we go about adjusting them a little? For example, the heading at the top could be a little thinner and some of our other infoboxes use a caption under the image, how would we add that? Also, some of the images look off. For example the ones of the guy holding the weapons have a border on the sides, is that because of the image size itself? Our old infoboxes had an input for image width so you could adjust that. And if you look at some of the ones that are just the weapon, the Grease Gun for example, it looks like the image is pushed over to the right instead of being centered. It almost looks like the tip of the barrel is sticking past the edge of the box. ReapTheChaos (talk) 15:31, December 10, 2015 (UTC)

Follow-up

I've made a couple of small changes, feel free to play around with the infobox previewer until you get it the way you want it:

Live preview:

http://infoboxpreview.appspot.com/?snapshotId=-K5BfLxxHAQGZDfeboN6

Changes:

For example, the heading at the top could be a little thinner
See:

.portable-infobox .pi-title, .portable-infobox .pi-header, .portable-infobox .pi-navigation {
  height: 12px;
  line-height:12px;
}

a caption under the image, how would we add that?
See Help:Infoboxes/Tags:

<image source="image">
    <caption source="caption"></caption>
</image>

Our old infoboxes had an input for image width so you could adjust that.
This can be adjusted in css automatically for all images. See also Portable Infoboxes/Tips and tricks.

.portable-infobox .pi-image-thumbnail {
    width: 100%;
}

it looks like the image is pushed over to the right instead of being centered.
I think this is fixed now.

Hope that answers all your questions. Dessamator (talk) 16:29, December 10, 2015 (UTC)

Well that looks better, but perhaps we should leave the images at their default width, that seemed to stretch them too much. I suppose we can edit the images themselves if they don't look right in the infobox.

At this point all I need to know is how I go about putting that CSS code on our wiki. Do I just remove the section that reads: /* Infobox template style */ and replace it with the new code? I've never messed with that page because I honestly have no idea what I'm doing there.

Also, we do have a couple other styles of infoboxes, I may have more questions when I get to those, will this request stay open for a while? Lastly, am I free to play around with that preview tool as I go about working on this project? ReapTheChaos (talk) 18:52, December 10, 2015 (UTC)

I forgot to add a piece of code to make them adjust automatically. Try :

http://infoboxpreview.appspot.com/?snapshotId=-K5BfLxxHAQGZDfeboN6#

At this point all I need to know is how I go about putting that CSS code on our wiki. Do I just remove the section that reads: /* Infobox template style */ and replace it with the new code? I've never messed with that page because I honestly have no idea what I'm doing there.

Yes, add them to your w:c:mafiagame:Special:CSS, and you can safely remove everything in that section. Although leaving the "/* Infobox template style */" may help you find it in the future. It is just a comment to help you understand everything.

Also, we do have a couple other styles of infoboxes, I may have more questions when I get to those, will this request stay open for a while?
It depends, we can close it for now, and you can reopen it if you have further questions.

Lastly, am I free to play around with that preview tool as I go about working on this project?
Yes, feel free. That's a playground for infobox design. Make sure to read Help:Infobox preview to understand how it all works. Dessamator (talk) 19:14, December 10, 2015 (UTC)

Some of the images still look off, I'm referring to the ones of the guy holding a weapon, it looks as if it's making them wider without adding to the height so they look stretched. I can try resizing the image to see if it looks better but if not what piece of code did you add to make that change, is it the last one that reads:

.portable-infobox .pi-image-thumbnail {
    width: 100%;
}

or was there more to it? ReapTheChaos (talk) 20:07, December 10, 2015 (UTC)

My mistake, try this one:

.portable-infobox .pi-image-thumbnail {
    width: 100%;
    height: auto;
}

Dessamator (talk) 22:50, December 10, 2015 (UTC)

That will work, thanks! ReapTheChaos (talk) 21:25, December 10, 2015 (UTC)

This line:

.portable-infobox .pi-data-label {
    flex-basis : 110px;
}

Is giving me a warning in my CSS that says "Unknown property 'flex basis'."

Also, what's the default width on the infobox? They're looking a little wide on the page, I believe the old ones were set to 250px.

ReapTheChaos (talk) 01:38, December 11, 2015 (UTC)

Flex basis is a relatively new technology which your browser or css tool may not support, but it does exist and is part of a web standard(http://www.w3.org/TR/css-flexbox-1/#flex-basis-property). You could change it to :

.portable-infobox .pi-data-label {
    min-width:50px;
}

All it does is set the minimum size of the label so long descriptions such as "Also known as" fit in a single line.

Also, what's the default width on the infobox? They're looking a little wide on the page, I believe the old ones were set to 250px.

The default width is 270px as far as I can tell, and the maximum height is 500px (in case you were wondering). You can change the width like so:

.portable-infobox {
    background-color: #111;
    color:white;
    padding: 0.2em;
    width:250px; /* <--- change this*/
    border:1px solid #aaaaaa;
}

Dessamator (talk) 08:25, December 11, 2015 (UTC)

They're looking much better now. I made the overall width adjustment and I also made an adjustment to the value after flex-basis from 110 to 150 to get some of the labels to stay on one line. I hope that was the correct value to change.

I'm still having issues with the images, having them set to fill the width of the box is making many of them too big or giving them an odd look. I think it would be easier to just resize them on an as needed basis if we want them to fill the entire space. Would I be correct in assuming that I just need to delete this part to have them just appear their actual size?

.portable-infobox .pi-image-thumbnail {
    width: 100%;
    height: auto;
}

Or do I need to replace it with something else?

Also, should I be changing the flag to open every time I have another question? I'm not really sure what your policies are on that. ReapTheChaos (talk) 21:11, December 11, 2015 (UTC)

Hmm, you can set the width and height to whatever you need or simply remove it if you prefer, e.g:

.portable-infobox .pi-image-thumbnail {
    width: 250px;
    height: 300px;
}

As for the flag you can re-open it until the request is resolved. Generally it is only closed when the "requester" is happy, or takes too long to reply or the request is invalid. For now I'm leaving it open until you're satisfied with the results. Dessamator (talk) 21:46, December 11, 2015 (UTC)

The issue with images is, we have them in all shapes and sizes. Some as small as 64x64 px, others are oddly shaped, like 300px wide by 600px tall. The old infoboxes we used allowed us to manipulate the image size on the page itself, so if we had an oddly sized image we could make adjustments there on the page that only affected that one image. I can't find any option like that listed for these new portable ones and this one size fits all approach of having one code on the CSS page to govern them all simply isn't going to cut it. We can't be the only wiki that's having this issue. ReapTheChaos (talk) 01:15, December 12, 2015 (UTC)

Yes, it is a common issue people have with it. Although I wouldn't recommend it, one way you can overcome this "problem" by not using the image tag. For example:

<data source="image"></data>
{{infobox character|image=[[File:abc.png|20x20px]]}}

You can also submit a feature suggestion to Contact. Dessamator (talk) 13:21, December 12, 2015 (UTC)

I don't want to do something like that, of the thousands of images we have there are only a hundred or so that this would apply to. I think I've figured out a fix that might work on the abnormally shaped one, I'll use photoshop to add a transparent background to them so it's as wide as it is long and that should make them appear as 250px x 250px in the box.

Anyway, my next question, is there a way to change the font size on one line of a title header? Not sure I'm using the correct terminology there, here's an example of one of our infoboxes. w:c:mafiagame:Template:Infobox person. As you can see in the top is lists the persons name and below in smaller font it lists what they are. ReapTheChaos (talk) 16:22, December 12, 2015 (UTC)

Anyway, my next question, is there a way to change the font size on one line of a title header?
Sure, you can use the format tag for this:

<title source="name">
     <format>{{{name}}} <br> {{{type}}} </format>
</title>

Dessamator (talk) 16:42, December 12, 2015 (UTC)

This is what it gives me:

I had to change the header height from 12px to auto to get it to cover the second line, not sure if that's the correct code but it seemed to work, but if I add that to the CSS will it impact my other boxes? It's also giving me a warning of "unclosed xml attribute". Also, while that allowed me to add the second line, how do I adjust its font size. EDIT: Is there a way to increase the space between the two lines? They seem a little close to one another.ReapTheChaos (talk) 17:42, December 12, 2015 (UTC)

Try this instead :

<title source="name">
        <format>{{{name}}}
           <div class="person_type">{{{type}}}</div>
        </format>
</title>

Is there a way to increase the space between the two lines? They seem a little close to one another.

.portable-infobox .person_type {
     font-size: 10px;
     line-height:20px;
}

I'm not entirely sure why you want to add it all to the title. It isn't a title, it is an extra field that describes the person. Personally, I'd write it something like this:

<title source="name"></title>
<data source="type">
   <format>
       <div class="person_type">{{{type|}}}</div>
   </format>
</data>

Then with css you can make it look however you want, e.g.:

.portable-infobox .person_type {
     font-size: 10px;
     background-color: #3d4248;
     text-align: center;    
}

“ but if I add that to the CSS will it impact my other boxes? “


There is a theme property that will choose a different style depending on what you set it as, for example:

<infobox theme="person">
</infobox>
.pi-theme-person .person_type {
     font-size: 10px;
     background-color: #3d4248;
     text-align: center;    
}

Check out Help:Infoboxes/CSS for more information about that.

Dessamator (talk) 07:49, December 13, 2015 (UTC)

“ I'm not entirely sure why you want to add it all to the title. It isn't a title, it is an extra field that describes the person. Personally, I'd write it something like this:

<title source="name"></title>
<data source="type">
   <format>
       <div class="person_type">{{{type|}}}</div>
   </format>
</data>

Then with css you can make it look however you want, e.g.:

.portable-infobox .person_type {
     font-size: 10px;
     background-color: #3d4248;
     text-align: center;    
}

It doesn't have to be a title, I just want it in the same section of the infobox. I can't get any of your examples to work, here's what I get when I added the above:

http://infoboxpreview.appspot.com/?snapshotId=-K5QvAWr91uLQec-GQHk

ReapTheChaos (talk) 15:22, December 13, 2015 (UTC)

CSS is very complex, it seems you're interested in heavy customization. If you're very interested in learning more then I suggest learning more about it using a site such as https://www.codecademy.com/learn/web or csstricks.com . I actually leant most about CSS myself using codeacademy.

Your questions seem to be more about adapting the style of the infobox rather than actually making them portable, and there is more in those resources than I'll ever know. So I'm closing this request. If you need more help, please re-open and make a new request using the template in Template:Forumheader/Mentoring_requests. Alternatively, you can ask simple questions in the forums.

Anyway, the solution to your latest issue is here: http://infoboxpreview.appspot.com/?snapshotId=-K5RMomkPajk5-mthKBk

Dessamator (talk) 17:30, December 13, 2015 (UTC)

“ Your questions seem to be more about adapting the style of the infobox rather than actually making them portable “

I have no clue what you mean by that. Isn't the whole point of this to adapt our current infoboxes to ones that are portable?

“ If you're very interested in learning more then I suggest learning more about it using a site such as https://www.codecademy.com/learn/web or csstricks.com . I actually leant most about CSS myself using codeacademy. “

Maybe I was mistaken, but I thought this is where we're supposed to come to learn how to make these new portable infoboxes, at least this is where Wikia is telling people to come to learn and get help. If that's not the case you need to tell them to stop referring people here. I'm not a web site designer, nor do I desire to be one, I'm simply trying to get my infoboxes up to Wikia's new standard.

“ CSS is very complex, it seems you're interested in heavy customization. “

I wasn't aware what I was trying to do was "heavy customization". I'm trying to add one simple line to an infobox. The infobox I'm trying to replace is one I made myself from scratch a few years ago with no help or background in this kind of thing and it only took me a few hours of trial and error to figure it out.

Wikia should have had a plan in place to deal with this before they implemented it. This level of programming (or coding or whatever it's called) is way over the heads of most users and they know it. To just dump this on us with no support is ridiculous. ReapTheChaos (talk) 23:19, December 13, 2015 (UTC)

Let me interject here, for a moment, as both of you have done a superb job of what the Mentoring service is all about. Dessamator has provided a very fine portable infobox, and ReapTheChaos seems to be mostly happy with it. There seems to be a formatting issue with one (possibly two) of the parameters, that can be altered with a bit of CSS. While this is where wikians are supposed to come for help with making the boxes portable, a solution has been supplied. That is why we strive to make sure that a given wikia is able to maintain whatever solutions are provided with resources to make alterations on their own. It's a bit like a tutor helping a student out without taking the exams for them. I understand that ReapTheChaos is not a web site designer, but I think he'll find that the standard has been met. As for Wikia having a plan in place to deal with this, they did not anticipate that most users would have such a difficult time with transition, as the built-in default CSS solution is actually very user-friendly without any additional coding, and the skill is easily researched. The thinking is that if one can figure out Templates with wikitext, that they can master CSS as well. In most cases, this has proven true. In the areas where additional assistance is preferred, volunteer Mentors are here to help out. This standard too has been met. So, my suggestion is that ReapTheChaos take a few minutes to read the resources provided and see if he is comfortable proceeding on his own, or perhaps he can reach out to his community for someone who may wish to lend their own creativity. FishTank @fandom (wall) 01:11, December 14, 2015 (UTC)

“ The thinking is that if one can figure out Templates with wikitext, that they can master CSS as well. “


Really? Who thought that? Thus far 4 solutions have been offered to my latest question, none of which can properly duplicate what this one simple line of code from the current template does:

<font size="3">{{{name|{{PAGENAME}}}}}</font><br><font size="1">{{{type|Type}}}</font>

The whole concept behind wikitext was to create a markup code using terms in "plain english" that everyday people could understand. CSS is anything but that. Before I started this infobox project our CSS page hadn't been changed since 2011, it's not an area most users are going to readily understand.

Dessamator even stated this was considered "heavy customization" yet you seem to think users should be able to figure it out on their own? This stuff is over the heads of most of Wikia's user base, the bulk of which are just people with an interest in a particular subject, they're not web designers. Every blog post and forum thread I've read on these new portable infoboxes are filled with comments backing that up. The fact that the majority of wiki's I've checked haven't even bothered to make the switch does as well.

Most gaming wiki's I know of have dozens of different infoboxes, luckily ours only has 15. The first format I gave when I signed up for help here will cover the bulk of those, but there are a few, like the last one above, that have additional features not covered by the first one. I have about three others that have unique features as well and I'm simply trying to learn how to replace those and bring them up to Wikia's new standard.

I'm just trying to get ahead of the game on this so I can move on to other things that need doing, I've spent the better part of the last two weeks researching and trying to sort this issue out, trust me, if I could do it on my own I would have. Yet it looks like you're both trying to tell me that if I need further assistance I need to look elsewhere or figure it out myself. As a representative of Wikia, are you stating this is their official position on the matter?

ReapTheChaos (talk) 19:20, December 14, 2015 (UTC)

“ This stuff is over the heads of most of Wikia's user base, the bulk of which are just people with an interest in a particular subject, they're not web designers. “


You may be confused about what web designers and what a wikis are:

A wiki is by definition "is a website which allows collaborative modification of its content and structure directly from the web browser. "wikipedia:Wiki.

A web designer is " is someone who prepares content for the Web. This role is mainly related to the styling and layout of pages with content, including text and images."[1]

So people who edit pages on a wiki fulfill the same role. They may or may not possess all knowledge of a web-designer but they still design pages. It is up to each individual contributor to decide how much they are willing to learn. So saying you are not interested in being a web designer is akin to saying you're not interested in creating wiki pages. You could conceivably leave all pages in their normal styling and simply create content without worrying about their appearance.

To be clear, the concept of mentoring was not created by staff. It was created by the admins of this wiki as a way to help each other and others. So you may ask for help here as many times as you wish but be mindful that this is a volunteer process and that this is meant as a venue for requesting help for a whole wiki, not small individual requests that can be answered in our forums here.

Anyway, as I wrote above, the solution to your latest issue is here: http://infoboxpreview.appspot.com/?snapshotId=-K5RMomkPajk5-mthKBk

Please use the forums if you have any suggestions or concerns about the mentoring process. Dessamator (talk) 20:34, December 14, 2015 (UTC)

Well now you're just getting into semantics. Yes, technically speaking when you edit a wiki page you're creating/designing web content. My point was that wikitext and HTML/CSS are not one in the same and to assume that someone who can use the latter will be able to understand the former is an absurd leap.

As for your solution, as I stated above that doesn't seem to work. If you look at it, the word actor isn't centered. You added the CSS code:

.portable-infobox .person_type{
     font-size: 10px;
     text-align: center;    
     width:250px;
}

It seems that the text align center is working in conjunction with the width which is expressed as 250px. Adjusting the number does make it move position, but I don't know how that will impact the other types that can be entered into that space. ie, will a longer one, like Game Programmer need a different number to center it properly?

You seem to think I'm not trying to figure these things out on my own, but I have been. In fact I came up with two different solutions to this problem, the question is, are they correct or not.

<title source="type"><format><font size="1">{{{type}}}</font></format></title>
-Or-
<header><font size="1">{{{type}}}</font></header>

Both can be seen here: http://infoboxpreview.appspot.com/?snapshotId=-K5XYdVHlhwsgzOhzZCn They both work, and they're much simpler than what you're suggestion, but that only leads me to believe that they must not be a workable solution for some reason. ReapTheChaos (talk) 22:15, December 14, 2015 (UTC)

Indeed, since the
<font>
tag is long deprecated and fundamentally not portable. But a longer entry should center appropriately. One applies to the size of the container, the other the flow of the text. They are independent. The solution for header will work, with the caveat that it's a bit hacky. The
<title>
element, however, can't use
<format>
. If only it could... :-) FishTank @fandom (wall) 22:22, December 14, 2015 (UTC)


Well, if
<font>
isn't portable, than can I assume
<small>
isn't as well? We use them both on the pages for various information that goes into the infoboxes themselves. should we be doing that a different way too?

ReapTheChaos (talk) 22:35, December 14, 2015 (UTC)

Simpler solution to extra title

As FishTank notes, both approaches will work. But the header tag is generally reserved for describing a section, and using font isn't a good way of doing it, as it is also a bad practice to use those tags for inline styling.

I didn't actually know that one could use two or more title tags in a single infobox, and apparently, Fishtank didn't know that we can use format tag in a title [2]. So as I said previously, we are all learning something. Try using this instead:

.portable-infobox .pi-title:nth-of-type(2) {
    font-size:10px;
}

See : http://infoboxpreview.appspot.com/?snapshotId=-K5Xe_6JG_2tLITOhFZp

Well, if
<font>
isn't portable, than can I assume
<small>
isn't as well? We use them both on the pages for various information that goes into the infoboxes themselves. should we be doing that a different way too?

Yes, you can use global css for that. Unfortunately, inline CSS will never be fully portable because it doesn't take into account different devices. Dessamator (talk) 22:48, December 14, 2015 (UTC)


Well that works perfectly, and it looks a lot cleaner and simpler than the some of the other solutions, mine especially. I can get this one converted over now. And that dev wiki you linked to looks like it might even answer an issue I'm having with one of my other infoboxes, it certainly has more in depth information than the help pages I've seen around.

Many thanks! ReapTheChaos (talk) 23:27, December 14, 2015 (UTC)

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.