Fandom

Infobox Wikia

Mentoring:Prison School Wiki

226pages on
this wiki
Add New Page
Talk0 Share
Mentoring requests Prison School Wiki

What is your username? User:Speedit

Are you an admin on the wiki you are asking about? Yes

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

What would you like help with (e.g. styling or making an infobox or page portable)?

Updating CSS to allow customisations on the tabber make old customisations work with the tabber active - the old customisations worked well elsewise but are an epic fail with it. (what the infobox is meant to look like)

tabber CSS code, press show to view
<pre>
.pi-tab {
    background-color: #fff;
}

.pi-tab-link {
    background-color: #fff;
    border-style: none;
    margin: 0;
    padding: 0;
}
ul.pi-image-collection-tabs li:first-of-type:after {
    content: "-";
    font-weight: normal;
    width: 1em;
    padding-right: 3px;
}

Any other information (e.g. links, screenshots, or snippets): Feel free to edit the personal page. I also need the code for importing a portable infobox CSS stylesheet to the Wikia.css one because that CSS is excessively long.

In order to ensure you can implement and maintain a Mentoring solution, how would you classify your technical (in CSS, Templates, and Infoboxes) skill level (or those of whomever will be maintaining your Templates)?

I'm probably short of "expert" level, but I'd class myself as capable. ;D

Responses

You can have a look at basic styling for tabs here. Do those help, or do you want help rewriting that CSS as they seem to work fine to me? Dessamator (talk) 15:01, May 12, 2016 (UTC)

I have edited the request to try and make it clearer. Basically, these customisations work great here sans-tabber but flop with the tabber used. I need help debugging the CSS that gets broken by the tabber and working out what is wrong.

broken CSS code, press show to view
/*** caption customisation ***/
.portable-infobox section:first-of-type .pi-data:first-of-type {
    background:#000;
    text-align:center;
    color:#fff;
}
/*** thematic label coloring ***/
.portable-infobox .pi-group:last-child .pi-data-label {
    background:#000;
    color:white;
}
/*** romaji italicisation ***/
.pi-theme-categoric-romaji .pi-group:nth-child(2) .pi-data:nth-child(2) .pi-data-value, .pi-theme-romaji .pi-group:nth-child(2) .pi-data:nth-child(2) .pi-data-value {
    font-style: italic;
}
/*** categoric infobox footer ***/
.pi-theme-categoric .pi-group:last-child,.pi-theme-categoric-romaji .pi-group:last-child  {
    border-top: 1px dotted #aaa;
}

 Speedit   talk contribs  13:54, May 13, 2016 (UTC)

That's because the infobox adds /  remove elements when it hides / shows rows. Try this:

http://infoboxpreview.appspot.com/?snapshotId=-KHi9RF9abhP-z5D-R2J

Dessamator (talk) 10:50, May 14, 2016 (UTC) 

Much thanks for your help and the links, this is the code I arrived at and it functions as expected with the tabber and without. :D

resultant code, press show to view
/*** caption customisation ***/
.portable-infobox .pi-group:nth-of-type(1) > .pi-data:nth-of-type(1) .pi-data-value{
    background:#000;
    text-align:center;
    color:#fff;
}
/*** romaji italicisation ***/
.pi-theme-categoric-romaji .pi-group:nth-child(1) .pi-data:nth-child(5) .pi-data-value, .pi-theme-romaji .pi-group:nth-child(1) .pi-data:nth-child(5) .pi-data-value {
    font-style: italic;
}
/*** thematic label coloring ***/
.portable-infobox .pi-group:last-child .pi-data-label {
    background:#000;
    color:white;
}
/*** categoric footer customisation ***/
.pi-theme-categoric .pi-group:last-child,.pi-theme-categoric-romaji .pi-group:last-child  {
    border-top: 1px dotted #aaa;
}
/*** tabber customisation ***/
ul.pi-image-collection-tabs li.pi-tab-link {
    background: #fff;
    border-style: none;
    margin: 0;
    padding: 0;
}
ul.pi-image-collection-tabs li:first-of-type:after {
    content: "-";
    font-weight: normal;
    width: 1em;
    padding-right: 3px;
}

That's another happy customer, once I have merged the first two groups into one on the other infoboxes so that they are actually semantic. Thanks for the explanatory yet refreshingly DIY test code :D

 Speedit   talk contribs  11:04, May 19, 2016 (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.