halcyon roost
regarding thumbnail
img in CSS will affect all images on wiki, you should really modify it only in tie w/ some class/id, like .classname img
signal notch
Ok. 'classname' is the title should have the image in the infobox, right?
halcyon roost
if you give your infobox class infobox, then it's gonna be .infobox img {...
signal notch
got it.
signal notch
Well, I did wht you told me. Apparently, the thumbnail problem was fixed (?) but the upper green templatewas not.
It is okay if I paste the css code so you check it?
Also, the img properties for the infobox picture is missing after the edit.
signal notch
if you give your infobox class `infobox`, then it's gonna be `.infobox img {...`
".infobox img" goes into the css, but in the template should put '<p class="infbox img"> </p>' closing the 'file' section, or should I use an .div identifier?
I'm trying to send the link, but it appears this message:
wide solstice
I'm trying to send the link, but it appears this message:
use /auth in a main channel
signal notch
use /auth in a main channel
in # general?
wide solstice
yes
signal notch
did it.
wide solstice
it is, you need to add more classes to the table css
width: 320px applies to the template because it's also "table"
signal notch
it is, you need to add more classes to the table css
What kind of classes? been comparing my templates to other user's templates in another wiki, and I barely see the differences.
My inbox is almot 90% complete, just need to fix these problems.
wide solstice
table is a general wiki element, you are targeting that right now with your css, that is the issue
you need to make it more specific
signal notch
How do I put it specific? Is that the reason why my green board is warped like this?:
wide solstice
you can do it by adding more classes to the template, same way you did outerbox, etc
signal notch
How should I name them without breaking the table itself?
Literally, there are four of them.
signal notch
you can do it by adding more classes to the template, same way you did outerbox,...
Should I put ".infobox table" in the first one, or all of them?
wide solstice
all of them yeah
wide solstice
How should I name them without breaking the table itself?
what do you mean by breaking?
signal notch
what do you mean by breaking?
I meant by made it unrecognizable for the wiki to interpret.
Would be better if I put "div.table"?
wide solstice
Would be better if I put "div.table"?
div is also everywhere so no
just add <table class="class"> in the infobox template?
then .class table in css
signal notch
then .class table in css
ok.
signal notch
then .class table in css
".class table" for the 4 parts, right?
wide solstice
".class table" for the 4 parts, right?
actually you should prob remove the table and use .class instead
then yeah add .class in front of the rest .class td etc
signal notch
I put them like this...
It fixed the green table! but now there's a gap in the infobox...
hahaha
signal notch
actually you should prob remove the table and use .class instead
<th> and <td> will work without a table?
wide solstice
yeah they should
also you should change class to something like infobox haha
class was just the placeholder name, you can name it what you want, just remember to change it in the template too
signal notch
also you should change class to something like infobox haha
I'm planning to create many infobox templates, so I doubt if just should carry the name of ".infobox"...
Should i put ".infobox class" or just plain ".infobox"?
wide solstice
I'm planning to create many infobox templates, so I doubt if just should carry t...
well the name is up to you really
wide solstice
Should i put ".infobox class" or just plain ".infobox"?
just ".infobox"
the flow is, you assign the class with "class=" on template/page then you select the class with css
if you change class=class to class=infobox, then call ".class" in css it wouldn't do anything because it no longer exists
signal notch
It is valid like this?
wide solstice
should be, yeah
signal notch
Looks like it's finally done.
But the green board looks weird...
Cheking the green template, the original is slim.
but in the article, It's like it has 10px of padding all around...
wide solstice
these are still universal
signal notch
ooh.
great.
Just the img properties and the header variants are remaining.
About, the infobox's picture, it has atributtions. One particular function was that the image had rounded corners.
I was using the 'img {...}' part to code it, but the problem was like the previous issues, it had an universal reach, so the thumbnails also were rounded.
wide solstice
you can do .outerbox img
wide solstice
yeap, as outerbox is the container of the infobox the img is in
you can check this kind of stuff with inspect in your browser
signal notch
Should I not create an aditional <p class= > in the template, right? just the css
wide solstice
Should I not create an aditional <p class= > in the template, right? just the cs...
for outerbox? you already have that class in there
signal notch
awesome!
well, I have a last question, but I'll do it later.
I gotta work. See you later, and thank you so much, @wide solstice ^ ^
wide solstice
cya, and np 
signal notch
and I want to modify as an infobox property
The thing is, I could make separate curly codes in the css, but how do I made them appear properly?
I want is the red one be the default, while the others being a variants, just according to the header name.
I could use the "if " curly keys, but have no idea how to implement them.
wide solstice
I want is the red one be the default, while the others being a variants, just ac...
what is the thing that you really need to change between them, just background image?
misty dirge
I could use the "if " curly keys, but have no idea how to implement them.
Probably more the #ifeq: you are looking for.
#if: only checks if a string is empty or not, where #ifeq: is the one that actually compared to strings
wide solstice
I don't think you actually need ifs for that, can just make a few classes and assign them in a template parameter
misty dirge
I don't think you actually need ifs for that, can just make a few classes and as...
well you need to check what the parameter is given to serve the right stuff.
Wait actually #switch: might be even better, basically it is a multi version of #ifeq (can see it on the same link I pasted above, jsut further down)
wide solstice
well you need to check what the parameter is given to serve the right stuff.
I'm just thinking of something really simple, class="{{{1|}}}" I have that setup in one of my templates and it works
misty dirge
so something like:
{{#switch:{{{type}}}
|red = code here
|blue = code here
|yellow = code here
|#default = code here
}}
of can rename the parametername and values it looks for as you like, and the #default need to exist, as the fallback for if what is served is not one of the other options given, which from your description earlier would be the red option so I geuss in that case, if you went with my names for it, you would just not have the red option at all (as even if people gave a "red" as the value it would since it is not one of the others would still serve that)
misty dirge
I'm just thinking of something really simple, class="{{{1|}}}" I have that setup...
but it looks like he at least needs a background color, and a predetermied image, so I don't think something that simple will work in this case
wide solstice
but it looks like he at least needs a background color, and a predetermied image...
hm I don't see why it wouldn't 
misty dirge
well we both gave our input so let us let him decide instead, what would be best for his specific situation of us going back and forth on it now 😄
wide solstice
true lol 😄
misty dirge
yeah most of it at least, kinda 2 ways you could do it, instead of having it (I assume, that what the SS is from), on the Mediawiki:skinname.css page, you could put it inline on the page in the above switch I mentioned in a style="". Or you switch could assign different classes which you could then give the different stuff on the Mediawiki:skinname.css page.
.classname
{
}
being the syntax in the css page for well classses
lol the code box didn't like starting with that xD
signal notch
been checking the french and spaniard wikipedia's infoboxes coding, and they are more underanstable than the english one.
misty dirge
can't say I ever checked those 2 versions of wikipedia, but yeah at least the english wikipediae is a bad place to try and import/copy from those are super complicated (though needed for them, due to the size of wikipedia), way too overengineered for the average MH wiki though
wide solstice
yeah most of it at least, kinda 2 ways you could do it, instead of having it (I ...
templatestyles btw, also you can't use background-image inline by default so he'd have to use a normal image
misty dirge
ohh didn't know that, never tried, in that case well the class assigning method it is then I guess
wide solstice
yeah that and <img> tags don't really work by default I think, security reasons?
misty dirge
and yeah I guess templatestyle is an option too, though I tend it find that harder to work with personally, so try to avoid when possible
misty dirge
yeah that and <img> tags don't really work by default I think, security reasons?
I mean the basic [[File:something.png]] basically converts to <img>, so not sure why you bring that up, hardly seems relevant
signal notch
I'll go out to lunch and will code and show examples later.
wide solstice
I mean the basic `[[File:something.png]]` basically converts to `<img>`, so not ...
um, because it's in the same boat as back-ground img as something that doesn't work 😓 like if you try to use it as plain tags on a page
misty dirge
um, because it's in the same boat as back-ground img as something that doesn't w...
but unlike background-img it is not a css property, but a html tag, that has a perfectly viable wikitext version, so there is litterally no reason to ever try to use it
wide solstice
but unlike background-img it is not a css property, but a html tag, that has a p...
not everyone knows that though can't hurt to share info
anyway, on the actual topic, the solution I was thinking of is this
`template
<div class="{{{type|red}}} header">
css
.red {
background-image: url()
background-color: #
}
.blue {
background-image: url()
background-color: #
}
.green {
background-image: url()
background-color: #
}`
unless he needs something more complicated like different icon/background combinations, I think it would generally work to switch between a set
signal notch
Hello.
Is it okay if Coded like this?
Which part should I include this?
Here the border with the background color doesn't look well...
wide solstice
Is it okay if Coded like this?
css-wise, if you aren't going to change these other stuff per type, you can just put this part under .header so they apply to all of them
you don't need the upper header div, just the type header below it
signal notch
Okay, fixed both of them.
I want to add a code effect on the icons, but in the css looks like the Wiki doesn't recognize it or something...
In w3schools they work well...
wide solstice
I want to add a code effect on the icons, but in the css looks like the Wiki doe...
hm not sure but might be because you're using it on a templatestyles page, they use a "sanitized css" model which is a little more restricted
wide solstice
so there's no way to unlock that command.
you can try putting that part into commons.css
signal notch
btw, is accurate to put this code in this part?
or is supposed to go be out of the div?
wide solstice
btw, is accurate to put this code in this part?
well me and gummiel suggested two different approaches, and that's the other solution, basically you don't need them both
signal notch
oh.
wide solstice
if you want to try the switch route, it would go where the type header is currently
signal notch
if you want to try the switch route, it would go where the type header is curren...
my bad, I tough they were both needed.
So, if I put "|type=" field, it willwork with no problem, right?
Woo! it worked.
I was wanting to add default categories, but now its containing different types of character, it'll have to be set manually.
wide solstice
I was wanting to add default categories, but now its containing different types ...
you mean like a category per type too?
signal notch
it's now complete, but I will have to make a setting for a "preceded by" and "succeded by" for another infobox.
So... in "commons.css" shall I put this code (ignore opacity) for use it in the template?
wide solstice
So... in "commons.css" shall I put this code (ignore opacity) for use it in the...
yeah
wide solstice
you mean like a category per type too?
also asking this because you can use a switch for that if it's by type, like this
{{#switch:{{{type}}} |fictional = [[Category:Fictional]] |star = [[Category:Star]] |#default = [[Category:Default]] }}
signal notch
ohh
I was meaning about when you set a hidden category in a infobox, so if you put the infobox code in an article, the article has the infobox's category.
wide solstice
I was meaning about when you set a hidden category in a infobox, so if you put t...
yeah that's what the code would do, assignging a category to the page based on the header type
misty dirge
I was meaning about when you set a hidden category in a infobox, so if you put t...
If you want to give an infobox a category, but now have that category inherited by pages it is used on you need to put it betwee <noinclude></noinclude> tags, as that part wont be transcluded https://www.mediawiki.org/wiki/Help:Templates#Control_template_inclusion
signal notch
If you want to give an infobox a category, but now have that category inherited ...
It will work with this?
btw, isn't there a way to hidden these templates?
misty dirge
It will work with this?
Ohh so you want to just have the page it is used on assigned a category, in that case surround that switch in <includeonly><includeonly> tags. (as it then will ONLY get transcluded, not shown/processed on the template's own page), Otherwise the template itself would be getting the Default category as well (since it would be getting nothing as the type parameter there, and thus fall back to the default option in the switch)
In general it is good practice to have everything either inside <noinclude>, or <includeonly>, as it is almost never preferable to have any part of the template both being transcluded, and shown on the template's own page
signal notch
Well, great.
I want to end this with a last function...
I want to add zebra personalized color according to the header type.
I know the responsible code for the zebra effect:
I don't think adding variant code in here can help.
wide solstice
maybe there's a better way, but you can move the type up like this
<div class="{{{type|fictional}}} outerbox"> <div class="header">
wide solstice
I don't think adding variant code in here can help.
then replace the type and zebra code in the css you have now with this for every type
`.star > .header {
background-image:
background-color: #
}
.star > table tr:nth-child(even) {
background-color: #
}
`
signal notch
then replace the type and zebra code in the css you have now with this for every...
What do you mean by "type" in the css? there's no "type" in the css.
oh, forget it, I think i understood it.
worked great.
I'm finally done with this topic, but I'm thinking how to enable the "mix-blend-mode: overlay" code into common.css...
wide solstice
So... in "commons.css" shall I put this code (ignore opacity) for use it in the...
didn't this work? you'd need to actually assign the "overlay" class in the template also
like <div class="overlay header">
and are you sure it's not background-blend-mode: overlay; you want? since that would affect only the icon
signal notch
Well, I'm not sure if it would be better,
This is how i want to look like:
The icon blends pretty well with the color, so besides of looking well, it avoids blending with the white text.
I applied "soft light" there in Illustrator, but when looked out in css, the only thing closest to it was "overlay".
signal notch
like <div class="overlay header">
I hope just applies to the icon and not the background color...
Here doesn't look like it recognizes the css value, but in the prev looks normal...
wide solstice
I applied "soft light" there in Illustrator, but when looked out in css, the onl...
oh.. I think you want background-blend-mode: soft-light; then
signal notch
oh.. I think you want background-blend-mode: soft-light; then
Does this recognizes well in the template css default, or has to go in the common.css?
wide solstice
commons I guess, but it kinda looks like it's not recognized there either, maybe it's not supported? you can try though
wide solstice
like <div class="overlay header">
hmm mix-blend-mode: soft-light; on the header then?