User:42/ExamplePageLayoutGuide

From Guild Wars Wiki
Jump to navigationJump to search

Introduction[edit]

This guide is intended to work hand in hand with this Example Page Layout. This guide will show you the methods used to obtain the layout design used on that page, and hopefully be able to help you in re-creating a similar design for your user page, if you are so inclined.

Please see the links list at the end of this article for the references and sources used in the design of this layout.

This layout design is adapted heavily from Linsey Murdock's user page design. I have changed the user name in the examples for reference purposes, and changed some basic design elements and content for the purpose of this guide. Please feel free to adjust the design when you use it to suit your own personality, purposes, and needs. All I ask is that you give Linsey credit for the original design layout on your effort. Any help I have been able to give is largely due to using her page layout design.

The use of this layout makes extensive use of the transclusion feature available on the wiki. In a nutshell, transclusion is the adding of content from one page to another page. For more information on transclusion, see the link provided at the end of this article.

The creation of subpages containing this content will be required. Some pages are the formatting pages and are needed. The information specific pages and content are left up to the user/designer.


The following user subpages will need to be created to recreate this example. The text needed on each particular page is also listed. Feel free to adjust any information subpages included and text to suit yourself.

Layout and Design Pages[edit]

  • ExampleTabs
    • Purpose - To give a layout design consistency to any tabs used on your page.
{{User:42/ExampleTabsTop}}
{{User:42/ExampleTab{{ #ifeq:{{{This}}}|1|1|2}}|{{{1}}}}}
{{ #if:  {{{2|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|2|1|2}}|{{{2}}}}}| }}
{{ #if:  {{{3|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|3|1|2}}|{{{3}}}}}| }}
{{ #if:  {{{4|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|4|1|2}}|{{{4}}}}}| }}
{{ #if:  {{{5|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|5|1|2}}|{{{5}}}}}| }}
{{ #if:  {{{6|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|6|1|2}}|{{{6}}}}}| }}
{{ #if:  {{{7|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|7|1|2}}|{{{7}}}}}| }}
{{ #if:  {{{8|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|8|1|2}}|{{{8}}}}}| }}
{{ #if:  {{{9|}}} |{{User:42/ExampleTab{{ #ifeq:{{{This}}}|9|1|2}}|{{{9}}}}}| }}
{{User:42/ExampleTabsBottom}}<noinclude>
Usage: 1 to 9 parameters, for each tab to put on the page. After the last item, whichever parameter is the current page is indicated by '''This=''' and the tab number to mark as the current tab, from 1 to 9.  '''This=1''' or '''This=5''' etc.
</noinclude>
  • ExampleTabsBottom
    • Purpose - Formatting in style and color for the bottoms of the tab area (top of the main section of the rest of your page) in use on your specific design. This color must match the one in your main user page style section, or the line surrounding your main page area will not match.
<includeonly>| style="border-bottom:1px solid #A3B1BF" width="3000" |  
|}</includeonly><noinclude>
<br clear="all">
==Usage==
To create a set of tabs, use these four elements. Keep the page tabs in the same order on all pages and use "Tab1" for the current page.

{{[[User:42/ExampleTabsTop]]}}<br>
{{[[User:42/ExampleTab1]]|Current page name}}<br>
{{[[User:42/ExampleTab2]]|Other page name(s)}}<br>
{{[[User:42/ExampleTabsBottom]]}}
</noinclude>
{{User:42/Tabs
|[[User:42|Tab 1]]
|[[User:42/ExampleTab2|Tab 2]]
|[[User:42/ExampleTab3|Tab 3]]
|[[User:42/ExampleTab4|Tab 4]]
|[[User:42/ExampleTab5|Tab 5]]
|[[User:42/ExampleTab6|Tab 6]]
|[[User:42/ExampleTab7|Tab 7]]
|[[User:42/ExampleTab8|Tab 8]]
|[[User:42/ExampleTab9|Tab 9]]
|This={{{This}}} }}<noinclude>
This page is used to make the tabs consistent on all pages.  

To use this page, set '''This=n''' where n is the tab number of the page that calls this macro, e.g '''This=5''' or '''This=8'''.  Up to 9 separate tabs can be used with this design.  Add, rename, and/or remove tabs to suit your purposes.  Just remember, the maximum number allowed is 9 total tabs.

This page's content was adapted from the [[w:Wikipedia:Tutorial|Wikipedia editing guide]], and from [[User:Linsey_Murdock|Linsey Murdock's]] user page.
</noinclude>
<includeonly>| style="background-color: #f1f8ff; border:solid 1px #A3B1BF; line-height:0.95em; -moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px; border-bottom:0; font-weight:bold; max-height: 5px;" width="150" | {{{1|Tab 1}}}| style="border-bottom:1px solid #A3B1BF" width="3" |  </includeonly><noinclude><br clear="all">
==Usage==
To create a set of tabs, use these four elements. Keep the page tabs in the same order on all pages and use "Tab1" for the current page.

{{[[User:42/ExampleTabsTop]]}}<br>
{{[[User:42/ExampleTab1]]|Current page name}}<br>
{{[[User:42/ExampleTab2]]|Other page name(s)}}<br>
{{[[User:42/ExampleTabsBottom]]}}
</noinclude>
<includeonly>| style="background-color:#CEE0F2; font-size:90%; border:solid 1px #A3B1BF; line-height:0.95em; -moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;  border-bottom:1; font-weight:bold; max-height:5px;" width="150" | {{{1|Tab 2}}}
| style="border-bottom:1px solid #A3B1BF" width="3" | </includeonly><noinclude>
<br clear="all">
==Usage==
To create a set of tabs, use these four elements. Keep the page tabs in the same order on all pages and use "Tab1" for the current page.

{{[[User:42/ExampleTabsTop]]}}<br>
{{[[User:42/ExampleTab1]]|Current page name}}<br>
{{[[User:42/ExampleTab2]]|Other page name(s)}}<br>
{{[[User:42/ExampleTabsBottom]]}}
</noinclude>
  • ExampleTabsTop
    • Purpose - Formatting in style and color for the background behind the tabs in use on your specific design. Should match the general background of your page (if not white, then adjust this background setting).
__NOTOC__ __NOEDITSECTION__
{|style="background:#FFF; text-align:center; line-height:1px;" width="100%" cellspacing="0" cellpadding="0" border="0" |<noinclude>
<br clear="all">
==Usage==
To create a set of tabs, use these four elements. Keep the page tabs in the same order on all pages and use "Tab1" for the current page.

{{[[User:42/ExampleTabsTop]]}}<br>
{{[[User:42/ExampleTab1]]|Current page name}}<br>
{{[[User:42/ExampleTab2]]|Other page name(s)}}<br>
{{[[User:42/ExampleTabsBottom]]}}
</noinclude>

Information Pages[edit]

  • ExamplePersonalInfo
<div style="background-color: #cee0f2; margin-bottom:3px; padding: 1em 1em; font-size: 100%; border: 1px solid #A3B1BF; border-bottom:2px solid #A3B1BF;  border-right:2px solid #A3B1BF; -moz-border-radius: 15px;"><span style="font-size: larger; font-weight: bold;">Personal Information</span><br>
If you so choose, any information you would like to let others know about yourself would go here.  What interests you have, what other online or offline games you like, etc.  Feel free to have fun, let your game hair hang down.

''The best experience of life is the living of it.  Don't get so caught up in your job and your situation that you forget to enjoy your life.'' - '''42'''
<small>Feel free to use the above quote on your page.  All I ask is that you give me credit for it.</small>
</div>
<div style="background-color: #cee0f2; margin-bottom:3px; padding: 1em 1em; font-size: 100%; border: 1px solid #A3B1BF; border-bottom:2px solid #A3B1BF;  border-right:2px solid #A3B1BF; -moz-border-radius: 15px;"><span style="font-size: larger; font-weight: bold;"> Contacting me</span><br>
You would put any contact information someone could use to get a hold of you on this page.  If you have a twitter or facebook link, this would be a good place to have them.

Use the following text to include a quick link edit tab for you to make changes to this box easier on yourself.  This information would go between the "Contacting me" and <nowiki></span> tag.<br>

<small>[http://wiki.guildwars.com/index.php?title=User:User_Example/User_contact_subpage_name&action=edit +]</small>

</div>
</nowiki>
<div style="background-color: #cee0f2; margin-bottom:3px; padding: 1em 1em; font-size: 100%; border: 1px solid #A3B1BF; border-bottom:2px solid #A3B1BF;  border-right:2px solid #A3B1BF; -moz-border-radius: 15px;"><span style="font-size: larger; font-weight: bold;">My Work<small>[http://wiki.guildwars.com/index.php?title=User:User_Example/ExampleWork&action=edit +]</small></span><br>

I have adapted this example heavily from [[User:Linsey_Murdock|Linsey Murdock's]] user page.  Any errors are my own.  Feel free to edit this text on your page to whatever suits you better.

If you have any wiki projects or in game working projects you are doing, this would be a good place to list them.  The page that Linsey has on her page has a table with her projects listed.  If you have enough you could do the same, or not.

'''Here is an example of a table:'''<br>
{| style="background: #deedf2; padding: 3px; border: 1px solid #a3b1bf" cellpadding="3" |
| Project || Project || Project
|-
| Project || Project || Project
|-
| Project || Project || Project
|-
| Project || Project || Project
|-
| Project || Project || Project
|-
| Project || Project || Project
|-
| Project || Project || Project
|}

This is some additional useless text.

Even '''''more''''' useless text goes here.  Feel free to make it suit your uses, or to remove this totally.
</div>
  • HelpfulLinks
    • This page may not accurately reflect the page section you see at a particular time, as I will be updating this page as I find more useful links to add to my user page.
<div style="background-color: #cee0f2; margin-bottom:3px; padding: 1em 1em; font-size: 100%; border: 1px solid #A3B1BF; border-bottom:2px solid #A3B1BF;  border-right:2px solid #A3B1BF; -moz-border-radius: 15px;"><span style="font-size: larger; font-weight: bold;">Helpful Links</span><br>

* Links to some of the pages in my user area
** [[User:42/Sandbox| My Sandbox]]
** [[User:42/Charr_Boss_list|Charr Boss table]]

* Links to the GWW, and Wiki sites I have used for reference and on the design of these pages
** [[Guild_Wars_Wiki:Formatting/Professions|Professions icons and colors]]
** [[Guild_Wars_Wiki:Formatting|Formatting]]
** [[m:Wiki_color_formatting_help|Wiki color help]]
** [[m:Help:Table Metawiki|Table Help]]
** [[m:Wikipedia:Tutorial|Wikipedia Tutorial]]
** [[w:Wikipedia:Transclusion|Wiki Transclusion Info]]
** [[w:Template:PageTabs|Wiki Page Tabs Template]]
** [[w:Wikipedia:Reference_desk|Wiki Reference Desk]]

</div>



The following links were used, and are listed here for reference for future use of the editor of this page, and anyone interested in my sources.