Portal:Component/Slider

* #portal\_content-1
* #portal\_content-2
* #portal\_content-3
* #portal\_content-4
* #portal\_content-5
* #portal\_content-6
* #portal\_content-7
* #portal\_content-8

# Gruplar

* Önemli Karakterler

* Alistan Mori
* Anireth
* Betram Vonn
* Caramir Lanhert
* Delegart
* Deremir Aleedran
* Dorian Jelhes
* Eleanor Darian
* Mareox Dalhart
* Melinir
* Olenia Valginher
* Melinir
* Rena Flohe
* Silvan Dillegan
* Siyennir
* Urenes
* Zaren
* Zyrik

* Krallıklar
* İmparatorluklar
* Vasal Devletler
* Dükalıklar
* Prenslikler
* Eski Krallıklar

* Cainmar
* Karanhelm
* Lianstra
* Lidarin
* Nantos ve Creya
* Raffinya
* Sodhirn
* Vilmarya
* Yovheniss
* daha fazlası...

* Sanigard İmparatorluğu
* Valhoyn İmparatorluğu

* Ardlen
* Brevin
* Lepya
* Lodynsi
* Pernha
* Ninhern
* Nyarand
* Ravvenda

* Darsia
* Ihentra

* Rolon
* Vilmar
* Wraston

* Creya
* Karanthir
* Nantos
* Vilmaren
* Vilmiran

* İNSAN ÇAĞLARI
* AHLİVLİAN ÇAĞLARI

* Ejderhalar Çağı
* Büyücüler Çağı
* Kölelerin Çağı

* Karanlık Çağ
* Birinci Çağ
* İkinci Çağ
* Üçüncü Çağ
* Dördüncü Çağ

* Birinci Çağ
* İkinci Çağ
* Üçüncü Çağ
* Dördüncü Çağ

* Birinci Essinder Savaşı
* İkinci Essinder Savaşı
* Kutsal Savaşlar
* Tefloien Savaşı
* Carvoni Savaşı

* Finmah Savaşı

* Zakreyn Tepesi Savaşı

* Iseffan Kalesi Savaşı
* Raffin Savaşı

* Essinder
* Vanimer
* Itheldem
* Aetorg

* ESSINDER DİNLERİ
* VANIMER DİNLERİ
* AETORG DİNLERİ
* ITHELDEM DİNLERİ

* Aehilte İnancı
* Altın Ejderha
* Cre'nin Babası
* Olyttai
* Efendiler

* ARMANİST GRUPLARI
* DİNİ GRUPLAR
* PARALI ASKERLER
* GİZLİ ÖRGÜTLER

* Arma Birliği
* Sinarath Konseyi
* Sin'Talinha Konseyi

* Essinder'in Çocukları
* Kanlı Kılıçlar

 Editors can experiment in this template's sandbox and test case pages.

## Description

This template is a modified version of Tierrie's on Dragon Age Wiki with an updated UCP fix by Ursuul and so some of the code here may be different from theirs. This is an unofficial documentation in that Tierrie did not write this or have any part in it. However, as I'm sure I've pulled my hair out about a hundred times over trying to get this to work because no step-by-step was left behind, I figured I'd write one to try and make it easier for others.

## Dependencies

This slider is complex and requires a number of pages, CSS, JS, and additional steps. As the code here has been modified to fit our needs, the pages linked below will go directly to the originals on Dragon Age.

* First, if your wiki doesn't already have it enabled, contact staff to enable the namespace "Portal" (more information on namespaces here).
* Once the above is enabled, copy the code from the following pages and create them on your wiki. DO NOT change the names of the pages for your wiki unless you know what you're doing.
	+ Portal:Component/Slider (this is the template that will combine everything into one piece and will be put on the main page)
	+ Portal:Component/Main (this creates the headers for the sliders)
	+ Template:PortalMetro (note this is a template, not a portal)
	+ Template:PortalPage (note this is a template, not a portal)
	+ Template:PortalTransformer (note this is a template, not a portal)
	+ Template:PortalSection (note this is a template, not a portal)
	+ any additional pages for each main tab on your slider (the standard will have 5 pages). Note that each one will follow this naming scheme: **Portal:Component/UNIQUE NAME HERE** (like this one for DA). You can copy the code from it, just remember to change the line where it mentions the component name and the links to whatever you want yours to link to.
	+ Grab this image and upload it to your own wiki. It's best to keep the file name the same.
