Portal:Component/Slider/doc

## Description

This template is a modified version of Tierrie's on Dragon Age Wikia 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 wikia 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 wikia. DO NOT change the names of the pages for your wikia 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 wikia. It's best to keep the file name the same.
* Now, copy the following code and put it into your wikia'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   */
/****************************************************/
/* container settings */
.portal_metro .toc { display: none; }
.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: ""; 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;  }
.portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { display: block; font-size: 1.6em; 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: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0,0,0); position: absolute; z-index: -1; }
.portal_metro#portal_main [class^=portal_sliderlink]:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; }
.portal_metro#portal_main .portal_sliderlink-2:after { background-image: url('http://img2.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; }
.portal_metro#portal_main .portal_sliderlink-3:after { background-image: url('http://img2.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; }
.portal_metro#portal_main .portal_sliderlink-4:after { background-image: url('http://img3.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; }
.portal_metro#portal_main .portal_sliderlink-5:after { background-image: url('http://img4.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; }
.portal_metro#portal_main .portal_sliderlink-6:after { background-image: url('http://img3.wikia.nocookie.net/__cb20141018230054/dragonage/images/8/86/Portal2_lore.jpg?1'); }

/* slider sub category background */
#porta_main, #portal_series, #portal_lore #portal_dao, #portal_da2, #portal_dai { position: relative; }
#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_series:after { background-image: url('http://img4.wikia.nocookie.net/__cb20141101062813/dragonage/images/4/46/Portal2_bg_series.jpg?1'); }
#portal_lore:after { background-image: url('http://img1.wikia.nocookie.net/__cb20141101062813/dragonage/images/e/e2/Portal2_bg_lore.jpg?1'); }
#portal_dao:after { background-image: url('http://img1.wikia.nocookie.net/__cb20141101062803/dragonage/images/4/4f/Portal2_bg_dao.jpg?1'); }
#portal_da2:after { background-image: url('http://img3.wikia.nocookie.net/__cb20141101062802/dragonage/images/8/85/Portal2_bg_da2.jpg?1'); }
#portal_dai:after { background-image: url('http://img2.wikia.nocookie.net/__cb20141101063645/dragonage/images/7/7c/Portal2_bg_dai.jpg?1'); }

.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-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: .25em 0 .5em 1em; }
.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); }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 { padding: 1em 0 0 1em; margin-top: 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_metro [class^=portal_sliderlink] { width: 225px; }
  .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { width: 360px; }
  .portal_metro#portal_images, .portal_metro#portal_images img.thumbimage, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-images { height: 280px !important; }
  .WikiaRail .module { position: relative; }
}
@media screen and (min-width: 1023px) and (max-width: 1650px) {
  .portal_metro [class^=portal_sliderlink] { width: 225px; }
  .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { width: 360px; }
  .portal_metro#portal_images, .portal_metro#portal_images img.thumbimage, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-images { height: 280px !important; }
}
@media screen and (min-width: 1650px) {
  .portal_metro [class^=portal_sliderlink] { width: 300px; }

  /* realign slider background images */
/*  .portal_metro#portal_images, .portal_metro#portal_images img.thumbimage, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-images { height: 420px !important; } */
}

```

* 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 wikia 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. Also, if any of your readers use the MonoBook skin, this will increase the requirements even further due to MonoBook's larger content real estate. To ensure an image will take up the entire space, use one that's at least 1500px wide.