Changes: Help:Main page column tags

Revision as of 23:08, 6 December 2020

This set of main page <tags/> allows for easier main page design and is the recommended method of creating layouts for desktop main pages.

Using the following tags, you can create a main page that will work with Fandom ads and will be compatible with future changes Fandom may need to make to the main page layouts.

<mainpage-leftcolumn-start />
   content in the left column
<mainpage-endcolumn />

<mainpage-rightcolumn-start />
   content in the right column
<mainpage-endcolumn />

How to use the tags

Main page tags editor — How main page tags may look in the editor

The "leftcolumn" tag starts the fluid width left column, and comes first:

<mainpage-leftcolumn-start />

The left column is ended by:

<mainpage-endcolumn />

Next, the following starts a 300px wide right column:

<mainpage-rightcolumn-start />

The right column is also ended by:

<mainpage-endcolumn />

After the end of the right column tag, you can place anything you wish, and make it 100% of the page's width. However, note that this is generally recommended against, especially on shorter pages. You will need to add the following to ensure it appears below the columns:

<br style="clear:both;"/>

Examples

Main page example layout — A screen shot of the demo community's main page.

This demo community's main page is set up to display this article and some placeholder content, to illustrate how the tags can be used:

https://demo.fandom.com

The main page tags in action on other wikis:

Further help and feedback

Browse and search other help pages at Help:Contents
Check Fandom Community Central for sources of further help and support
Check Contacting Fandom for how to report any errors or unclear steps in this article

@@ Line 1: / Line 1: @@
+{{tocright}}
-<mainpage-leftcolumn-start />
+This set of '''main page <tags/>''' allows for easier [[Help:Main page|main page]] design and is the recommended method of creating layouts for desktop main pages.
+Using the following tags, you can create a main page that will work with Fandom ads and will be compatible with future changes Fandom may need to make to the main page layouts.
-<div style="background-color:#BBC; color:#000; height:100px; padding:1em;">
-'''I am a box in the left column, currently set to 100 pixels tall.'''
+<pre style="width:275px;">
-Your wiki's title and welcome message could go here, or a cool title image. (The box is optional.)
-</div>
-<div style="background-color:#BCB; color:#000; margin-top:1em; padding:1em;">'''&nbsp;I am a sentence in the left column.'''</div>
-<div style="border:2px solid #BCB; color:#000; margin-top:1em; padding:1em;">
-'''I am a box containing content in the left column.'''
-==What are these columns about?==
-The set of '''main page <tags/>''' aid with main page design.
-Using the following tags, you can create a main page that will work with the new ads and will be compatible with any future changes Wikia may need to make to the main page layouts.
-<pre>
 <mainpage-leftcolumn-start />
-'''I am the left column'''
+   content in the left column
 <mainpage-endcolumn />
 <mainpage-rightcolumn-start />
-'''I am the right column'''
+   content in the right column
 <mainpage-endcolumn />
 </pre>
 ==How to use the tags==