* Now, copy the following code and put it into your wiki's common.css page (for all css and js page links see this). **Remember to change the image URLs to your own!** Also, if you change the portal names in the code (like #portal\_da2 to #portal\_hos) remember to change "da2" everywhere in the CSS and the personal component page (e.g: where it'd say "id=da2" you'd change to "id=hos").

```
/****************************************************/
/*                  portal main                     */
/* Code created by Tierrie on the Dragon Age Wiki   */
/*      Code updated for UCP by Alex/Ursuul         */
/****************************************************/
/* container settings */
#portal_slider a.external:after,
.portal_metro .toc {
	display: none;
}
#portal_slider.portal_metro.ui-corner-all {
	border-radius: 0;
}
.portal_container { position: relative; display: inline-block; margin-bottom: 15px; width: 100%; }
/* give all containers a black background so the opacity changes results in a brightness change */
.portal_metro:before { position: absolute; top: 0; left: 0; width:100%; height: 100%; /**/content: "";/* experimental */ background-color: rgb(0,0,0); z-index: -2; }
.portal_metro { border: 1px solid black; }
.portal_metro .portal_body { padding: 0 10px 0 10px; overflow: hidden; }
/* pages nested within a slider container should not render borders twice */
.portal_metro .portal_metro { border: none; }
.portal_metro.ui-tabs .ui-tabs-panel { padding: 0; }
.portal_metro#portal_slider, .portal_metro#portal_slider .portal_body { padding: 0; }

/* font title and sliders */
.portal_metro [class^=portal_sliderlink] .mw-headline, .portal_metro [class^=portal_sliderlink] .portal_slidertext, .portal_metro .portal_header_text, .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a, .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { width: 100%; font-family: "Segoe UI", Helvetica, Verdana; font-weight: normal; font-size: inherit; line-height: inherit; text-shadow: 0px 0px 2px rgba(0,64,0,0.5), -1px -1px rgba(0,64,0,0.5), 1px 1px rgba(0,64,0,0.5); text-align:left; }
.portal_metro [class^=portal_sliderlink] .mw-headline, .portal_metro [class^=portal_sliderlink] .portal_slidertext, .portal_metro .portal_header_text, .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { text-transform: uppercase; }
.portal_metro .portal_header_text { font-size: 2em; padding-top: 15px; }
.portal_metro [class^=portal_sliderlink] { font-size: 1.4em; }

/* portal headers, headerlinks colors and formatting */
.portal_metro .portal_header { position: relative; margin-bottom: 6px; padding: 0; }
.portal_metro .portal_header_text { border-bottom: none; padding-left: 15px; }
.portal_metro .portal_headerlinks { font-size: 0.8em; position: absolute; right: 1em; top: 1em; padding-bottom: 2px; z-index: 1; }
.portal_metro .portal_header, .portal_metro .portal_header a:link, .portal_metro .portal_header a:visited, .portal_metro .portal_header a:hover, .portal_metro .portal_header a:active { color: rgb(89,105,57); }

/* slider text position */
.portal_metro [class^=portal_sliderlink] .portal_slidertext { position: absolute; bottom: 10px; left: 10px; color: #FFFFFF; font-size: large;/* Experimental */}
.portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { display: block; font-size: xx-large;/*experimental*/ left: 20px; line-height: 1em; }

/* main slider sizing */
.portal_metro#portal_main [class^=portal_sliderlink] { cursor: pointer; position: absolute; overflow: hidden; }
.portal_metro#portal_main, .portal_vtab.ui-tabs-vertical, .portal_vtab.ui-tabs-vertical .ui-tabs-nav, .portal_vtab.ui-tabs-vertical .ui-tabs-panel { height: 450px; }
.portal_metro#portal_main .portal_sliderlink-2 { width: 100%; }

/* slider background */
.portal_metro#portal_main [class^=portal_sliderlink]:before { /**content: "";/* Experimental */ width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0,0,0); position: absolute; z-index: -1; }

/* Experimental */
.portal_metro#portal_main [class^=portal_sliderlink] {
    /*content: "";*/
    position: absolute;
    top: 0;
    /*left: 0;*/
    /*z-index: -1;*/
    /*width: 100%;*/
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
}

.portal_metro#portal_main [class^=portal_sliderlink]:hover {
    opacity: 1;
}/**/

/* Transclucency patch */
#portal_slider #portal_main .portal_body:before,
#portal_slider #portal_main .portal_body:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 300px;
    background-color: #000000;
}

#portal_slider #portal_main .portal_body:after {
    z-index: 10;
    width: 100%;
}

.portal_sliderlink-2 {
    z-index: 20;
}

.portal_sliderlink-2 ~ [class^="portal_sliderlink"] {
    z-index: 40;
}/**/

.portal_metro#portal_main [class^=portal_sliderlink]:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    opacity: 0.8;
}

.portal_metro#portal_main [class^=portal_sliderlink]:hover:after { opacity: 1; }
.portal_metro#portal_main .portal_sliderlink-2 { top: 0px; left: 0px; height: 450px; background-image: url('https://images.wikia.nocookie.net/__cb20141024044648/dragonage/images/c/c5/Portal2_dai.jpg?1'); background-position-x: -700px; }
.portal_metro#portal_main .portal_sliderlink-3 { top: 0px; right: 0px; height: 112px; background-image: url('https://images.wikia.nocookie.net/__cb20141018230055/dragonage/images/e/e8/Portal2_series.jpg?1'); }
.portal_metro#portal_main .portal_sliderlink-4 { top: 112px; right: 0px; height: 113px; background-image: url('https://images.wikia.nocookie.net/__cb20141018230053/dragonage/images/e/e3/Portal2_dao.jpg?1'); }
.portal_metro#portal_main .portal_sliderlink-5 { top: 225px; right: 0px; height: 112px; background-image: url('https://images.wikia.nocookie.net/__cb20141018230052/dragonage/images/7/7b/Portal2_da2.jpg?1'); }
.portal_metro#portal_main .portal_sliderlink-6 { top: 337px; right: 0px; height: 113px; background-image: url('https://images.wikia.nocookie.net/__cb20141018230054/dragonage/images/8/86/Portal2_lore.jpg?1'); }

/* slider sub category background */
#portal_slider .ui-state-active,
#portal_slider .ui-state-default,
#portal_slider .ui-widget-content,
#portal_slider .ui-widget-header {
	background: none;
}

#porta_main, #portal_series, #portal_lore #portal_dao, #portal_da2, #portal_dai { position: relative; }
#portal_series { background-image: url('https://images.wikia.nocookie.net/__cb20141101062813/dragonage/images/4/46/Portal2_bg_series.jpg?1'); }
#portal_lore { background-image: url('https://images.wikia.nocookie.net/__cb20141101062813/dragonage/images/e/e2/Portal2_bg_lore.jpg?1'); }
#portal_dao { background-image: url('https://images.wikia.nocookie.net/__cb20141101062803/dragonage/images/4/4f/Portal2_bg_dao.jpg?1'); }
#portal_da2 { background-image: url('https://images.wikia.nocookie.net/__cb20141101062802/dragonage/images/8/85/Portal2_bg_da2.jpg?1'); }
#portal_dai { background-image: url('https://images.wikia.nocookie.net/__cb20141101063645/dragonage/images/7/7c/Portal2_bg_dai.jpg?1'); }
#portal_series:after, #portal_lore:after, #portal_dao:after, #portal_da2:after, #portal_dai:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.portal_metro#portal_slider .portal_navlink { display: none; }
.portal_metro#portal_slider { }
.portal_metro#portal_slider .portal_navlink { display: block; position: absolute; bottom: 8px; left: 8px; z-index: 2; }
.portal_metro#portal_slider .portal_navlink img { opacity: 0.3; }
.portal_metro#portal_slider .portal_navlink img:hover { opacity: 0.8; }
.portal_metro#portal_slider .portal_header { position: absolute; width: 100px; height: 50px; right: 10px; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { padding: 0; }
.portal_metro#portal_slider .portal_vtab.ui-corner-all {
	border: 0;
	border-radius: 0;
}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { border: none; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel { position: absolute; left: 200px; top: 0px; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { padding: 0; width: 200px; float: left; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li { cursor: pointer; margin: 0; top: 0; clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding: 0; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { background: none; font-size: 1.2em; display:block; width: 100%; padding: .25em 0 .5em 1em; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected a { background: none; cursor: pointer; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after { height: 420px; content: ""; width: 100%; overflow-y: hidden; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before { }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before, .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after, .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-default { background-color: rgba(0,0,0,0.6); }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-active { background-color: transparent; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover { background-color: transparent; }

.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { width: 100%; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; border-right-width: 1px; border-right-width: 1px; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel ul { padding: 12px 0 0 5px; margin: 0; /* columns: 2; -webkit-columns: 2; -moz-columns: 2; */ }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li { list-style: none; padding: 0.25em 0 0.25em 1em; margin: 0; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav .ui-corner-left {
	border: 0;
	border-radius: 0;
}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { font-size: 1.2em; display:block; color: rgb(255,255,255); color: #FFFFFF;}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 { padding: 0.5em 0 0 1em; margin: 0; border-bottom: none; text-transform: uppercase; color: rgb(89,105,57); font-size: 1.4em; }
.portal_metro#portal_slider .cols_2 ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }

/********************************/
/* portal screen wide overrides */
/********************************/
@media screen and (max-width: 1023px) {
    #portal_slider #portal_main .portal_body:before,
    .portal_metro [class^=portal_sliderlink] {
        width: 225px;
    }

    .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext {
        width: 360px;
    }
}

@media screen and (min-width: 1023px) and (max-width: 1650px) {
    #portal_slider #portal_main .portal_body:before,
    .portal_metro [class^=portal_sliderlink] {
        width: 225px;
    }

    .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext {
        width: 360px;
    }

@media screen and (min-width: 1650px) {
    #portal_slider #portal_main .portal_body:before,
    .portal_metro [class^=portal_sliderlink] {
        width: 300px;
    }

    /* realign slider background images */
    .portal_metro#portal_main .portal_sliderlink-2:after {
        background-position-x: -550px;
    }
}

```

