JustLeafy's Wiki's Feed

JustLeafy's Wiki's Feed is a combination of multiple elements that is located at the bottom of the main page. The template is called WikiFeed.
== Description ==
It is a footer that features 4 wiki spotlights on the right and 8 featured articles on the left. It can be temporarily hidden by clicking the X button. Note that it will re-appear if the page is refreshed. The wiki spotlights column in devices under 1024px will only show one wiki spotlight per row. More wiki spotlights and featured articles will be added/modified soon as the wiki grows. 
== History ==
JustLeafy liked the design of the Windows 10 start menu, so he was inspired to create something similar, but he used his style and made the contents more appropriate for a wiki rather than in general.
== Update Log ==
Note: Modification of featured articles and wiki spotlights are not included in the update log.
Date 	Changes
November 4 2017 	Initial Release
November 12 2017	
* Changed the position of the read articles and explore wikis columns.
* The "Read more" label has changed to "Read Articles".
November 24 2017	
* Modified close button.
* Remove link text decoration on hover.
December 1 2017 	
* Support for devices under a width of 1024px.
* Turned it into an actual template.
* Renamed it to "WikiFeed".
December 21 2017	
* Support for Monobook.
== Comparisons ==
=== Windows 10 menu ===
*Has no sidebar that included icons.
*Has a header and a close button.
*Instead of apps, featured articles were added.
*Instead of pinned tiles, custom wiki spotlights were used.
*Is wider.
=== Fan Feed ===
* Has a close button.
* No news and stories, featured videos or discussions.
* Does not use the Fan Feed Card design.
* Is scrollable.
* Is less wider.
* More than 3 spotlights were used.
* More or less articles to read.
* Has 2 columns.
* Wiki spotlights are taller and wider, while featured articles are more minimized.
== Trivia ==
* It is basically a combination of the Fan Feed and the Windows 10 start menu.
* The template itself is fully protected to prevent possible vandalism.
* This was completely built from HTML and CSS, only. No JavaScript was even required for the creation of this template.
* JustLeafy consider this as his "ultimate" styled template and his biggest project ever.
== Step-by-step ==
* 1: Upload the XIcon.png sprite.
* 2: Create a template called "WikiFeed" and add the following code in the template:
{{{title}}}[[File:Xicon.png|thumb|20px]]
<mainpage-leftcolumn-start />
Explore Wikis
{{#tag:gallery|
{{{wiki1}}}{{!}}link=w:c:{{{link1}}}
{{{wiki2}}}{{!}}link=w:c:{{{link2}}}
{{{wiki3}}}{{!}}link=w:c:{{{link3}}}
{{{wiki4}}}{{!}}link=w:c:{{{link4}}}
|type="gallery"
|widths="325"
|columns="2"
|spacing="small"
|orientation="square"
|bordersize="none"
|bordercolor="transparent
|navigation="true"
|hideaddbutton="true"
}}
{{#tag:gallery|{{{wiki1}}}|link=w:c:{{{link1}}}
|{{{wiki2}}}|link=w:c:{{{link2}}}
|{{{wiki3}}}|link=w:c:{{{link3}}}
|{{{wiki4}}}|link=w:c:{{{link4}}}
}}
<mainpage-endcolumn />
<mainpage-rightcolumn-start />
Read Articles
[[File:{{{image1}}}|thumb|left|50px|link={{{page1}}}]] [[{{{page1}}}|{{{page1}}}]]
[[File:{{{image2}}}|thumb|left|50px|link={{{page2}}}]] [[{{{page2}}}|{{{page2}}}]]
[[File:{{{image3}}}|thumb|left|50px|link={{{page3}}}]] [[{{{page3}}}|{{{page3}}}]]
[[File:{{{image4}}}|thumb|left|50px|link={{{page4}}}]] [[{{{page4}}}|{{{page4}}}]]
[[File:{{{image5}}}|thumb|left|50px|link={{{page5}}}]] [[{{{page5}}}|{{{page5}}}]]
[[File:{{{image6}}}|thumb|left|50px|link={{{page6}}}]] [[{{{page6}}}|{{{page6}}}]]
[[File:{{{image7}}}|thumb|left|50px|link={{{page7}}}]] [[{{{page7}}}|{{{page7}}}]]
[[File:{{{image8}}}|thumb|left|50px|link={{{page8}}}]] [[{{{page8}}}|{{{page8}}}]]
[[Special:AllPages|Browse all articles ➜]]
<mainpage-endcolumn />
== Dependencies ==
=== Content ===
*At least 8 articles with an image on each article.
*At least one associated wiki or a wiki that you and/or the other staff members in your wiki that would like to promote.
=== CSS ===
* The following CSS is needed for the style of this template. Just add the following CSS in your wiki's Common.css stylesheet page.
/* Code for the main page footer */
 
/* Explore Wikis for different resolutions */
 
@media only screen and (max-width: 1023px) { div#w-c-dev, div#w-c-bloons {
 margin-top: 337px;
 margin-left: -325px;
}
}
 
@media only screen and (max-width: 1023px) { div#w-c-pixelgun, div#w-c-community {
 margin-left: 13px;
}
}
 
/* General */
 
#modernized_footer > div > .lcs-container,
#modernized_footer > div > .rcs-container {
 background-color: rgba(0,0,0,0.4);
 overflow-x: auto;
 height: 300px;
 margin-top: 15px;
}
 
#modernized_footer > div > .rcs-container {
 background-color: rgba(0,0,0,0.4);
 overflow-x: auto;
 height: 300px;
 padding-left: 20px;
}
 
