Template:NavBar: Difference between revisions

From Artea Station
Jump to navigation Jump to search
m (Hid the bottom box if the {{{tabs}}} parameter is undefined)
m (Fixed a really dumb error)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="border-radius: 1em; margin: .35em 1em 1em 0em; background: {{{color|#444}}}; width: 100%;  box-shadow: 0 0 .5em #888;">
<div style="border-radius: 1em; margin: .35em 1em 1em 0em; background: {{{color|#444}}}; width: 100%;  box-shadow: {{#if:{{{tabs|}}}|0 0 .5em #888|0 0 .5em #999}};">
<div style="background: {{{color|#444}}}; border-radius: 1em 1em 0 0; color: #FFF; padding: .3em .3em .3em .3em; font-size: 110%;"><center><span style="float:left; color: #FFF; margin-left: .42em;">{{#fas:compass}}</span>'''Navigation bar'''<span style="float:right; color: #FFF; margin-right: 0.42em;">{{#fas:compass}}</span></center></div>
<div style="background: {{{color|#444}}}; border-radius: 1em 1em 0 0; color: #FFF; padding: .3em .3em .3em .3em; font-size: 110%;"><center><span style="float:left; color: #FFF; margin-left: .42em;">{{#fas:compass}}</span>'''Navigation bar'''<span style="float:right; color: #FFF; margin-right: 0.42em;">{{#fas:compass}}</span></center></div>
{{#if:{{{tabs|}}}|<div style="background: #FFF; border-radius: 0 0 1em 1em;">
<div style="background: #FFF; border-radius: 0 0 1em 1em;">
<div style="border: solid {{{color|#444444}}}8e; border-width: 0 0 .15em 0;"></div>
<div style="border: solid {{{color|#444444}}}8e; border-width: 0 0 .15em 0;"></div>
<div style="display: flex">
<div style="display: flex">
<!-- Cell 1 start -->
<!-- Cell 1 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%;">
<div style="padding: .5em; background: {{{color|#444444}}}3e; width: 20%; color: #FFF; font-size: 105%; border-radius: {{#if:{{{tabs|}}}|0 0 0 0;| 0 0 0 1em;}}; color: #202122">
<center>''' [[Main Page|Return to Main page]]'''</center>
<center>''' {{{MainpageLink|[[Main Page|Return to Main page]]}}}'''</center>
</div>
</div>
<!-- Cell 1 end -->
<!-- Cell 1 end -->
<!-- Cell 2 start -->
<!-- Cell 2 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%">
<div style="padding: .5em; background: {{{color|#444444}}}3e; width: 20%; color: #FFF; font-size: 105%; color: #202122">
<center>'''[[Rules]]'''</center>
<center>'''[[Policy portal]]'''</center>
</div>
</div>
<!-- Cell 2 end -->
<!-- Cell 2 end -->
<!-- Cell 3 start -->
<!-- Cell 3 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%">
<div style="padding: .5em; background: {{{color|#444444}}}3e; width: 20%; color: #FFF; font-size: 105%; color: #202122">
<center>'''[[Jobs]]'''</center>
<center>'''[[Jobs portal]]'''</center>
</div>
</div>
<!-- Cell 3 end -->
<!-- Cell 3 end -->
<!-- Cell 4 start -->
<!-- Cell 4 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%">
<div style="padding: .5em; background: {{{color|#444444}}}3e; width: 20%; color: #FFF; font-size: 105%; color: #202122">
<center>'''[[Guides]]'''</center>
<center>'''[[Guides portal]]'''</center>
</div>
</div>
<!-- Cell 4 end -->
<!-- Cell 4 end -->
<!-- Cell 5 start -->
<!-- Cell 5 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%;">
<div style="padding: .5em; background: {{{color|#444444}}}3e; width: 20%; color: #FFF; font-size: 105%; border-radius: {{#if:{{{tabs|}}}|0 0 0 0;| 0 0 1em 0;}}; color: #202122">
<center>'''[[Lore]]'''</center>
<center>'''[[Lore portal]]'''</center>
</div>
</div>
<!-- Cell 5 end -->
<!-- Cell 5 end -->
</div>
</div>
<div style="border: solid {{{color|#444444}}}8e; border-width: 0 0 .15em 0;"></div>
{{#if:{{{tabs|}}}|<div style="border: solid {{{color|#444444}}}8e; border-width: 0 0 .15em 0;"></div>
{{{tabs}}}
{{{tabs}}}|}}
</div></div>
|<div style="background: #FFF; border-radius: 0 0 1em 1em;">
<div style="border: solid {{{color|#444444}}}8e; border-width: 0 0 .15em 0;"></div>
<div style="display: flex">
<!-- Cell 1 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%; border-radius: 0 0 0 1em;">
<center>''' [[Main Page|Return to Main page]]'''</center>
</div>
<!-- Cell 1 end -->
<!-- Cell 2 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%">
<center>'''[[Rules]]'''</center>
</div>
<!-- Cell 2 end -->
<!-- Cell 3 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%">
<center>'''[[Jobs]]'''</center>
</div>
<!-- Cell 3 end -->
<!-- Cell 4 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%">
<center>'''[[Guides]]'''</center>
</div>
<!-- Cell 4 end -->
<!-- Cell 5 start -->
<div style="padding: .5em; background: {{{color|#444444}}}5e; width: 20%; color: #FFF; font-size: 105%; border-radius: 0 0 1em 0;">
<center>'''[[Lore]]'''</center>
</div>
<!-- Cell 5 end -->
</div>
}}
</div></div><noinclude>[[Category:Styling Templates]]
</div></div><noinclude>[[Category:Styling Templates]]
<div style="background: red; color: #FFF;"><center>'''THIS TEMPLATE SHOULD NOT BE EDITED UNLESS ABSOLUTELY NESSESARY'''</center></div>
<div style="background: red; color: #FFF;"><center>'''THIS TEMPLATE SHOULD NOT BE EDITED UNLESS ABSOLUTELY NESSESARY'''</center></div>
Line 70: Line 39:


*<code>color</code> Controls the color in this template.
*<code>color</code> Controls the color in this template.
*<code>tabs</code> Controls the lower open box on this template, input for this is left open but should be used to create buttons to link to different parts of the wiki. See [[Template:NavBar#A_slightly more_advanced_example| The example]] for how to do this.
*<code>MainpageLink</code> Controls the main page link. This should either be: <code><nowiki>[[Main Page]]</nowiki></code> or <code><nowiki>[[Main Page|Return to Main page]]</nowiki></code>.
*<code>tabs</code> Controls the lower open box on this template, input for this is left open but should be used to create buttons to link to different parts of the wiki. See the examples for how to do this.


=== Use case examples ===
=== Use case examples ===

Latest revision as of 00:20, 19 March 2023

Navigation bar
THIS TEMPLATE SHOULD NOT BE EDITED UNLESS ABSOLUTELY NESSESARY

How to use this template

This template has several parameters and all of them will be displayed in the example below.

  • color Controls the color in this template.
  • MainpageLink Controls the main page link. This should either be: [[Main Page]] or [[Main Page|Return to Main page]].
  • tabs Controls the lower open box on this template, input for this is left open but should be used to create buttons to link to different parts of the wiki. See the examples for how to do this.

Use case examples

{{Template:NavBar
| color = #005C53
| tabs = PLACEHOLDER!
}}

These parameters will result in the following:
Navigation bar

A slightly more advanced example

{{Template:NavBar
| color = #005C53
| tabs = 
<div style="display:flex;">
<div style="background: #2A96339e; width: 33.3%; border-radius: 0 0 0 1em;">TEST BUTTON 1</div>
<div style="background: #BA56569e; width: 33.3%; border-radius: 0 0 0 0;">TEST BUTTON 2</div>
<div style="background: #127BB79e; width: 33.4%; border-radius: 0 0 1em 0;">TEST BUTTON 3</div>
</div>
}}

These parameters will result in the following:
Navigation bar
TEST BUTTON 1
TEST BUTTON 2
TEST BUTTON 3
Retrieved from "https://artea-station.net/wiki/index.php?title=Template:NavBar&oldid=134"