recursal/Fanatic-Fandom huggingface dataset:
Themes/Character/theme.css

/\*

```
\*/
/\* Theme for Character infoboxes \*/
.portable-infobox.pi-theme-character .pi-title { /\* Header/Title Color \*/
 background-color: #f28729; /\* Primary Background Color \*/
 color: #000000; /\* Text Color of black \*/
}
.portable-infobox.pi-theme-character .pi-secondary-background { /\* Header/Title Color \*/
 background-color: #f28729; /\* Primary Background Color \*/
 color: #000000; /\* Text Color of black \*/
}
.portable-infobox.pi-theme-character .pi-data { /\* Data Padding Removal \*/
 background-color: #F2EDE8; /\* Tertiary Background Color \*/
 padding: 0px 0px;
 vertical-align: middle; /\* Align the text vertically centered \*/
}
.portable-infobox.pi-theme-character .pi-data .pi-data-label { /\* Data Label Color \*/
 background-color: #f2cd13; /\* Secondary Background Color \*/
 padding: 0px 0px;
 border: 10px solid #f2cd13; /\* Add the border of the same color as the secondary background color \*/
}
.portable-infobox.pi-theme-character .pi-data .pi-data-value { /\* Data Value Color \*/
 background: #F2EDE8; /\* Tertiary Background Color \*/
 padding: 0px 0px;
 border: 10px solid #F2EDE8; /\* Add the border of the same color as the tertiary background color \*/
}
.portable-infobox.pi-theme-character .pi-image { /\* Image Color \*/
 background: #F2EDE8; /\* Tertiary Background Color \*/
}
.pi-theme-character .pi-data, .pi-theme-character .pi-group {
 border-bottom-width: 0;
}
/\*

```
\*/
Themes/Accelworld/theme.css

/\*

```
\*/
.portable-infobox a {
 color:#6f027c;
}

.portable-infobox {
 background:#fff;
 color:#000;
 border-bottom: 20px solid #C5C5C5;
}

.portable-infobox .pi-title {
 background-color:#C5C5C5;
}

.portable-infobox .pi-header {
 background-image:none;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#000;
 text-align: center;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header {
 background-color: #C5C5C5;
}

.portable-infobox .pi-item-spacing {
 padding:0;
}

.portable-infobox .pi-data-label {
 background-color:#E5E5E5;
}

.portable-infobox .pi-navigation {
 background-color: #fff;
}

.portable-infobox .pi-image,
.portable-infobox .pi-navigation,
.portable-infobox .pi-data {
 border-right: 1px solid #AAAAAA;
 border-left: 1px solid #AAAAAA;
 border-bottom: 1px solid #AAAAAA;
}

.portable-infobox .pi-data:last-of-type {
 border-bottom:none;
}

.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Mobile/FAQ

## What is a mobile device as defined by Fandom?

**Note:** *This is a **generic*** section***stub**. Expand it by clicking  Edit to right of the section title.*
## What mobile technologies are available ?

Most tools showcased in this wiki are designed to improve either editing (e.g. Curated main pages) and reading (e.g. Portable Infoboxes) using mobile devices.

## How can I change the mobile look and feel?

Currently this is only possible using special tools such as Curated Main Pages and Portable Infoboxes.

## Can I edit using a mobile device?

Yes. Although not all editing features can be used on mobile due to technological limitations.

## Is CSS and JavaScript shown on mobile?

**Note:** *This is a **generic*** section***stub**. Expand it by clicking  Edit to right of the section title.*
## See also

* Desktop
* Device
* Screen
Tag

**Tags** generally refers to fragments of HTML, XHTML, or XML used to define and organize some form of data or presentation. MediaWiki and Fandom wikis implement some custom tags that provide unique data, function, or presentation on their wikis. Some wiki extensions also implement custom tags.

## Structure

A tag is denoted by angle brackets enclosing the tag.

* Example:
	+ `<pre>`

After the first tag, the start tag, follows the content. At the end, a closing tag will follow, which is the same as the opening tag, except for a slash in front of the tag name.

* Example:
	+ `</pre>`

Some tags implement their feature on the spot they are placed, and do not require a closing tag. However, for XML, you *have* to add a slash at the end of the tag, otherwise you'll get an error. This is not required, but still valid, for HTML.

* Example:
	+ `<br />` for XML and `<br>` for HTML.

To change the default behavior of a tag, you can use attributes. An attribute is placed in the start tag, after the name of a tag, separated by a single space. An attribute consists out of two parts, separated by an equals (=) sign. The first part is the attribute name, which denotes what to change. The second part is the value, enclosed by quotes. Multiple attributes can be used in one tag, provided they are separated by a single space.

* Example:
	+ `<gallery type="slider">`, which changes the type of the gallery to a slider.
	+ `<gallery type="slideshow" hideaddbutton="true">`. Changes the gallery to a slideshow and hides the "add photo" button.

An extensive list of attributes can be found on the HTML attribute page on Wikipedia.

## External links

* HTML Tutorial at W3Schools
* Markup language at Wikipedia
* XML schema at Wikipedia
Themes/Muse/theme.css

/\*

```
\*/
.portable-infobox a {
 color:#6ebefd;
}

.portable-infobox {
 background:#434343;
 color:#D5D4D4;
 border-bottom: 20px solid #6ebefd;
}

.portable-infobox .pi-title {
 background-color:#6ebefd;
 font-style: italic;
}