#modernized_footer > div > div > p {
 padding: 12px 12px 12px 4px;
 color: white;
}
 
#modernized_footer > div > .rcs-container {
 margin-left: -10px;
}
 
#modernized_footer > div > .lcs-container {
 margin-right: -10px;
 padding-left: 15px !important;
}
 
#modernized_footer > div > .lcs-container > p {
 padding-left: 10px !important;
}
 
/* Button */
 
.more-articles-button > p > a > span.wds-button.wds-is-secondary.wds-is-squished:hover {
 transition: .3s;
 color: #ccc !important;
 border-color: #ccc !important;
}
 
/* Header */
 
div#modernized_footer_header {
 background-color: rgba(0,0,0,0.4);
 margin-bottom: -15px;
 padding: 12px;
 border-bottom: 1px rgb(26,32,35) solid;
 font-weight: bold;
 font-size: 16px;
 color: white;
}
 
@media only screen and (min-width: 1083px) and (max-width: 1024px) {
div#modernized_footer_header {
 width: 1016px;
}
}
 
@media only screen and (max-width: 1084px) and (min-width: 1680px) {
div#modernized_footer_header {
 width: 950px;
}
}
 
#modernized_footer_header > div > figure > a > img.thumbimage.lzyPlcHld.lzyTrns.lzyLoaded {
 margin-top: -20px;
}
 
/* Fixes */
 
#modernized_footer > div > .rcs-container {
 margin-top: -3px !important;
}
 
#modernized_footer > div > .lcs-container {
 margin-top: 13px !important;
}
 
.mw-customtoggle-myTable > figure > a > img {
 margin-top: -20px;
}
 
#modernized_footer > div > .lcs-container {
 margin-left: 320px;
 margin-right: -320px;
}
 
#modernized_footer > div > .rcs-container {
 margin-left: -724px;
}
 
#modernized_footer > div > .rcs-container {
 margin-left: 0;
}
 
@media only screen and (max-width: 1023px) {
 #modernized_footer > div > .rcs-container {
 margin-left: -10px;
 margin-top: -20px !important;
}
 
#modernized_footer > div > .lcs-container {
 margin-left: 352px;
 margin-bottom: -293px;
 margin-top: -3px !important;
}
}
 
@media only screen and (max-width: 1083px) and (min-width: 1024px) {
#modernized_footer > div > .rcs-container {
 margin-left: -684px !important;
 width: 275px !important;
}
}
 
@media only screen and (max-width: 1083px) and (min-width: 1024px) {
#modernized_footer > div > .lcs-container {
 margin-left: 289px !important;
 width: 680px !important;
}
}
 
@media only screen and (min-width: 1084px) {
#modernized_footer > div > .rcs-container {
 margin-left: -724px !important;
}
}
 
#modernized_footer > div > div > div > div > div > a > picture > img {
 display: none;
}
 
/* Link text decoration removal for the footer */
 
.more-articles-button > p > a:hover,
#modernized_footer > div > div > a:hover {
 text-decoration: none !important;
}
* Next, add the following CSS in your wiki's Monobook.css page. It fixes the style of the wiki feed in Monobook.
/* Fixing the exclusive wiki feed */
 
@media only screen and (min-width: 1084px) {
#modernized_footer > div > .rcs-container {
 margin-left: -879px !important;
 margin-right: 859px;
 margin-top: -8px !important;
}
 
#modernized_footer > div > .lcs-container {
 margin-right: 0 !important;
}
 
.mw-customtoggle-myTable > figure > a > img {
 margin-top: -25px;
 margin-left: 40px !important;
}
 
div > div > #gallery-1 > div.wikia-gallery-item {
 display: none;
}
 
}
== Syntax ==
The following syntax is if the entire template wants to be used.
{{WikiFeed
|title = 
|wiki1 = 
|link1 = 
|wiki2 = 
|link2 = 
|wiki3 = 
|link3 = 
|wiki4 = 
|link4 = 
|image1 = 
|page1 = 
|image2 = 
|page2 = 
|image3 = 
|page3 = 
|image4 = 
|page4 = 
|image5 = 
|page5 = 
|image6 = 
|page6 = 
|image7 = 
|page7 = 
|image8 = 
|page8 = 
}}
Not all parameters are needed, but it is recommended to at least give it a title, feature at least one other wiki and 8 articles with images.
=== Legend ===
* title = The name that will be displayed in the header of the template.
* wiki(number) = The filename of the wiki spotlight image.
* link(number) = The link of the wiki spotlight image to the actual wiki.
* image(number) = The image displayed in a feature article.
* page(number) = The link to the featured article.
=== Notes ===
* Once the link for the featured article has been inserted in the template, it will make the article's image automatically linked to the article.
* The featured article link must have the exact name of the article.
* The wiki spotlight images must be at least 325px wide.
* The wiki spotlight link already has the w:c: prefix. For the wiki spotlight link, just add the community address without "wikia.com". For example, if the user wants to add a wiki spotlight to Community Central (with the address being "community.wikia.com"), just simply insert "community".
== Notes ==
* This template has a very fragile placement, as it has the width of both the left and right main page columns combined. It should be placed only on the main page and it shouldn't be inside the main page column tags.
* This isn't essential, but JustLeafy recommends placing this at the bottom of the main page, because according to JustLeafy, placing it on the top of the main page is inappropriate, because that's where the wiki introduction, statistics or essential links go to.
* Even though this template features multiple featured articles and wiki spotlights (or possibly associated wikis), this template is not an intended replacement for custom featured articles and custom associated wikis modules. Both can be kept.
Category:CSS
Category:Templates