+[[File:Main_page_tags_editor.png|thumb|350px|How main page tags may look in the editor]]
-The "leftcolumn" tag starts the 670px wide left column, and comes first:
+The "leftcolumn" tag starts the fluid width left column, and comes first:
-<pre><mainpage-leftcolumn-start /></pre>
+<pre style="width:275px;"><mainpage-leftcolumn-start /></pre>
-A column is ended by:
+The left column is ended by:
-<pre><mainpage-endcolumn /></pre>
+<pre style="width:275px;"><mainpage-endcolumn /></pre>
+Next, the following starts a 300px wide right column:
+<pre style="width:275px;"><mainpage-rightcolumn-start /></pre>
-Next, the following starts a 330px wide right column:
+The right column is also ended by:
-<pre><mainpage-rightcolumn-start /></pre>
+<pre style="width:275px;"><mainpage-endcolumn /></pre>
-Again, the column is ended by:
+After the end of the right column tag, you can place anything you wish, and make it 100% of the page's width. However, note that this is generally recommended against, especially on shorter pages. You will need to add the following to ensure it appears below the columns:
-<pre><mainpage-endcolumn /></pre>
+<pre style="width:275px;"><br style="clear:both;"/></pre>
+==Examples==
-After the end of the rightcolumn tag you can place anything you wish, and make them 100% page width. (Please note this is recommended against, especially on shorter pages.) However, you will need to add the following to ensure it appears below the columns:
+[[File:Main_page_example_layout.png|thumb|350px|A screen shot of the demo community's main page.]]
+This demo community's main page is set up to display this article and some placeholder content, to illustrate how the tags can be used:
+'''[[w:c:demo|https://demo.fandom.com]]'''
-<pre><br style="clear:both;"/></pre>
-</div>
-<mainpage-endcolumn />
-<mainpage-rightcolumn-start />
-<div style="background-color:#BBC; color:#000; height:250px; padding:1em;">'''I am a 330x250px or a 330x600px box in the right column.''' Wikia's ad will go here.</div>
-<div style="background-color:#BCC;  margin-top:1em; padding:1em;">'''I am a sentence in the right column.'''</div>
-<div style="margin-top:1em; padding:1em; border:2px solid black; margin:auto;text-align:center">
-This is a Featured Image<br />
-[[File:Greece-0723.jpg|270px]]</div>
-<div style="background-color:#CBB; color:#000; height:500px; margin-top:1em; padding:1em;">'''I am a very long sentence in a box with a height of 500px in the right column.''' Any sort of wiki content could go here -- a featured article or picture, a list of popular categories, an embedded widget, a video or poll or calendar -- anything you like.</div>
-<mainpage-endcolumn />
-<br style="clear:both;"/>
-<div style="background-color:#CCB; color:#000; height:50px; margin-top:1em; padding:1em;">'''&nbsp;I follow the last main page tag and the <nowiki><br style="clear:both;"/></nowiki> tag, and have a width of 100%.'''</div>
-==Main page tags in action==
+The main page tags in action on other wikis:
 * [[w:c:muppet|Muppet Wiki]]
-* [[w:c:windows|Windows Wiki]]
+* [[w:c:elderscrolls|Elder Scrolls Wiki]]
-* [[w:c:wowwiki|WoWWiki]]
+* [[w:c:youtube|YouTube Wiki]]
-* [[w:c:ikariam|Ikariam]]
 ==See also==
+*[[Help:Main page]]
-*[[Help:Main_page_column_tags/source]] which has all of the code we used on this page
-*[[Help:Galleries and slideshows]] to add cool images to your main page
+*[[Help:Galleries, Slideshows, and Sliders]] to add cool images to your main page
 *[[Help:Templates]] to create templates for things like "image of the day"
-*[[Help:Main page]]
+==Further help and feedback==
+{{Help and feedback section}}
+[[de:Hilfe:Hauptseiten-Tags]]
+[[es:Ayuda:Etiquetas para columnas de portada]]
+[[fr:Aide:Balises colonnes de page d'accueil]]
+[[it:Aiuto:Tag per le colonne della pagina principale]]
+[[ja:ヘルプ:メインページのカラムタグ]]
+[[ko:도움말:대문 열 태그]]
+[[pl:Pomoc:Kolumny na stronie głównej]]
+[[pt:Ajuda:Tags de coluna da página principal]]
+[[ru:Справка:Заглавная страница/теги колонок]]
+[[tr:Yardım:Ana sayfa sütun etiketleri]]
+[[vi:Trợ giúp:Đánh dấu cột trang chính]]
+[[zh:Help:首頁欄位標籤]]
+[[Category:Help|{{PAGENAME}}]]
+[[Category:Editing|{{PAGENAME}}]]
+[[Category:Source editing|{{PAGENAME}}]]
-[[de:Hilfe:Spalten-Formatierungs-Tags]]
+[[Category:Administration help|{{PAGENAME}}]]
-[[es:Ayuda:Main page column tags]]
-[[pl:Pomoc:Kolumny na stronie głównej]]
-[[Category:Help|Main Page Column Tags]]
-[[Category:Administration help|Main Page Column Tags]]