.portable-infobox .pi-header {
 background-image:none;
 background-color: #B87333;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#D5D4D4;
 text-align: center;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header {
 background-color: #000;
}

.portable-infobox .pi-navigation {
 background-color: #434343;
}

.portable-infobox .pi-navigation,
.portable-infobox .pi-data {
 border-right: 1px solid #6c6b6b;
 border-left: 1px solid #6c6b6b;
 border-bottom: none;
}

.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Portable Infoboxes/Benefits

When used **properly**, Portable Infoboxes have many benefits mainly related to presentation and usability.

## Presentation

Primarily these infoboxes serve as a simple way to present data in many devices. Unlike classic infoboxes, they can be formatted to display properly in various devices, such as smartphones, feature phones, tablets, and various other devices.

Formatting
Portable infoboxes have a default formatting which reduces the need to have complex HTML tags and parser functions.
Auto-hide
They hide empty sections by default to reduce the clutter and present only needed information.
Auto or manual collapsing
The infoboxes may automatically collapse to allow the user to read the page content easily.
Image collections (tabs)
They have the ability to show a group of images in tabs.
Themes
Since markup is the same this makes it easier to share and modify themes from other wikis.
## Performance

As they have reduced content, these infoboxes perform better in several devices. They also require less bandwidth to download the necessary data, and avoid issues caused by inline styling.

## Usability

Currently, it is possible to add them using an insert tool, and create them using a visual infobox builder. There is also a migration tool designed to facilitate conversion from classic infobox into Portable infoboxes. Other usability benefits include:

* Present structured data, making them easier to read
* Data types (e.g. images, videos, data) that may reduce typos

## Sharing

Their portability means that sharing infobox structure and themes is much easier than before. This goes beyond sharing in simple wikis to use in third-party applications. This also facilitates the ability to retrieve data from various pages for use in a custom application, game, or tool.

## Extensibility

As the portable infoboxes all share a common XML structure, it is simpler for third parties to design tools to enhance and provide extra functionality to all infoboxes, just as there are several tools to use XML.

## See also

* Portable Infoboxes
* w:Help:Infoboxes
* Portable Infoboxes/Tips and tricks

## References

1. ↑ The Future of Infoboxes on Fandom
2. ↑ wikipedia:XML
Themes/LotRF

## LotRF

The **LotRF** infobox theme was designed to fit the prevailing color scheme of the *Lord of the Rings* Fanon wiki, despite the unfortunate reality that the wiki in question employs no portable infoboxes.

As an example, the author has constructed an example infobox based on the wiki's "Location infobox" with an associated stylesheet that duplicates that infobox's design.

These designs were presented to a bureaucrat of the site in question.(ref)
Themes/Lunar/theme.css

//

```
.portable-infobox {
 font-size: 11px;
 line-height: 1.5;
 width: 250px;
}
.portable-infobox .pi-data {
 align-items: center;
}
.portable-infobox .pi-data.pi-item-spacing {
 padding: 8px 10px;
}
.portable-infobox .pi-image-thumbnail {
 height: auto;
 max-width: 250px;
}
.portable-infobox .pi-title {
 font-size: 130%;
 font-weight: bold;
 padding: 1em;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
 text-align: center;
}
.portable-infobox .pi-font,
.portable-infobox .pi-secondary-font {
 font-size: inherit;
 line-height: inherit;
}
.portable-infobox {
 background-color: #fbfbfd;
 border: 1px solid #bcbfd2;
}
.portable-infobox .pi-title {
 background-color: #1c1c1c;
 color: #fff;
}
.portable-infobox .pi-header {
 background-color: #bcbfd2;
}
.portable-infobox .pi-border-color {
 border-color: #bcbfd2;
}
//

```
/\*\*/

/\*Category:Stylesheets/\*/\*\*/
Themes/CenteredText/theme.css

/\*

```
 \*/
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

.portable-infobox {
text-align: center!important;
}

.pi-secondary-background {
 text-align: center!important;}

.portable-infobox .pi-data {
 text-align: center!important;
}

.pi-data:last-of-type + .pi-group {
 text-align: center!important;
}

.portable-infobox .pi-title,
.portable-infobox .pi-navigation,
.portable-infobox .pi-navigation,
.portable-infobox .pi-header,
.portable-infobox .pi-title,
.portable-infobox .pi-data,
.portable-infobox .pi-data-value,
.portable-infobox .pi-data-label,
.portable-infobox .pi-image,
.portable-infobox .pi-image-collection-tabs,
.pi-theme-chapterbox .pi-secondary-background {
 text-align: center!important;
}

.pi-item.pi-group.pi-border-color {
 text-align: center!important;
}

.pi-navigation {
 text-align: center!important;
}

/\*

```
 \*/
Themes/Diep.io

## Diep.io

* Example 1
* Example 2

The **Diep.io** infobox theme is designed for canonical tanks on the Diep.io Wikia, and employs the cyan and dark grey theme of that Wiki. It presents very badly on white-themed Wikis, as it was designed for darker ones, although it is unfortunately no longer in use & so cannot be seen outside of screenshots. If you wish to use this theme for yourself, again, it is highly recommended that you do not use this theme on white Wikis.
Glossary

This page lists common terms related to portability.

## List of terms

* API
* Browser
* CSS
* Curated Content
* Curated Main Page tool
* Desktop
* Device
* Fandom app
* Infobox migration tool
* Infobox Builder
* Lua
* Mentor
* Mercury
* Mobile
* Mobile Main Page
* Oasis
* Orientation
* Parameters
* Parser functions
* Portability
* Portable Infoboxes
* Presentation
* Screen
* Skin
* String functions
* Tables
* Tabs
* Tags
* Templates
* VisualEditor
* Wikitext
Intro to Portability

Content is "**portable**" if you can read it easily on any device (it has portability), whether it's a large desktop screen or a tiny phone screen in the palm of your hand. Text should be comfortable to read, images should not be bigger than your screen, and all visible parts of the page should be fully functional, and in the right place.

Trying to read a page that was perfected for a large desktop screen on your phone can be very frustrating. If content was not designed with that type of use in mind, your smartphone screen will be bad at interpreting and displaying the page in a readable format. It is simply the wrong tool for the job, and with smartphones becoming more and more users' screen of choice, content needs to learn how to work with all devices.

## What makes content portable?

Content is portable when it adapts to every screen, no matter its size or orientation. Whether you're looking at a page on your large desktop screen or scrolling down vertically on your small smartphone, the page should always be easy to read. To make that possible, images and page elements can move underneath or above text instead of sticking next to it, navigation bars may turn into dropdown menus, and some fun special effects may disappear on mobile, so your phone has no problems loading the page.

## Why is this so important?

More than half of all visitors on Fandom come from a mobile device, such as a smartphone or tablet. While the number of desktop users has stayed roughly the same in the past few years, the number of mobile users has been steadily growing. In January 2015, their numbers surpassed our desktop users for the first time - and we expect the number of mobile users to keep growing.

Unique users (by device)Global visits (by device)
Many pages on Fandom look perfect on desktop, but are very frustrating to read on mobile. We want to make sure they have the best possible user experience when they are looking at your pages, no matter what devices they're using.

## See also

* Portability Checklist
* What does portable mean?
* Why should your content be portable?
* How to find portability issues on your wiki?
* How to fix portability issues?
* Prep your content for future features and devices
Themes/Drwho/theme.css

/\*--------------------------------

```
 drwho style infobox
 ------------------------------------*/

```

.pi-theme-drwho {

```
   border: 2px solid #fff;
   -webkit-border-radius: 10px 0px 0px 10px;
   -moz-border-radius: 10px 0px 0px 10px;
   -ms-border-radius: 10px 0px 0px 10px;
   -o-border-radius: 10px 0px 0px 10px;
   border-radius: 10px 0px 0px 10px;
   -moz-box-shadow: 0 0 20px #012c57;
   -webkit-box-shadow: 0 0 20px #012c57;
   -o-box-shadow: 0 0 20px #012c57;
   -ms-box-shadow: 0 0 20px #012c57;
   box-shadow: 0 0 20px #012c57;
   border: 2px solid #fff;
   -webkit-border-radius: 10px 0px 0px 10px;
   -moz-border-radius: 10px 0px 0px 10px;
   -ms-border-radius: 10px 0px 0px 10px;
   -o-border-radius: 10px 0px 0px 10px;
   border-radius: 10px 0px 0px 10px;
   -moz-box-shadow: 0 0 20px #012c57;
   -webkit-box-shadow: 0 0 20px #012c57;
   -o-box-shadow: 0 0 20px #012c57;
   -ms-box-shadow: 0 0 20px #012c57;
   box-shadow: 0 0 20px #012c57;
   background-color: white;

```

}
.pi-theme-drwho .pi-title {

```
   font-size: 18px;
   color: #fff;
   background: #012c57;
   text-align: center;
   border-radius: 10px 0px 0px 0px;

```

}
.pi-theme-drwho .pi-item-spacing {

```
   padding: 0px 5px 0px 5px;

```

}
.pi-theme-drwho .pi-item {

```
   border: 1px solid #2B3358;

```

}
.pi-theme-drwho .pi-data-label {

```
   border-right: 1px solid #2B3358;

```

}
.pi-theme-drwho .pi-data-value {

```
   border-left: 1px solid #2B3358;

```

}
.pi-theme-drwho .pi-data, .pi-theme-drwho .pi-header {

```
   background: #ececec;
   background: -moz-linear-gradient(45deg, #ffffff 0%, #ececec 100%);
   background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ffffff), color-stop(100%,#ececec));
   background: -webkit-linear-gradient(45deg, #ffffff 0%,#ececec 100%);
   background: -o-linear-gradient(45deg, #ffffff 0%,#ececec 100%);
   background: -ms-linear-gradient(45deg, #ffffff 0%,#ececec 100%);
   background: linear-gradient(45deg, #ffffff 0%,#ececec 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececec',GradientType=1 );

```

}

.pi-theme-drwho > .pi-item:last-child {

```
   border-radius: 0 0 0 9px;

```

}
.pi-theme-drwho .pi-secondary-background {

```
   background-color: transparent;

```

}/\*Category:Stylesheets/\*/\*\*/
Mercury

**Mercury** was the codename for Fandom's mobile skin, that has been replaced with FandomMobile in 2021. Prior to Mercury, there was a mobile skin called "wikiamobile".

## See also

* Mobile
* Differences between desktop and mobile
* FAQ about Mercury
* FandomMobile - Codename for the current mobile skin
* Oasis - Codename for the old desktop skin
* FandomDesktop - Codename for the current desktop skin
* Skin
Oasis

**Oasis** is the codename for the Fandom desktop skin. Prior to Oasis, there was a desktop skin called "Monaco".

## See also

* Desktop
* Differences between desktop and mobile
* Mercury - Codename of the current mobile skin
* Skin

## External links

**Note:** *This is a **generic*** section***stub**. Expand it by clicking  Edit to right of the section title.*
Device

**Device** is usually shorthand for "hardware device" like a desktop computer, laptop, smartphone, or tablet. The key differences for portability purposes are the interface (mouse, touch screen, etc.), the performance (CPU or GPU power), screen orientations, and screen size.

## Why is portability needed for devices?

Due to varying performance qualities, screen sizes, screen orientations, etc. that differ from a desktop, content must be able to adapt to all of these devices. These devices do not only change the way a device is being used, but enhances the quality and appearance of the content as well.

## How does Fandom handle content portability?

Fandom Development staff and a volunteering group (also known as Vanguard) assist with content portability on Fandom. These users allow content to be portable on devices by manipulating code, creating portable infoboxes, working with the mobile main page, etc.

## See also

* Desktop
* Mercury
* Portability
Themes/DoraemonCharacter/theme.css

/\*

```
\*/
.portable-infobox {
 width: 323px;
 background: #fff;
 border: 2px solid #030391;
 border-radius: 5px;
 color: #000;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header,
.portable-infobox .pi-navigation,
.portable-infobox .pi-image-collection-tabs {
 background: -webkit-linear-gradient(#00f, #030391);
 background: -o-linear-gradient(#00f, #030391);
 background: -moz-linear-gradient(#00f, #030391);
 background: linear-gradient(#00f, #030391);
 color: #fff;
 text-align: center;
}
.portable-infobox .pi-item.pi-title {
 margin: 2px;
 padding: 2px;
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
 font-weight: bold;
}
.pi-image-collection-tab-content {
 background: #fff;
}
.portable-infobox .pi-image-collection-tabs {
 margin: 2px;
 padding: 0;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
}
.portable-infobox .pi-image-collection .pi-image-collection-tabs li {
 padding: 3px 9px;
 background: none;
 border: none;
}
.portable-infobox .pi-image {
 margin: 3px;
 background: #fff;
}
.pi-image-thumbnail {
 max-width: 98%;
 height: auto;
}
.pi-caption {
 color: #000;
 text-align: center;
}
.portable-infobox .pi-header {
 padding: 4px;
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
 font-size: 10.2pt;
}
.portable-infobox .pi-border-color {
 width: 99.5%;
 margin-left: 0.8px;
 border-color: #030391;
 border-width: 2px;
}
.portable-infobox .pi-data .pi-data-label {
 display: flex;
 align-items: center;
 padding: 3px;
 border-right: 2px solid #030391;
}
.portable-infobox .pi-data-value {
 padding-top: 3px;
 padding-left:3px;
}
.portable-infobox .pi-data.pi-item-spacing {
 padding: 0;
}
.portable-infobox .pi-horizontal-group .pi-border-color {
 border-width: 2px;
}
.portable-infobox .pi-horizontal-group .pi-data-label {
 padding: 2px;
 border-bottom: 2px #030391 solid;
 border-right-width: 0;
}
.portable-infobox .pi-horizontal-group .pi-data-label:last-child {
 border-right: none;
}
.portable-infobox .pi-horizontal-group .pi-data-value {
 padding: 2px;
 border-left-width: 2px;
}
.portable-infobox .pi-navigation {
 margin: 0 1px 2px;
 padding: 3px;
 border-bottom-left-radius: 6px;
 border-bottom-right-radius: 6px;
 font-size: 10.2pt;
}
/\*

```
\*/
Template

**Template** is a special term for Fandom wikis. It refers to a special type of page that is different from an article in that it is intended to be re-used inside other articles and is rarely intended to be viewed directly. The more complex the wiki content, you can usually expect it to have more complex templates.

Since templates can be widely re-used, they are a key focus of portability efforts. There is also a tremendous variety of types of templates, only some of which are described by official template types.

Some typical template types are portability friendly, like Portable Infoboxes, and some are less so. Some templates are so unfriendly that they are better hidden in some contexts. What makes a template portable is too broad a topic for this page.

## See also

* w:Help:Templates
* w:Help:Template Types
* Infoboxes
	+ Portable Infoboxes
Themes/Devils-Third/theme.css

/\*

```
\*/
.pi-theme-devilsthird {
 background:linear-gradient(#434C67, #444444);
 font-size: 87%;
 margin-left:10px;
 margin-bottom:10px;
 margin-right:1.5px;
 color:#FFFFFF;
 border-bottom: 1px solid #161922;
 float: right;
 }
.pi-theme-devilsthird a {
 color: #6be9fb;
 }
.pi-theme-devilsthird .pi-border-color {
 border-color: #161922;
 }
.pi-theme-devilsthird .pi-title {
 background:linear-gradient(#222735, #111111);
 color:#ffffff;
 text-shadow: 0 0 10px #FF0000;
 font-weight:bold;
 }
.pi-theme-devilsthird .pi-header {
 background:linear-gradient(#434C67, #161922);
 color:#ffffff;
 text-shadow: 0 0 10px #FF0000;
 font-weight:bold;
 }
.pi-theme-devilsthird {
 border-color: #161922;
 }
.pi-theme-devilsthird {
 color: #CCCCCC;
 }
/\*

```
\*//\*\*/
Themes/VivaPinataPlant2/theme.css

/\* Theming for the infoboxes \*/
/\* Theme for Plant infoboxes \*/
.portable-infobox.pi .pi-title { /\* Header/Title Color \*/

```
   background-color: #80bf41;
   color: #ffffff; /* Text Color of white */

```

}
.portable-infobox.pi .pi-secondary-background { /\* Header/Title Color \*/

```
   background-color: #80bf41;
   color: #ffffff; /* Text Color of white */

```

}
.portable-infobox.pi .pi-data { /\* Data Padding Removal \*/

```
   padding: 0px 0px;
   vertical-align: middle; /* Align the text vertically centered */

```

}
.portable-infobox.pi .pi-data .pi-data-label { /\* Data Label Color \*/

```
   background-color: #a7d37c;
   padding: 0px 0px;
   border: 10px solid #a7d37c; /* Add the border of the same color as the text background color */

```

}
.portable-infobox.pi .pi-data .pi-data-value { /\* Data Value Color \*/

```
   background: #F2EDE8;
   padding: 0px 0px;
   border: 10px solid #F2EDE8; /* Add the border of the same color as the text background color */

```

}
Lua

**Lua** is lightweight programming language implemented on Fandom with a version of the Scribunto extension. Lua code can be written or found in the `Module:` namespace, and can be used in templates with the `{{#invoke:...}}` parser function.

*Global modules* are stored on the Developers Wiki, and can be loaded elsewhere with ease.

## Lua templating vs Wikitext templating

Lua has considerable advantages over wikitext because it is a full programming language. This is unlike wikitext that relies on parser functions to give it some programming functions. Lua benefits include:

* Better performance for templates
* Separate re-usable modules
* Reduced complexity (in some cases)

Lua improves portability by allowing modules that wouldn't work otherwise due to limits placed in templates and pages.

## See also

* Help:Lua
* Lua in Templates

On the Fandom Developers Wiki
* List of Global Lua Modules
* Lua reference manual
	+ Scribunto libraries
	+ Standard libraries
* Lua templating
	+ Basics
	+ Converting Wikitext templates
	+ Debug console
	+ Getting started
	+ Glossary
	+ Tips and tricks
* Lua modules on dev

## External links

* Lua.org - official website
* Lua at Wikipedia
	+ Wikipedia:Lua about use of the language at Wikipedia
* Scribunto extension at MediaWiki.org

## References

1. ↑ wikipedia:Lua
2. ↑ Wikipedia:Template limits
Mario Manríquez Montaño

**Mario Ignacio Manríquez Montaño** *(n. 5 de noviembre de 1997, **Arica**, **Chile**)* También conocido como "Eme Eme" o "Marito"*,* Es un percusionista ariqueño que actualmente forma parte de la orquesta **"Anthony Makuin y su Clase Internacional**", también ha formado parte de orquestas de carácter tropical ariqueñas como "Sabrosura", "Efecto 13" y "90 Grados".
Styling horizontal groups

You probably know that you can get horizontal groups pretty easily:

```
<group layout="horizontal">
. . . data . . .
</group>

```

This styling is particularly useful when showing groups that are in conflict with each other, or even when just displaying some kind of previous/next data pattern.

What’s cool about this is that you can have different styling applied to each kind of group. Want your previous/next data to have a different font-size than the “normal” data? Totally possible!

The only catch is that you *might* have to use !important on the horizontal-group tagged stuff, depending on what else you’ve done in your coding. So keep that in mind, even though the snippet below **does not** include !important. Oh, and the snipped below also assumes we're styling a particular theme, this time called “whatever”.

```
/* Normal value/label styling */
.pi-theme-whatever .pi-data-value,
.pi-theme-whatever .pi-data-label { styling }

/* Horizontal group value/label styling */
.pi-theme-whatever .pi-horizontal-group-item.pi-data-value,
.pi-theme-whatever .pi-horizontal-group-item.pi-data-label { styling }

/* Normal group header styling */
.pi-theme-whatever .pi-header { styling }

/* Horizontal group header styling */
.pi-theme-whatever .pi-horizontal-group .pi-header { styling }
```

## See also

* Captions versus headers in portable infoboxes
* Flex-centering and portable infoboxes
* Getting the buttons you want on collapsible groups
* Styling lists within portable infoboxes
Curated Content

***Curated Content*** is custom Fandom wiki content organized based on settings in the Mobile Main Page tool (successor to the removed Curated Main Page tool).

Generally, only the mobile main page and Fandom mobile apps are affected by changes to curated content.

## Examples

See curated main page examples. It's not clear whether the Curated Main Page tool (Special:CuratedContent) or Mobile Main Page tool was used primarily for these examples.

## See also

* w:Help:Mobile Main Page
* w:Help:Mobile
* Mobile Main Page
Themes/Devils-Third

## Devils-Third

A theme based on an action-adventure hack and slash video game.

## Author's notes

> This is my favorite of the three infobox themes I did for Devil's Third Wiki. The other two are in a gold-like color and a burnt-sienna color scheme.
>
>
> — Hollowness

## Samples

Long Sample from the Devil's Third WikiShort Sample from the Devil's Third Wiki
Themes/Its A Conspiracy/theme.css

/\*

```
\*/
.portable-infobox a {
 color:#929E9D;
}

.portable-infobox {
 background:#fff;
 color:#000;
 border-bottom: 20px solid #929E9D;
}

.portable-infobox .pi-title {
 background-color:#929E9D;
}

.portable-infobox .pi-header {
 background-image:none;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#000;
 text-align: center;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header {
 background-color: #C5C5C5;
}

.portable-infobox .pi-item-spacing {
 padding:0;

}

.portable-infobox .pi-data-label {
 background-color:#E5E5E5;
}

.portable-infobox .pi-navigation {
 background-color: #fff;
}

.portable-infobox .pi-image,
.portable-infobox .pi-navigation,
.portable-infobox .pi-data {
 border-right: 1px solid #AAAAAA;
 border-left: 1px solid #AAAAAA;
 border-bottom: 1px solid #AAAAAA;
}

.portable-infobox .pi-data:last-of-type {
 border-bottom:none;

}

.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}

/\*

```
\*/
What does portable mean?

Content is "**portable**" if you can read it easily on any device (it has portability), whether it's a large desktop screen or a tiny phone screen in the palm of your hand. Text should be comfortable to read, images should not be bigger than your screen, and all visible parts of the page should be fully functional, and in the right place.

Trying to read a page that was perfected for a large desktop screen on your phone can be very frustrating. If content was not designed with that type of use in mind, your smartphone screen will be bad at interpreting and displaying the page in a readable format. It is simply the wrong tool for the job - and with smartphones becoming more and more users' screen of choice, content needs to learn how to work with all devices.

## What makes a page portable?

Portable pages are built in a way that allows any device to distinguish between what is styling and formatting information, and what is actual content. That way, the device can ignore the styling and formatting info it can't interpret, and display the content in a way that fits its screen. For example, lines of text will only be as wide as your screen, and not flow outside of it.

Images and other elements can move below or above text if there's not enough space next to the text, and a wide navigation bar at the top of a page can turn into a dropdown menu instead. To achieve this, editors need to avoid inline-styling, forced widths for images and other page elements, forced line breaks, and similar non-content information that specifies exactly how a page should look like - because that information may just be ignored or misinterpreted by mobile devices.

## Want to make your content portable?

There are a number of changes you can make to your wiki's content to make it easier to read for your visitors.

* Main article: Check if your content has portability issues
* Main article: How to fix portability issues
Themes/JustRed/theme.css

/\*

```
 \*/
.pi-theme-JustRed {
 border: 5px solid black !important;
 background-color: darkred !important;
 color: white !important;
}

.pi-theme-JustRed .pi-title {
 font-weight: bold !important;
 border-bottom: 5px solid black !important;
 font-size: 175% !important;
}

.pi-theme-JustRed .pi-header {
 font-weight: bold !important;
 background: darkred !important;
 border-bottom: 5px solid black !important;
 font-size: 100% !important;
 padding-left: 25px !important;
}

.pi-theme-JustRed a {
 color: yellow !important;
}

.pi-theme-JustRed .pi-item:not(:last-child) {
 border-bottom: 5px solid black !important;
}

.pi-theme-JustRed .pi-image img {
 border-bottom: 5px solid black !important;
}

.pi-theme-JustRed .pi-caption {
 color: white !important;
 border-bottom: 0px solid black !important;
 font-style: normal !important;

.pi-theme-JustRed .pi-item:last-child {
 border-bottom: none !important;
}

.pi-theme-JustRed .pi-group {
 border-bottom: none !important;
}
/\*

```
 \*//\*Category:Stylesheets/\*/\*\*/
Themes/Mercury/theme1.css

/\*

```
\*/
.portable-infobox {
 background-color:#e7eaef;
 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 letter-spacing:0.2px;
}

.portable-infobox a {
 color:#1A5EB8;
}

.portable-infobox .pi-title {
 text-align:left;
 font-weight:bold;
 background: -webkit-linear-gradient(top,transparent 70%,rgba(0,0,0,1) 100%);
 background: linear-gradient(to bottom,transparent 70%,rgba(0,0,0,1) 100%);
 margin: -40px 0 0 0;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#fff;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header {
 background-color: #1A5EB8;
}

.portable-infobox .pi-data-label {
 font-weight:bold;
 color:#092344;
}

.portable-infobox .pi-data-value {
 color:#39424D;
}

.portable-infobox .pi-data:not(:last-of-type),
.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Portability Hub

Welcome to Fandom's
Content Portability Hub
Did you know that more than half of FANDOM's users visit our pages via a mobile device? That's why it's so important that all of our content is portable, meaning it can adapt to any screen. This site is your central hub for information on how to make your wiki portable, updated by both FANDOM staff and community members. Want to make your infoboxes mobile-friendly? Make sure your main page looks great on smartphones? Wondering what "portable" even means? You'll find answers here - and you can even request help for your wiki.

Portability Pioneers

Videos

General Introduction

Future Directions

New Tools

Moving to Portable Infoboxes

Customization

Questions and Answers

Infoboxes: Past, Present, and Future

Quick Links
**Portability**

* *Topic overview:* Intro to portability
* How to check for "unportable" content
* Make your wiki portable using a Portability Checklist
* Having a unique look: Themes and styling
* Have something to say? Discuss Bugs and Feedback
* Need help making your wiki portable? **Request help!**
* Glossary of terms used on this wiki

**Infoboxes**

* Making infoboxes portable
* Styling your infoboxes
* Benefits of portable infoboxes
* Best practices
* Frequently asked questions (FAQ)
* Tips and tricks

**Other Portable Features**

* Mobile main pages
* Template types

**Case Studies**

* Wookieepedia
* Steven Universe Wiki
Portability

**Portability** is an aspect of functionality that centers around how "portable" something is.

## What is portability?

In terms of wikis, something is portable if it works well when switching between desktop browser and mobile browser or app contexts. Currently, portability is focused around presentation of templates, especially infobox templates (via Portable Infoboxes), but will expand as more functionality is added to the Fandom arsenal.

## What portability tools are available?

* Portable Infoboxes
* VisualEditor for inserting simple portable infoboxes.

### Tools enabled by request

* Infobox Builder, a Lua-based parser function, for generating portable infoboxes quickly.
	+ Not all wikis have Lua enabled. Most newer wikis do not.

## See also

* Glossary of terms used to discuss portability
* Intro to Portability
* Portability/Features
* Why should your content be portable?
* Portability Checklist

## References

1. ↑ Porting. https://en.wikipedia.org/wiki/Porting. Retrieved: 2016/04.
Curated Main Pages

The curated main page of Wookieepedia.

If you are a admin of your community, then it is especially important for you to know that approximately **half** of the visits across Fandom are coming from mobile devices. Some of these visitors start at your main page and you want to make sure they can find the most interesting content quickly. The **Curated Main Page** feature makes it easy for admins to choose what content is displayed on main pages, both in mobile browsers.

## Curating content on your main page

You can access the curation tool by choosing the "Edit mobile main page" button, which is visible to admins on both the desktop and mobile main pages. The tool allows you to set up links to pages and categories, and to set images for some links. If your wiki's categories are structured well, setting up the curated main page content will take 10–15 minutes.

### Featured content

Links added here can be to any piece of content on your wiki articles, blog posts, videos, etc. These items will appear in a slider-style layout that can cycle from one linked image to another.

For each item, you can set the displayed text, the linked page, and an image. Images can be existing images from the wiki, or you can upload a new one. Use the image cropping guide after adding an image.

### Featured categories

Links added here must be to category pages. You must group the linked categories into sections. Create a section first, with its own name and representative image. Then add categories to the section, and be sure to include **"Category:"** when entering the page name, to get auto-suggestions and to save the full name of the category. For categories, an image will be selected automatically, but it can be changed.

Readers will be able to access all articles in a category, once you set up the category as an item on the mobile main page. So be sure to choose the most interesting categories to feature here! Think about the things that most users will be looking for on your community.

### Optional categories

This optional section is for category links that may not be appropriate to group into sections using Featured Categories. The links are set up in the same way.

Images are cropped to a 1x1 (perfect square) ratio.

### Save

Once you are done adding, naming, customizing and organizing your content, scroll back up to the top and hit the "Publish" option in the upper right.

### Trending and Videos sections

These sections are automatically populated based on recent page views on your community, and video views on your community or across Fandom.

## Checking work

After performing and saving updates to the mobile front page, you can check the mobile front page on a computer by adding **?useskin=fandommobile** to the end of the front page URL. Note that the display is meant for smaller devices, so it will look large.

## See also

* w:Help:Main page - Information about setting up the main page seen by desktop users
* w:Help:Mobile
* w:Help:Category
Themes/PvZ/theme.css

```
.portable-infobox {
 width: 255px !important;
 background: #fff;
 border: 2px solid #fff !important;
}

.portable-infobox .pi-title {
 font-size: 15px;
 background-color: #21ca27;
 margin: 4px 2px !important;
 font-weight: 900 !important;
 text-align: center;
 color: #fff;
}

.pi-image {
 border: #21ca27 solid 1px;
 margin: 2px;
 line-height: 130%;
}

img.pi-image-thumbnail {
 max-width: 100%;
}

.portable-infobox .pi-secondary-background{
 background-color: #210b61;
}

.portable-infobox .pi-header {
 padding: 2px 0;
 margin: 0 2px 2px 2px;
 font-weight: bold;
 text-align: center;
 background-color: #21ca27;
 color: #fff;
}

.portable-infobox .pi-item-spacing {
 padding: 0 2px;
}

.pi-border-color {
 border-color: transparent;
}

.pi-data .pi-data-label {
 font-weight: bold;
 text-align: right;
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 /\*flex-basis: auto;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;\*/
 line-height: 140%;
 background-color: #21ca27;
 color: #fff;
 width: 40%;
 padding-right: 10px !important;
}

.pi-data .pi-data-value {
 text-align: left;
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 flex-basis: auto;
 line-height: 140%;
 background: #fff;
 width: 60%;
}

.pi-data-value: last-child {
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 flex-basis: auto;
 width: 100% !important;
 text-align: left;
}

div.pi-data-value.pi-font img {
 display: inline !important;
}

.portable-infobox .pi-data-label div {
background-color: #21CA27 !important;
color: White !important;
}

```
Original

This page is the location you can place your character's Original Devil Fruit as long as the Devil Fruit has been approved by an Administrator. Once approved, an Administrator will place your fruit's description here and a possible picture if one comes with one.

## Paramecia-type

### Geiru Geiru no Mi

* A Paramecia-type fruit that allows the user to create and control storms. This Devil Fruit is controlled by the user's emotions and depending on how passionate the feeling is, the more violent or calm the storm shall be. The user can also create a tornado(s), squalls, and even disperse clouds at will when using this Devil Fruit's ability. They suffer from the same weaknesses as a Devil Fruit user and if the user is Apathetic they cannot use this fruit to its full extent and power.

## Logia-type

### Mizu Mizu no Mi

* A Logia-type fruit that allows the user to create, manipulate, and become water. This Devil Fruit is extremely dangerous to the user as it has a high chance of poisoning it's own user due to the properties of Devil Fruits. While this does give the user many advantages, there are far more drawbacks with greater effects than the benefits. The user can pull water out of the air and create infinite amounts of it but the user will still suffer from the normal Devil Fruit weakness of water which prohibits them from entering a Logia state for long periods of time. Once thought the strongest fruit in the world, proven the most dangerous and poisonous instead. This fruit was eaten by Cross Bizen.
Themes/Rush/theme2.css

/\*

```
\*/
/\* Slight variation for userpage infoboxes \*/
.portable-infobox a {
 color:#f26100;
}

.portable-infobox {
 background:#262626;
 color:#D4D5D5;
 border-bottom: 20px solid #780000;
 border-radius: 7px 7px 7px 7px;
 -webkit-box-shadow:0 0 10px 0 rgb(0,0,0);
 -moz-box-shadow:0 0 10px 0 rgb(0,0,0);
 box-shadow:0 0 10px 0 rgb(0,0,0);
}

.portable-infobox .pi-title {
 background-color: #780000;
 border-radius: 7px 7px 0 0;
}

.portable-infobox .pi-header {
 background-image:none;
 background-color: #780000;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#F5F5DC;
 text-align: center;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header,
.portable-infobox .pi-title {
 background-color: #780000;
}

.portable-infobox .pi-data:not(:last-of-type),
.portable-infobox .pi-group {
 border-color:#808080;
}

.portable-infobox .pi-navigation {
 background-color: #262626;
}

.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/
Themes/My-Singing-Monsters/theme.css

/\*

```
\*/
.pi-theme-mysingingmonsters {
 background:#1c1c1c;
 font-size: 87%;
 color:#FFFFFF;
 border-radius: 0 0 10px 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 margin-left:10px;
 margin-bottom:10px;
 }
.pi-theme-mysingingmonsters a {
 color: #fca400;
 }
.pi-theme-mysingingmonsters .pi-secondary-background {
 background:#1c1c1c;
 }
.pi-theme-mysingingmonsters .pi-title {
 background:linear-gradient(#91683c, #6d4e2d);
 text-shadow: 0 0 10px #1c1c1c;
 font-weight: bold;
 text-align: center;
 }
.pi-theme-mysingingmonsters .pi-header {
 background:linear-gradient(#91683c, #6d4e2d);
 }
.pi-theme-mysingingmonsters .pi-horizontal-group .pi-horizontal-group-item {
 vertical-align: middle;
 }
.pi-theme-mysingingmonsters .pi-border-color {
 border-color: #91683c;
 }
.pi-theme-mysingingmonsters .pi-image-thumbnail {
 max-width:200px;
 height:auto;
 }
/\*

```
\*//\*Category:Stylesheets/\*/\*\*/
Themes/PvZH Plants/theme.css

```
.portable-infobox {
 width: 255px !important;
 background: #fff;
 border: 2px solid #fff !important;
}
.portable-infobox .pi-title {
 font-size: 15px;
 background-color: #028900;
 margin: 4px 2px !important;
 font-weight: 900 !important;
 text-align: center;
 color: #fff;
}
.pi-image {
 border: #00d27f solid 1px;
 margin: 2px;
 line-height: 130%;
}
img.pi-image-thumbnail {
 max-width: 100%;
}
.portable-infobox .pi-secondary-background{
 background-color: #00d27f;
}
.portable-infobox .pi-header {
 padding: 2px 0;
 margin: 0 2px 2px 2px;
 font-weight: bold;
 text-align: center;
 background-color: #adff00;
 color: #fff;
}
.portable-infobox .pi-item-spacing {
 padding: 0 2px;
}
.pi-border-color {
 border-color: transparent;
}
.pi-data .pi-data-label {
 font-weight: bold;
 text-align: right;
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 /\*flex-basis: auto;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;\*/
 line-height: 140%;
 background-color: #00ff83;
 color: #fff;
 width: 40%;
 padding-right: 10px !important;
}
.pi-data .pi-data-value {
 text-align: left;
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 flex-basis: auto;
 line-height: 140%;
 background: #fff;
 width: 60%;
}
.pi-data-value: last-child {
 -ms-flex-preferred-size: auto;
 -webkit-flex-basis: auto;
 -moz-flex-basis: auto;
 flex-basis: auto;
 width: 100% !important;
 text-align: left;
}
div.pi-data-value.pi-font img {
 display: inline !important;
}
.portable-infobox .pi-data-label div {
background-color: #21CA27 !important;
color: White !important;
}

```
Ereijan (World)

Ereijan is a world created by Perramos, and is currently the main world. It contains the Nether, End, and Overworld. The spawn is a small "castle", where each person chooses their leaders.

## Creation

Ereijan was created by Perramos after final battle in Atrius during which the was defeated and his monarchy ended. Currently, Perramos rules in this world, though for a brief time Hedenlator escaped the Nether and challenged his rule, while ScarabCoder caused mayhem using Hellbane.

## Landscape (Pre-Fires)

After leaving spawn via a waterfall, you will probably see two areas of structure. The first is on a mountain, covered with snow a few trees. There is a small house, with dark doors and no windows. A long time ago, this was ScarabCoder's habitation. However, it has long since been abandoned, and is said to contain many treasures of value.

The other habitation is a small village, consisting of a few houses. One of them is Kered's, a follower of Perramos. Another building is Kered's storage, with the door usually blocked up. The biggest house there belongs to HorseLunger, a one time follower of Perramos, but is now a Nomad. She owns a large farm near her house, and has an abundance of food. She also owns many chickens, cows, sheep, and horses.

If you go behind HorseLunger's house, you will find Gideon's island habitation. A single house, mostly built into the rock, with the only way to get to it being a broken bridge. Many events have taken place there or around there.

And if you choose to go to neither the abandoned house on the mountain or the small village, you can go the opposite direction, where you will see a large ocean. There is a dock there, and many random boats.

If you go straight forward past the dock into the ocean on a boat and go slightly right, you will reach Starboy's house. His house is on an island, and he lives by himself.

## Landscape (Post-Fires)

After The Fires, the entire landscape became a desert, all underground structures were destroyed, as well as most surface buildings. Every water source was dried up, and infinite sources were no longer possible due to extreme amounts of Fire Essence. The spawn fell to the ground and broke, and every building that remained was severely damaged. Upon resurfacing after 6 months of who-knows-what, Kered, ScarabCoder, and other residents were able to salvage what was left. Thanks to a warning from Perramos, Kered and Starboy were able to retreat underground with everything needed to reconstruct the ecosystem, and before too long, had made surviving a simple task yet again.
Themes/Mercury/theme2.css

/\*

```
\*/
.portable-infobox {
 background-color:#e7eaef;
 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 letter-spacing:0.2px;
}

.portable-infobox a {
 color:#1A5EB8;
}

.portable-infobox .pi-title {
 background-color:#1A5EB8;
 text-align:left;
 font-weight:bold;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
 color:#fff;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header {
 background-color: #1A5EB8;
}

.portable-infobox .pi-data-label {
 font-weight:bold;
 color:#092344;
}

.portable-infobox .pi-data-value {
 color:#39424D;
}

.portable-infobox .pi-data:not(:last-of-type),
.portable-infobox .pi-group,
.portable-infobox .pi-data:last-of-type + .pi-group,
.portable-infobox .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
 border:none;
}
/\*

```
\*/