Portal:Component/Slider/doc

Description
This template is a modified version of Tierrie's on Dragon Age Wiki. As such, 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. /***************/ /* portal main */ /***************/ /* 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'); }
 * 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.
 * 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").

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

/****************************************/ /* 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, add this to the common.js page:

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.