FANDOM


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.

Important note for MonoBook

If you want to ensure the images will be seen on the MonoBook skin, add the following to your wiki's monobook.css page (note the changes may take several minutes to be seen, even if you clear the cache):

.ui-widget-content { background: none !important; color: inherit !important; }

If you additionally want to have the portal appear like the ones on the wikia skin, add this code and change colors where necessary (this bit was created by Mechemik):

.ui-widget-content {
background: none !important;
color: inherit !important;
border: 1px solid #000000 !important; /* adds border around slider to hide the default one */
}
 
/* keeps .ui-widget-content from creating borders on child tags */
.ui-widget-content div {
border: 0 !important;
}
 
/* portal slider links color */
.ui-widget-content a {
color: #ffffff !important;
}
 
/* changes headers to read more clearly */
.ui-widget-content h1 {
color: #ffffff !important;
border: none !important; /* keep this to prevent monobook's header bottom border from appearing on slider */
}

/* no radius corners for slider to match one on wikia skin */
.ui-corner-all, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-tr, .ui-corner-br, .ui-corner-left, .ui-corner-tl, .ui-corner-bl {
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
-khtml-border-radius: 0px !important;
border-radius: 0px !important;
}

/* sub tabs */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: rgba(0, 0, 0, .6) !important; /* do not change this unless you want to lose the wikia look of semi-transparent tabs */
border: 0 !important;
}
 
/* selected sub tab */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { 
background-color: transparent !important; /* do not change this unless you want to lose the wikia look of semi-transparent tabs */
background: none !important; /* prevents a weird gray block behind the sub tab panel from being seen */
}
 
/* hover sub tab */
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover { 
background-color: transparent !important; /* do not change this unless you want to lose the wikia look of semi-transparent tabs */
background: none !important; /* prevents a weird gray block behind the sub tab panel from being seen */
}
 
/* background of sub tab panel */
.ui-widget-content .ui-tabs .ui-tabs-nav {
background-color: transparent !important; /* do not change this unless you want to lose the wikia look of semi-transparent tabs */
background: none !important; /* prevents a weird gray block behind the sub tab panel from being seen */
}

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.
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA  .