Thread:Qwertyxp2000 the second/@comment-26923519-20170702182811

ump.wikia.com

Do you like the new slider? Well, over there, it's broken, I know. It's just because the wiki over there doesn't have ImportJS. Well, in here, if you get the coding right in everything, you will have an awesome navigation slider. The navigation slider contains most of the stuff from the page header, but I've added additional stuff. I've also fixed the first image in here. Also, there is a known issue about it. When the main page is loading, the entire navigation slider takes over the main page. Don't worry, it's just cosmetic.

To have the updated navigation slider, add all of the following sources in the mentioned templates:

Template:Slider2/Slide_1:

Template:Slider2/Slide_2:

Template:Slider2/Slide_3:

Template:Slider2/Slide_4:

Template:Slider2/Slide_5:

Template:Slider2/Slide_6:

Next, you have to copy this into the wiki's Common.css: /****************************************************/ /*                 Slider                          */ /*                                                 */ /* CSS code for Teplate:Slider generator            */ /* Code created by Tierrie on the Dragon Age Wiki  */ /* Edits made to CSS thanks to Slay Drake's BF     */ /* Thank you Jessica for everthing! Sincerely Drake */ /****************************************************/ /* 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; z-index: 1; } .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_slide1 .portal_sliderlink-2 .portal_slidertext { display: block; font-size: 1.6em; left: 20px; line-height: 1em; } /* main slider sizing */ .portal_metro#portal_slide1 [class^=portal_sliderlink] { cursor: pointer; position: absolute; overflow: hidden; } .portal_metro#portal_slide1, .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_slide1 .portal_sliderlink-2 { width: 100%; } /* main slider preview images */ .portal_metro#portal_slide1 [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_slide1 [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_slide1 [class^=portal_sliderlink]:hover:after { opacity: 1; } .portal_metro#portal_slide1 .portal_sliderlink-2 { top: 0px; left: 0px; height: 450px; } .portal_metro#portal_slide1 .portal_sliderlink-2:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_2_preview.jpg'); background-size: cover; } .portal_metro#portal_slide1 .portal_sliderlink-3 { top: 0px; right: 0px; height: 112px; } .portal_metro#portal_slide1 .portal_sliderlink-3:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_3_preview.png'); background-size: cover; } .portal_metro#portal_slide1 .portal_sliderlink-4 { top: 112px; right: 0px; height: 113px; } .portal_metro#portal_slide1 .portal_sliderlink-4:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_4_preview.png'); background-size: cover; } .portal_metro#portal_slide1 .portal_sliderlink-5 { top: 225px; right: 0px; height: 112px; } .portal_metro#portal_slide1 .portal_sliderlink-5:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_5_preview.png'); background-size: cover; } .portal_metro#portal_slide1 .portal_sliderlink-6 { top: 337px; right: 0px; height: 113px; } .portal_metro#portal_slide1 .portal_sliderlink-6:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_6_preview.jpeg'); background-size: cover; } /* slides background */ /* slider tabs */ .portal_metro#portal_slider .portal_navlink { display: none; } .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.7; } .portal_metro#portal_slider .portal_navlink img:hover { opacity: 1; } .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 { word-break: normal; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { border: none; 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_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel { overflow: auto; } /* portal screen wide overrides */ @media screen and (max-width: 1023px) { .portal_metro [class^=portal_sliderlink] { width: 225px; } .portal_metro#portal_slide1 .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_slide1 .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_slide1 .portal_sliderlink-2:after {} /* 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; } */ } /* text and links */ .portal_metro, .portal_body a { color: #fff !important; text-shadow: 2px 2px 2px #000 !important; } .portal_body a:hover { color: #b3b3b3 !important; text-shadow: 2px 2px 2px #000 !important; } /* END Slider */ Finally, add the following line into the wiki's ImportJS. Common.js/slider.js P.S. Hopefully Spike144 won't complain about my work. It took me some real dedication, time and hard work to make.  
 * 1) porta_main, #portal_slide2, #portal_slide3 #portal_slide4, #portal_slide5, #portal_slide6 { position: relative; }
 * 2) portal_slide3:after, #portal_slide4:after, #portal_slide5:after, #portal_slide6:after, #portal_slide2:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 * 3) portal_slide2:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_2_background.jpg'); background-size: cover; }
 * 4) portal_slide3:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_3_background.png'); background-size: cover; }
 * 5) portal_slide4:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_4_background.png'); background-size: cover; }
 * 6) portal_slide5:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_5_background.png'); background-size: cover; }
 * 7) portal_slide6:after { background-image: url('//bloons.wikia.com/wiki/Special:FilePath/Slide_6_background.jpeg'); background-size: cover; }