(added content) Tag: Visual edit |
mNo edit summary |
||
(32 intermediate revisions by 17 users not shown) | |||
Line 1: | Line 1: | ||
+ | '''The FandomDesktop conversion guide''' is intended as a quick reference for converting older wikis from Oasis and Hydra skins to the current FandomDesktop skin. |
||
− | <br /> |
||
+ | :'''''Note:''' Admin Dashboard was enabled for Gamepedia wikis on FandomDesktop and can be accessed at Special:AdminDashboard.'' |
||
− | = '''New custom CSS / JS files''' = |
||
− | '''MediaWiki:FandomDesktop.css''' and '''MediaWiki:FandomDesktop.js''' |
||
− | = '''Features that will change for both GP and Fandom wikis''' = |
||
+ | == '''New [[Help:Community CSS and JS|custom CSS / JS files]]''' == |
||
− | == '''Tabber''' == |
||
+ | *'''MediaWiki:Fandomdesktop.css''' |
||
− | .tabber class for the tabber container will remain. All other class names are removed and replaced with Fandom Design System classes: wds-tabs__tab for tabs and wds-tabs__contentfor tabs content. |
||
+ | *'''MediaWiki:Fandomdesktop.js''' |
||
+ | Neither '''MediaWiki:Wikia.css''' nor '''MediaWiki:Wikia.js''' will load on FandomDesktop. All custom coding needs to be moved to these new style sheets. |
||
− | == '''Base layout''' == |
||
− | + | == '''Feature changes''' == |
|
− | ** the whole page container (with navigation) #pageWrapper can be now accessed by .resizable-container class, but navigation is now on the top of the page |
||
− | ** there is now the main page wrapper with .page class which contains the content container and the right rail (if right rail is present, this element also contains .has-right-rail class) |
||
− | ** there is now the main content container with .page__main class which contains page header, content, and the page footer |
||
− | ** article content #content or .mw-body can be now accessed by #content id or .page-content class |
||
− | ** page header can be accessed by .page-header class |
||
− | ** page footer can be accessed by .page-footer class |
||
− | ** right rail can be accessed by #WikiaRailWrapper id or .WikiaRail class |
||
− | * '''Migrating from Fandom wiki''' |
||
− | ** the whole page container (with navigation) .WikiaPage can be now accessed by .resizable-container class |
||
− | ** main page wrapper (with right rail) .WikiaPageContentWrapper can be now accessed by .page class (if right rail is present, this element also contains .has-right-rail class). It contains the content container and the right rail |
||
− | ** main content container #WikiaMainContentContainer or .WikiaMainContentContainer can be now accessed by .page__main class. It contains page header, content, and the page footer |
||
− | ** article content #content or .WikiaArticle can be now accessed by #content id or .page-content class |
||
− | ** page header (accessed by #PageHeader or .page-header ) can be now accessed by .page-header class |
||
− | ** page footer can be accessed by .page-footer class |
||
− | ** right rail (accessed by #WikiaRailWrapper or .WikiaRail ) can now be accessed .right-rail-wrapper class |
||
− | == ''' |
+ | === '''[[Help:Tabber|Tabber]]''' === |
+ | '''.tabber''' class for the tabber container will remain. |
||
+ | All other class names are removed and replaced with Fandom Design System classes: '''wds-tabs__tab''' for tabs and '''wds-tabs__content''' for tabs content. |
||
− | === '''Visual changes''' === |
||
+ | |||
+ | === '''Base layout''' === |
||
+ | |||
+ | ====Migrating from GP wiki==== |
||
+ | ** the whole page container (with navigation) '''#pageWrapper''' can be now accessed by '''.resizable-container''' class, but navigation is now on the top of the page |
||
+ | ** there is now the main page wrapper with '''.page''' class which contains the content container and the right rail (if right rail is present, this element also contains '''.has-right-rail''' class) |
||
+ | ** there is now the main content container with '''.page__main''' class which contains page header, content, and the page footer |
||
+ | ** article content #content or '''.mw-body''' can be now accessed by '''#content''' id or '''.page-content''' class |
||
+ | ** page header can be accessed by '''.page-header''' class |
||
+ | ** page footer can be accessed by '''.page-footer''' class |
||
+ | ** right rail can be accessed by '''#WikiaRailWrapper''' id or '''.WikiaRail''' class |
||
+ | ====Migrating from Fandom wiki==== |
||
+ | ** the whole page container (with navigation) '''.WikiaPage''' can be now accessed by '''.resizable-container''' class |
||
+ | ** main page wrapper (with right rail) '''.WikiaPageContentWrapper''' can be now accessed by '''.page class''' (if right rail is present, this element also contains '''.has-right-rail class'''). It contains the content container and the right rail |
||
+ | ** main content container '''#WikiaMainContentContainer''' or '''.WikiaMainContentContainer''' can be now accessed by '''.page__main''' class. It contains page header, content, and the page footer |
||
+ | ** article content '''#content''' or '''.WikiaArticle''' can be now accessed by '''#content''' id or '''.page-content''' class |
||
+ | ** page header (accessed by '''#PageHeader''' or .page-header ) can be now accessed by .page-header class |
||
+ | ** page footer can be accessed by '''.page-footer''' class |
||
+ | ** right rail (accessed by '''#WikiaRailWrapper''' or '''.WikiaRail''' ) can now be accessed '''.right-rail-wrapper''' class |
||
+ | |||
+ | === '''[[Help:Infoboxes|Portable infobox]]''' === |
||
+ | |||
+ | ==== '''Visual changes''' ==== |
||
* border around infobox container is added by default |
* border around infobox container is added by default |
||
− | + | Default background for titles ('''.pi-title''') and headers ('''.pi-header''') is set to '''accent color''' ('''--theme-accent-color''') and font color is calculated dynamically and set to '''--theme-accent-label-color'''. For some customizations this may cause the label to be illegible. |
|
'''Recommended solution:''' |
'''Recommended solution:''' |
||
+ | <syntaxhighlight lang="css"> |
||
.portable-infobox { |
.portable-infobox { |
||
+ | --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR; |
||
− | |||
− | --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR; |
||
− | |||
} |
} |
||
+ | </syntaxhighlight> |
||
− | === '''Changed markup for tabs''' === |
+ | ==== '''Changed markup for tabs''' ==== |
− | * HTML markup for |
+ | * HTML markup for panel and image collection tabs has changed completely, which means that no customizations for the tabs is supported. |
'''Old markup for image-colection (simplified):''' |
'''Old markup for image-colection (simplified):''' |
||
+ | <syntaxhighlight lang="xml"> |
||
+ | <div class="pi-image-collection"> |
||
+ | <ul class="pi-image-collection-tabs"> |
||
+ | <li class="pi-tab-link pi-item-spacing current"> |
||
+ | <span class="pi-tab-label"> |
||
+ | CAPTION |
||
+ | </span> |
||
+ | </li> |
||
+ | </ul> |
||
− | + | <div class="pi-image-collection-tab-content current"> |
|
+ | <figure class="pi-item pi-image"> |
||
− | |||
− | + | <a class="image image-thumbnail"> |
|
+ | IMAGE OR VIDEO |
||
− | |||
+ | </a> |
||
− | <nowiki><li class="pi-tab-link pi-item-spacing current"></nowiki> |
||
+ | </figure> |
||
− | |||
+ | </div> |
||
− | <nowiki><span class="pi-tab-label"></nowiki> |
||
+ | </div> |
||
− | |||
+ | </syntaxhighlight> |
||
− | CAPTION |
||
− | |||
− | <nowiki></span></nowiki> |
||
− | |||
− | <nowiki></li></nowiki> |
||
− | |||
− | <nowiki></ul></nowiki> |
||
− | |||
− | |||
− | |||
− | <nowiki><div class="pi-image-collection-tab-content current"></nowiki> |
||
− | |||
− | <figure class="pi-item pi-image"> |
||
− | |||
− | <a class="image image-thumbnail"> |
||
− | |||
− | IMAGE OR VIDEO |
||
− | |||
− | </a> |
||
− | |||
− | </figure> |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki></div></nowiki> |
||
'''New markup for image-collection (simplified):''' |
'''New markup for image-collection (simplified):''' |
||
+ | <syntaxhighlight lang="xml"> |
||
− | |||
− | + | <div class="pi-image-collection wds-tabber"> |
|
+ | <div class="wds-tabs__wrapper"> |
||
− | |||
− | + | <ul class="wds-tabs"> |
|
+ | <li class="wds-tabs__tab wds-is-current"> |
||
− | |||
− | + | <span class="wds-tabs__tab-label"> |
|
+ | CAPTION |
||
− | |||
+ | </span> |
||
− | <nowiki><li class="wds-tabs__tab wds-is-current"></nowiki> |
||
+ | </li> |
||
− | |||
+ | </ul> |
||
− | <nowiki><span class="wds-tabs__tab-label"></nowiki> |
||
+ | </div> |
||
− | |||
+ | <div class="wds-tab__content wds-is-current"> |
||
− | CAPTION |
||
+ | <figure class="pi-item pi-image"> |
||
− | |||
+ | <a class="image image-thumbnail"> |
||
− | <nowiki></span></nowiki> |
||
+ | IMAGE OR VIDEO |
||
− | |||
+ | </a> |
||
− | <nowiki></li></nowiki> |
||
+ | </figure> |
||
− | |||
+ | </div> |
||
− | <nowiki></ul></nowiki> |
||
+ | </div> |
||
− | |||
+ | </syntaxhighlight> |
||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki><div class="wds-tab__content wds-is-current"></nowiki> |
||
− | |||
− | <figure class="pi-item pi-image"> |
||
− | |||
− | <a class="image image-thumbnail"> |
||
− | |||
− | IMAGE OR VIDEO |
||
− | |||
− | </a> |
||
− | |||
− | </figure> |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki></div></nowiki> |
||
'''Old markup for panels (simplified):''' |
'''Old markup for panels (simplified):''' |
||
+ | <syntaxhighlight lang="xml"> |
||
− | |||
− | + | <section class="pi-item pi-panel pi-border-color"> |
|
+ | HEADER |
||
− | |||
+ | <div class="pi-panel-scroll-wrapper"> |
||
− | HEADER |
||
+ | <ul class="pi-section-navigation"> |
||
− | |||
− | + | <li class="pi-section-tab pi-section-active"> |
|
+ | <div class="pi-section-label"> |
||
− | |||
+ | LABEL |
||
− | <nowiki><ul class="pi-section-navigation"></nowiki> |
||
+ | </div> |
||
− | |||
+ | </li> |
||
− | <nowiki><li class="pi-section-tab pi-section-active"></nowiki> |
||
+ | </ul> |
||
− | |||
+ | </div> |
||
− | <nowiki><div class="pi-section-label"></nowiki> |
||
+ | <div class="pi-section-contents"> |
||
− | |||
+ | <div class="pi-section-content pi-section-active"> |
||
− | LABEL |
||
+ | CONTENT |
||
− | |||
− | + | </div> |
|
+ | </div> |
||
− | |||
+ | </section> |
||
− | <nowiki></li></nowiki> |
||
+ | </syntaxhighlight> |
||
− | |||
− | <nowiki></ul></nowiki> |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki><div class="pi-section-contents"></nowiki> |
||
− | |||
− | <nowiki><div class="pi-section-content pi-section-active"></nowiki> |
||
− | |||
− | CONTENT |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki></section></nowiki> |
||
'''New markup for panels (simplified):''' |
'''New markup for panels (simplified):''' |
||
+ | <syntaxhighlight lang="xml"> |
||
+ | <section class="pi-item pi-panel pi-border-color wds-tabber"> |
||
+ | HEADER |
||
+ | <div class="wds-tabs__wrapper"> |
||
+ | <ul class="wds-tabs"> |
||
+ | <li class="wds-tabs__tab wds-is-current"> |
||
+ | <div class="wds-tabs__tab-label"> |
||
+ | LABEL |
||
+ | </div> |
||
+ | </li> |
||
+ | </ul> |
||
+ | </div> |
||
+ | <div class="wds-tab__content wds-is-current"> |
||
+ | CONTENT |
||
+ | </div> |
||
+ | </section> |
||
+ | </syntaxhighlight> |
||
+ | ==== '''CSS variables available for Portable Infobox customization''' ==== |
||
− | <nowiki><section class="pi-item pi-panel pi-border-color wds-tabber"></nowiki> |
||
+ | <syntaxhighlight lang="css"> |
||
+ | .portable-infobox { |
||
+ | --pi-background: /* MAIN BACKGROUND COLOR */ |
||
+ | --pi-secondary-background: /* TITLE AND HEADERS BACKGROUND COLOR */ |
||
+ | --pi-secondary-background--label: /* TITLE AND HEADERS FONT COLOR */ |
||
+ | --pi-border-color: /* BORDER COLOR */ |
||
+ | } |
||
+ | </syntaxhighlight> |
||
+ | '''Example:''' |
||
− | HEADER |
||
+ | <syntaxhighlight lang="css"> |
||
− | |||
− | <nowiki><div class="wds-tabs__wrapper"></nowiki> |
||
− | |||
− | <nowiki><ul class="wds-tabs"></nowiki> |
||
− | |||
− | <nowiki><li class="wds-tabs__tab wds-is-current"></nowiki> |
||
− | |||
− | <nowiki><div class="wds-tabs__tab-label"></nowiki> |
||
− | |||
− | LABEL |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki></li></nowiki> |
||
− | |||
− | <nowiki></ul></nowiki> |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki><div class="wds-tab__content wds-is-current"></nowiki> |
||
− | |||
− | CONTENT |
||
− | |||
− | <nowiki></div></nowiki> |
||
− | |||
− | <nowiki></section></nowiki> |
||
− | |||
− | === '''CSS variables available for Portable Infobox customization''' === |
||
.portable-infobox { |
.portable-infobox { |
||
+ | --pi-background: rgba(var(--theme-sticky-nav-dynamic-color-1--rgb), 0.05); |
||
− | |||
− | + | --pi-secondary-background: var(--theme-sticky-nav-background-color); |
|
+ | --pi-secondary-background--label: var(--theme-sticky-nav-text-color); |
||
− | |||
+ | --pi-border-color: var(--theme-border-color); |
||
− | --pi-secondary-background: /* TITLE AND HEADERS BACKGROUND COLOR */ |
||
− | |||
− | --pi-secondary-background--label: /* TITLE AND HEADERS FONT COLOR */ |
||
− | |||
− | --pi-border-color: /* BORDER COLOR */ |
||
− | |||
} |
} |
||
+ | </syntaxhighlight> |
||
− | == '''Community background image''' == |
+ | === '''Community background image''' === |
− | + | [[User blog:MisterWoodhouse/A Deeper Look at Theme Designer on FandomDesktop|The theme designer]] provides some extended possibilities for customizing the appearance of the community background image. However, if you’re willing to port your existing CSS/JS customizations of the background there’s a new class name: '''.fandom-community-header__background'''. |
|
− | |||
− | = '''Features that will change in comparison to Oasis''' = |
||
− | == ''' |
+ | == '''Features that changed in comparison to Oasis''' == |
− | Galleries on FandomDesktop will be based on the Mediawiki native gallery solution. |
||
+ | === '''Galleries''' === |
||
− | See <nowiki>https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax</nowiki>. |
||
+ | Galleries on FandomDesktop are based on the [https://www.mediawiki.org/wiki/Help:Images#Gallery_syntax MediaWiki native gallery solution]. |
||
There are two major changes in gallery syntax: |
There are two major changes in gallery syntax: |
||
− | * To determine gallery style |
+ | * To determine gallery style you'll need to use mode instead of type property. In order to ensure backward compatibility with all the galleries created on Oasis, type property is still supported. However, it is encouraged to create new galleries using the new '''mode''' property. |
− | * Support for certain gallery properties |
+ | * Support for certain gallery properties has been discontinued. See below for full list: |
− | === '''<nowiki><gallery> element attributes</nowiki>''' === |
+ | ==== '''<nowiki><gallery> element attributes</nowiki>''' ==== |
{| class="article-table" |
{| class="article-table" |
||
| colspan="3" |'''Traditional''' |
| colspan="3" |'''Traditional''' |
||
Line 224: | Line 178: | ||
|type |
|type |
||
|Temporarily supported |
|Temporarily supported |
||
− | |Should be replaced with the equivalent |
+ | |Should be replaced with the equivalent "mode" attribute. |
|- |
|- |
||
|widths |
|widths |
||
Line 232: | Line 186: | ||
|columns |
|columns |
||
|Not supported |
|Not supported |
||
− | |Can be replaced with equivalent |
+ | |Can be replaced with equivalent "perrow" attribute. |
|- |
|- |
||
|perrow |
|perrow |
||
Line 252: | Line 206: | ||
|captionposition |
|captionposition |
||
|Not supported |
|Not supported |
||
− | |captionposition=" |
+ | |captionposition="within" could be replaced with similar-looking mode="packed-overlay" |
|- |
|- |
||
|captionalign |
|captionalign |
||
Line 304: | Line 258: | ||
Additional notes: |
Additional notes: |
||
− | * Fandom gallery images are |
+ | * Fandom gallery images are "frameless" by default, whereas MW gallery images are displayed in a thick frame. In order to preserve the same looks of a gallery, it has to be either handled by custom styling or '''mode="nolines"''' has to be added to all galleries as part of the migration. |
− | = '''Features that |
+ | == '''Features that changed in comparison to Hydra/HydraDark''' == |
− | == '''Galleries''' == |
+ | === '''[[Help:Galleries, Slideshows, and Sliders|Galleries]]''' === |
− | === '''New gallery mode - slider''' === |
+ | ==== '''New gallery mode - slider''' ==== |
Gamepedia communities will now have a new slider gallery mode available. |
Gamepedia communities will now have a new slider gallery mode available. |
||
Usage: |
Usage: |
||
− | < |
+ | <syntaxhighlight lang="xml"><gallery mode="slider"> |
− | |||
Image.jpg |
Image.jpg |
||
− | |||
Image2.jpg |
Image2.jpg |
||
− | |||
... |
... |
||
+ | </gallery> |
||
− | |||
+ | </syntaxhighlight> |
||
− | <nowiki></gallery></nowiki> |
||
Slider gallery accepts one additional attribute named orientation, which accepts values bottom (default) or right and determines the position of the slider navigation. |
Slider gallery accepts one additional attribute named orientation, which accepts values bottom (default) or right and determines the position of the slider navigation. |
||
− | = '''Theming variables''' = |
+ | == '''Theming variables''' == |
− | In the FandomDesktop skin, users |
+ | In the FandomDesktop skin, users have access to new variables representing theme colors. These variables will be accessible in CSS. |
− | Example hex value: #ffffff |
+ | Example hex value: <code>#ffffff</code> |
Example Red, Green, Blue color values: 0,0,0 |
Example Red, Green, Blue color values: 0,0,0 |
||
Line 337: | Line 288: | ||
|'''Description''' |
|'''Description''' |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-color</code> |
|Accent color taken from ThemeDesigner, presented as hex value |
|Accent color taken from ThemeDesigner, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-color--hover</code> |
|Accent color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
|Accent color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-color--rgb</code> |
|Accent color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
|Accent color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-dynamic-color-1</code> |
|dynamic-1 color for accent. See Dynamic Colors section for more info. |
|dynamic-1 color for accent. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-dynamic-color-1--rgb</code> |
|dynamic-1 color rgb components for accent. See Dynamic Colors section for more info. |
|dynamic-1 color rgb components for accent. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-dynamic-color-2</code> |
|dynamic-2 color for accent. See Dynamic Colors section for more info. |
|dynamic-2 color for accent. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-dynamic-color-2--rgb</code> |
|dynamic-2 color rgb components for accent. See Dynamic Colors section for more info. |
|dynamic-2 color rgb components for accent. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-accent-label-color</code> |
|Accessible text color to use with --theme-accent-color background, presented as hex value |
|Accessible text color to use with --theme-accent-color background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-alert-color</code> |
|Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as hex value |
|Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-alert-color--hover</code> |
|Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme, presented as hex value |
|Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-alert-color--rgb</code> |
|Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
|Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-alert-label</code> |
|Accessible text color to use with --theme-alert-color background, presented as hex value |
|Accessible text color to use with --theme-alert-color background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-background-color</code> |
|Body background color taken from ThemeDesigner, presented as hex value |
|Body background color taken from ThemeDesigner, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-background-image</code> |
|URL to background image, taken from ThemeDesigner, presented as string |
|URL to background image, taken from ThemeDesigner, presented as string |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-dynamic-color-1</code> |
|dynamic-1 color for body background. See Dynamic Colors section for more info. |
|dynamic-1 color for body background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-dynamic-color-1--rgb</code> |
|dynamic-1 color rgb components for body background. See Dynamic Colors section for more info. |
|dynamic-1 color rgb components for body background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-dynamic-color-2</code> |
|dynamic-2 color for body background. See Dynamic Colors section for more info. |
|dynamic-2 color for body background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-dynamic-color-2--rgb</code> |
|dynamic-2 color rgb components for body background. See Dynamic Colors section for more info. |
|dynamic-2 color rgb components for body background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-text-color</code> |
|Accessible text color to use with --body-background-color background, presented as hex value |
|Accessible text color to use with --body-background-color background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-body-text-color--hover</code> |
|Accessible text color to use with --body-background-color background, darkened or lightened by 20%, depending on theme, presented as hex value |
|Accessible text color to use with --body-background-color background, darkened or lightened by 20%, depending on theme, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-border-color</code> |
|Accessible border color calculated based on --theme-page-background-color, presented as hex value |
|Accessible border color calculated based on --theme-page-background-color, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-border-color--rgb</code> |
|Accessible border color calculated based on --theme-page-background-color, presented as group of Red, Green, Blue values |
|Accessible border color calculated based on --theme-page-background-color, presented as group of Red, Green, Blue values |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-color</code> |
|Link color taken from ThemeDesigner, presented as hex value |
|Link color taken from ThemeDesigner, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-color--hover</code> |
|Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
|Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-color--rgb</code> |
|Link color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
|Link color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-dynamic-color-1</code> |
|dynamic-1 color for links. See Dynamic Colors section for more info. |
|dynamic-1 color for links. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-dynamic-color-1--rgb</code> |
|dynamic-1 color rgb components for links. See Dynamic Colors section for more info. |
|dynamic-1 color rgb components for links. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-dynamic-color-2</code> |
|dynamic-2 color for links. See Dynamic Colors section for more info. |
|dynamic-2 color for links. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-dynamic-color-2--rgb</code> |
|dynamic-2 color rgb components for links. See Dynamic Colors section for more info. |
|dynamic-2 color rgb components for links. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-link-label-color</code> |
|Accessible text color to use with --theme-link-color background, presented as hex value |
|Accessible text color to use with --theme-link-color background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-message-color</code> |
|Message color (blue-ish), adjusted for proper contrast comparing with page background, presented as hex value |
|Message color (blue-ish), adjusted for proper contrast comparing with page background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-message-label</code> |
|Accessible text color to use with --theme-message-color background, presented as hex value |
|Accessible text color to use with --theme-message-color background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-accent-mix-color</code> |
|Mix of a page background color and accent color in the 50-50 ratio |
|Mix of a page background color and accent color in the 50-50 ratio |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-background-color</code> |
|Page (article) background color taken from ThemeDesigner, presented as hex value |
|Page (article) background color taken from ThemeDesigner, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-background-color--rgb</code> |
|Page (article) background color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
|Page (article) background color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-background-color--secondary</code> |
|Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme, presented as hex value |
|Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-dynamic-color-1</code> |
|dynamic-1 color for page (article) background. See Dynamic Colors section for more info. |
|dynamic-1 color for page (article) background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-dynamic-color-1--rgb</code> |
|dynamic-1 color rgb components for page (article) background. See Dynamic Colors section for more info. |
|dynamic-1 color rgb components for page (article) background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-dynamic-color-2</code> |
|dynamic-2 color for page (article) background. See Dynamic Colors section for more info. |
|dynamic-2 color for page (article) background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-dynamic-color-2--rgb</code> |
|dynamic-2 color rgb components for page (article) background. See Dynamic Colors section for more info. |
|dynamic-2 color rgb components for page (article) background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-text-color</code> |
|Text color for a page. Alias for --theme-page-dynamic-color-2. |
|Text color for a page. Alias for --theme-page-dynamic-color-2. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-text-color--hover</code> |
|Hover state of a page text color |
|Hover state of a page text color |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-text-color--rgb</code> |
|RGB components of page text color |
|RGB components of page text color |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-page-text-mix-color</code> |
|Mix of a page background color and page dynamic-2 color in the 50-50 ratio |
|Mix of a page background color and page dynamic-2 color in the 50-50 ratio |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-background-color</code> |
|Sticky nav background color. This color can be set inside the Theme Designer. |
|Sticky nav background color. This color can be set inside the Theme Designer. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-dynamic-color-1</code> |
|dynamic-1 color for sticky nav background. See Dynamic Colors section for more info. |
|dynamic-1 color for sticky nav background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-dynamic-color-1--rgb</code> |
|dynamic-1 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
|dynamic-1 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-dynamic-color-2</code> |
|dynamic-2 color for sticky nav background. See Dynamic Colors section for more info. |
|dynamic-2 color for sticky nav background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-dynamic-color-2--rgb</code> |
|dynamic-2 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
|dynamic-2 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-text-color</code> |
|Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1 |
|Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1 |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-sticky-nav-text-color--hover</code> |
|Hover state of a sticky nav text color |
|Hover state of a sticky nav text color |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-success-color</code> |
|Success color (green-ish), adjusted for proper contrast comparing with page background, presented as hex value |
|Success color (green-ish), adjusted for proper contrast comparing with page background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-success-color--rgb</code> |
|Success color (green-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
|Success color (green-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-success-label</code> |
|Accessible text color to use with --theme-success-color background, presented as hex value |
|Accessible text color to use with --theme-success-color background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-warning-color</code> |
|Warning color (yellow-ish), adjusted for proper contrast comparing with page background, presented as hex value |
|Warning color (yellow-ish), adjusted for proper contrast comparing with page background, presented as hex value |
||
|- |
|- |
||
− | |< |
+ | |<code>--theme-warning-label</code> |
|Accessible text color to use with --theme-warning-color background, presented as hex value |
|Accessible text color to use with --theme-warning-color background, presented as hex value |
||
|} |
|} |
||
− | == '''Dynamic Colors''' == |
+ | === '''Dynamic Colors''' === |
Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible. |
Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible. |
||
− | * dynamic-color-1 is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds. |
+ | * <code>dynamic-color-1</code> is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds. |
− | * dynamic-color-2 is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds. |
+ | * <code>dynamic-color-2</code> is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds. |
+ | ==== '''Variable aliases''' ==== |
||
− | [[fr:Aide:Guide de préparation pour FandomDesktop]] |
||
+ | {| class="article-table" |
||
+ | |'''Variable name''' |
||
+ | |'''Alias for''' |
||
+ | |- |
||
+ | |<code>--theme-accent-label-color</code> |
||
+ | |<code>--theme-accent-dynamic-color-1</code> |
||
+ | |- |
||
+ | |<code>--theme-body-text-color</code> |
||
+ | |<code>--theme-body-dynamic-color-1</code> |
||
+ | |- |
||
+ | |<code>--theme-link-label-color</code> |
||
+ | |<code>--theme-link-dynamic-color-1</code> |
||
+ | |- |
||
+ | |<code>--theme-page-text-color</code> |
||
+ | |<code>--theme-page-dynamic-color-2</code> |
||
+ | |- |
||
+ | |<code>--theme-sticky-nav-text-color</code> |
||
+ | |<code>--theme-sticky-nav-dynamic-color-1</code> |
||
+ | |} |
||
+ | |||
+ | === '''Theme-specific selectors''' === |
||
+ | You can also specify each theme for the instances where you need different behaviour based purely on the [[Help:Light and dark themes|theme choice]]. |
||
+ | * <code>.theme-fandomdesktop-light</code> is for elements that are themed for the light theme. |
||
+ | * <code>.theme-fandomdesktop-dark</code> is for elements that are themed for the dark theme. |
||
+ | |||
+ | == Further help and feedback == |
||
+ | {{Help and feedback section}} |
||
+ | |||
+ | [[de:Hilfe:Leitfaden_zur_Vorbereitung_auf_FandomDesktop]] |
||
+ | [[es:Ayuda:Preparándote_para_FandomDesktop]] |
||
+ | [[fr:Aide:Guide de conversion pour FandomDesktop]] |
||
+ | [[hi:सहायता:FandomDesktop के लिए तैयारी]] |
||
[[it:Aiuto:Guida di preparazione a FandomDesktop]] |
[[it:Aiuto:Guida di preparazione a FandomDesktop]] |
||
[[ja:ヘルプ:FandomDesktop/準備ガイド]] |
[[ja:ヘルプ:FandomDesktop/準備ガイド]] |
||
+ | [[pt:Ajuda:Guia_de_preparação_do_FandomDesktop]] |
||
+ | [[ru:Справка:Руководство по подготовке к FandomDesktop]] |
||
+ | [[tr:Yardım:FandomDesktop hazırlık kılavuzu]] |
||
+ | [[zh:Help:FandomDesktop轉換指南]] |
||
+ | |||
+ | [[Category:Help]] |
Revision as of 10:25, 30 August 2021
The FandomDesktop conversion guide is intended as a quick reference for converting older wikis from Oasis and Hydra skins to the current FandomDesktop skin.
- Note: Admin Dashboard was enabled for Gamepedia wikis on FandomDesktop and can be accessed at Special:AdminDashboard.
New custom CSS / JS files
- MediaWiki:Fandomdesktop.css
- MediaWiki:Fandomdesktop.js
Neither MediaWiki:Wikia.css nor MediaWiki:Wikia.js will load on FandomDesktop. All custom coding needs to be moved to these new style sheets.
Feature changes
Tabber
.tabber class for the tabber container will remain.
All other class names are removed and replaced with Fandom Design System classes: wds-tabs__tab for tabs and wds-tabs__content for tabs content.
Base layout
Migrating from GP wiki
- the whole page container (with navigation) #pageWrapper can be now accessed by .resizable-container class, but navigation is now on the top of the page
- there is now the main page wrapper with .page class which contains the content container and the right rail (if right rail is present, this element also contains .has-right-rail class)
- there is now the main content container with .page__main class which contains page header, content, and the page footer
- article content #content or .mw-body can be now accessed by #content id or .page-content class
- page header can be accessed by .page-header class
- page footer can be accessed by .page-footer class
- right rail can be accessed by #WikiaRailWrapper id or .WikiaRail class
Migrating from Fandom wiki
- the whole page container (with navigation) .WikiaPage can be now accessed by .resizable-container class
- main page wrapper (with right rail) .WikiaPageContentWrapper can be now accessed by .page class (if right rail is present, this element also contains .has-right-rail class). It contains the content container and the right rail
- main content container #WikiaMainContentContainer or .WikiaMainContentContainer can be now accessed by .page__main class. It contains page header, content, and the page footer
- article content #content or .WikiaArticle can be now accessed by #content id or .page-content class
- page header (accessed by #PageHeader or .page-header ) can be now accessed by .page-header class
- page footer can be accessed by .page-footer class
- right rail (accessed by #WikiaRailWrapper or .WikiaRail ) can now be accessed .right-rail-wrapper class
Portable infobox
Visual changes
- border around infobox container is added by default
Default background for titles (.pi-title) and headers (.pi-header) is set to accent color (--theme-accent-color) and font color is calculated dynamically and set to --theme-accent-label-color. For some customizations this may cause the label to be illegible.
Recommended solution:
.portable-infobox {
--pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;
}
Changed markup for tabs
- HTML markup for panel and image collection tabs has changed completely, which means that no customizations for the tabs is supported.
Old markup for image-colection (simplified):
<div class="pi-image-collection">
<ul class="pi-image-collection-tabs">
<li class="pi-tab-link pi-item-spacing current">
<span class="pi-tab-label">
CAPTION
</span>
</li>
</ul>
<div class="pi-image-collection-tab-content current">
<figure class="pi-item pi-image">
<a class="image image-thumbnail">
IMAGE OR VIDEO
</a>
</figure>
</div>
</div>
New markup for image-collection (simplified):
<div class="pi-image-collection wds-tabber">
<div class="wds-tabs__wrapper">
<ul class="wds-tabs">
<li class="wds-tabs__tab wds-is-current">
<span class="wds-tabs__tab-label">
CAPTION
</span>
</li>
</ul>
</div>
<div class="wds-tab__content wds-is-current">
<figure class="pi-item pi-image">
<a class="image image-thumbnail">
IMAGE OR VIDEO
</a>
</figure>
</div>
</div>
Old markup for panels (simplified):
<section class="pi-item pi-panel pi-border-color">
HEADER
<div class="pi-panel-scroll-wrapper">
<ul class="pi-section-navigation">
<li class="pi-section-tab pi-section-active">
<div class="pi-section-label">
LABEL
</div>
</li>
</ul>
</div>
<div class="pi-section-contents">
<div class="pi-section-content pi-section-active">
CONTENT
</div>
</div>
</section>
New markup for panels (simplified):
<section class="pi-item pi-panel pi-border-color wds-tabber">
HEADER
<div class="wds-tabs__wrapper">
<ul class="wds-tabs">
<li class="wds-tabs__tab wds-is-current">
<div class="wds-tabs__tab-label">
LABEL
</div>
</li>
</ul>
</div>
<div class="wds-tab__content wds-is-current">
CONTENT
</div>
</section>
CSS variables available for Portable Infobox customization
.portable-infobox {
--pi-background: /* MAIN BACKGROUND COLOR */
--pi-secondary-background: /* TITLE AND HEADERS BACKGROUND COLOR */
--pi-secondary-background--label: /* TITLE AND HEADERS FONT COLOR */
--pi-border-color: /* BORDER COLOR */
}
Example:
.portable-infobox {
--pi-background: rgba(var(--theme-sticky-nav-dynamic-color-1--rgb), 0.05);
--pi-secondary-background: var(--theme-sticky-nav-background-color);
--pi-secondary-background--label: var(--theme-sticky-nav-text-color);
--pi-border-color: var(--theme-border-color);
}
Community background image
The theme designer provides some extended possibilities for customizing the appearance of the community background image. However, if you’re willing to port your existing CSS/JS customizations of the background there’s a new class name: .fandom-community-header__background.
Features that changed in comparison to Oasis
Galleries
Galleries on FandomDesktop are based on the MediaWiki native gallery solution.
There are two major changes in gallery syntax:
- To determine gallery style you'll need to use mode instead of type property. In order to ensure backward compatibility with all the galleries created on Oasis, type property is still supported. However, it is encouraged to create new galleries using the new mode property.
- Support for certain gallery properties has been discontinued. See below for full list:
<gallery> element attributes
Traditional | ||
type | Temporarily supported | Should be replaced with the equivalent "mode" attribute. |
widths | Supported | |
columns | Not supported | Can be replaced with equivalent "perrow" attribute. |
perrow | Supported | |
position | Not supported | |
spacing | Not supported | |
orientation | Not supported | |
captionposition | Not supported | captionposition="within" could be replaced with similar-looking mode="packed-overlay" |
captionalign | Not supported | |
captiontextcolor | Not supported | |
bordersize | Not supported | |
bordercolor | Not supported | |
hideaddbutton | Not supported | |
caption | Supported | |
Slideshow | ||
widths | Supported | |
crop | Not supported | |
showrecentuploads | Not supported | |
position | Not supported | |
Slider | ||
orientation | Supported |
Additional notes:
- Fandom gallery images are "frameless" by default, whereas MW gallery images are displayed in a thick frame. In order to preserve the same looks of a gallery, it has to be either handled by custom styling or mode="nolines" has to be added to all galleries as part of the migration.
Features that changed in comparison to Hydra/HydraDark
Galleries
New gallery mode - slider
Gamepedia communities will now have a new slider gallery mode available.
Usage:
<gallery mode="slider">
Image.jpg
Image2.jpg
...
</gallery>
Slider gallery accepts one additional attribute named orientation, which accepts values bottom (default) or right and determines the position of the slider navigation.
Theming variables
In the FandomDesktop skin, users have access to new variables representing theme colors. These variables will be accessible in CSS.
Example hex value: #ffffff
Example Red, Green, Blue color values: 0,0,0
Variable name | Description |
--theme-accent-color
|
Accent color taken from ThemeDesigner, presented as hex value |
--theme-accent-color--hover
|
Accent color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-accent-color--rgb
|
Accent color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
--theme-accent-dynamic-color-1
|
dynamic-1 color for accent. See Dynamic Colors section for more info. |
--theme-accent-dynamic-color-1--rgb
|
dynamic-1 color rgb components for accent. See Dynamic Colors section for more info. |
--theme-accent-dynamic-color-2
|
dynamic-2 color for accent. See Dynamic Colors section for more info. |
--theme-accent-dynamic-color-2--rgb
|
dynamic-2 color rgb components for accent. See Dynamic Colors section for more info. |
--theme-accent-label-color
|
Accessible text color to use with --theme-accent-color background, presented as hex value |
--theme-alert-color
|
Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-alert-color--hover
|
Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-alert-color--rgb
|
Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
--theme-alert-label
|
Accessible text color to use with --theme-alert-color background, presented as hex value |
--theme-body-background-color
|
Body background color taken from ThemeDesigner, presented as hex value |
--theme-body-background-image
|
URL to background image, taken from ThemeDesigner, presented as string |
--theme-body-dynamic-color-1
|
dynamic-1 color for body background. See Dynamic Colors section for more info. |
--theme-body-dynamic-color-1--rgb
|
dynamic-1 color rgb components for body background. See Dynamic Colors section for more info. |
--theme-body-dynamic-color-2
|
dynamic-2 color for body background. See Dynamic Colors section for more info. |
--theme-body-dynamic-color-2--rgb
|
dynamic-2 color rgb components for body background. See Dynamic Colors section for more info. |
--theme-body-text-color
|
Accessible text color to use with --body-background-color background, presented as hex value |
--theme-body-text-color--hover
|
Accessible text color to use with --body-background-color background, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-border-color
|
Accessible border color calculated based on --theme-page-background-color, presented as hex value |
--theme-border-color--rgb
|
Accessible border color calculated based on --theme-page-background-color, presented as group of Red, Green, Blue values |
--theme-link-color
|
Link color taken from ThemeDesigner, presented as hex value |
--theme-link-color--hover
|
Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-link-color--rgb
|
Link color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
--theme-link-dynamic-color-1
|
dynamic-1 color for links. See Dynamic Colors section for more info. |
--theme-link-dynamic-color-1--rgb
|
dynamic-1 color rgb components for links. See Dynamic Colors section for more info. |
--theme-link-dynamic-color-2
|
dynamic-2 color for links. See Dynamic Colors section for more info. |
--theme-link-dynamic-color-2--rgb
|
dynamic-2 color rgb components for links. See Dynamic Colors section for more info. |
--theme-link-label-color
|
Accessible text color to use with --theme-link-color background, presented as hex value |
--theme-message-color
|
Message color (blue-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-message-label
|
Accessible text color to use with --theme-message-color background, presented as hex value |
--theme-page-accent-mix-color
|
Mix of a page background color and accent color in the 50-50 ratio |
--theme-page-background-color
|
Page (article) background color taken from ThemeDesigner, presented as hex value |
--theme-page-background-color--rgb
|
Page (article) background color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
--theme-page-background-color--secondary
|
Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme, presented as hex value |
--theme-page-dynamic-color-1
|
dynamic-1 color for page (article) background. See Dynamic Colors section for more info. |
--theme-page-dynamic-color-1--rgb
|
dynamic-1 color rgb components for page (article) background. See Dynamic Colors section for more info. |
--theme-page-dynamic-color-2
|
dynamic-2 color for page (article) background. See Dynamic Colors section for more info. |
--theme-page-dynamic-color-2--rgb
|
dynamic-2 color rgb components for page (article) background. See Dynamic Colors section for more info. |
--theme-page-text-color
|
Text color for a page. Alias for --theme-page-dynamic-color-2. |
--theme-page-text-color--hover
|
Hover state of a page text color |
--theme-page-text-color--rgb
|
RGB components of page text color |
--theme-page-text-mix-color
|
Mix of a page background color and page dynamic-2 color in the 50-50 ratio |
--theme-sticky-nav-background-color
|
Sticky nav background color. This color can be set inside the Theme Designer. |
--theme-sticky-nav-dynamic-color-1
|
dynamic-1 color for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-dynamic-color-1--rgb
|
dynamic-1 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-dynamic-color-2
|
dynamic-2 color for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-dynamic-color-2--rgb
|
dynamic-2 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-text-color
|
Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1 |
--theme-sticky-nav-text-color--hover
|
Hover state of a sticky nav text color |
--theme-success-color
|
Success color (green-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-success-color--rgb
|
Success color (green-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
--theme-success-label
|
Accessible text color to use with --theme-success-color background, presented as hex value |
--theme-warning-color
|
Warning color (yellow-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-warning-label
|
Accessible text color to use with --theme-warning-color background, presented as hex value |
Dynamic Colors
Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible.
dynamic-color-1
is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds.dynamic-color-2
is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds.
Variable aliases
Variable name | Alias for |
--theme-accent-label-color
|
--theme-accent-dynamic-color-1
|
--theme-body-text-color
|
--theme-body-dynamic-color-1
|
--theme-link-label-color
|
--theme-link-dynamic-color-1
|
--theme-page-text-color
|
--theme-page-dynamic-color-2
|
--theme-sticky-nav-text-color
|
--theme-sticky-nav-dynamic-color-1
|
Theme-specific selectors
You can also specify each theme for the instances where you need different behaviour based purely on the theme choice.
.theme-fandomdesktop-light
is for elements that are themed for the light theme..theme-fandomdesktop-dark
is for elements that are themed for the dark theme.
Further help and feedback
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article