* Now, add this to the common.js page:

```
/****************************************/
/* sliders using jquery by User:Tierrie */
/****************************************/
mw.loader.using( ['jquery.cookie']);

/****************************************/
/* sliders using jquery by User:Tierrie */
/****************************************/
mw.loader.using( ['jquery.ui.tabs'], function() {
  $( "[class^=portal_vtab]" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
  $( "[class^=portal_vtab] li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

  var $tabs = $("#portal_slider").tabs({ fx: {opacity:'toggle', duration:100} } );
  $("[class*=portal_sliderlink]").click(function() { // bind click event to link
    $tabs.tabs('select', this.className.match(/portal_sliderlink-(\d+)/)[1]);
    console.log("Sliding to " + this.className.match(/portal_sliderlink-(\d+)/)[1]);
    return false;
  });
  $('#portal_next').click(function() {
    $tabs.tabs('select', ($tabs.tabs('option', 'selected') == ($tabs.tabs('length'))-1) ? 0 : $tabs.tabs('option', 'selected') + 1 ); // switch to next tab
    return false;
  });
  $('#portal_prev').click(function() { // bind click event to link
    $tabs.tabs('select', ($tabs.tabs('option', 'selected') == 0) ? ($tabs.tabs('length')-1) : $tabs.tabs('option', 'selected') - 1 ); // switch to previous tab
    return false;
  });
});

```

Now, if you've done everything right, we're almost done. However, you may have noticed your slider isn't, well, clickable. That's because any edits made to the JS page must be reviewed by staff first due to security purposes which you can read more about here. So go to this page on your wiki and you should see an orange box and words beside it saying it needs to be submitted. Click the button that says "submit for review". Now all you got to do is wait. If you're a little impatient, or just want to go ahead and make sure it's at least working on your end, from that page you can also enter test mode which will allow you to view how your code works before going live.

## To Add to Page

To add this to a page (assuming you kept the page names the same):

```
{{Portal:Component/Slider|style=metro}}

```

If doing div tags, you'll wrap the div tags around this and close after like:

```
<div>{{Portal:Component/Slider|style=metro}}</div>
```

## Additional Notes

* Please be aware of differing screen resolutions when choosing images for the slider. While the height of the box in the code is set to 450px, the width is dynamic and will take up the entire width of a column or page if allowed. Thus, while an image with a width of 900px could work for a small screen, it will cut off and show the background color for larger ones.
* Due to a backend change to Fandom's coding, the image to click to go back to the main portal slider may no longer appear correctly. You can instead change this to a hyperlink by editing Template:PortalMetro where it shows this:

```

```

To this:

```
[[#portal_content-{{{navportal1|}}}|Back to main]]

```