Open main menu


Purpose

This template is used to create a hidden dropdown area that becomes visible after the user selects a keyword on the page. There are many different parameters that can be passed into this template, see the Usage section below for details. It is important to understand the structure of dropdown menus in order to get this template to work properly. The most important thing to remember is that every time this template is used, make sure to also close the dropdown area by adding a call to {{Dropdown end}}.

Usage

To use this template insert the code {{Dropdown|parameters=}} on a page, with a combination of the following parameter:

Page title=|
Page title will change the page title from the URL to whatever is set as Page title. For example, {{Dropdown|Page title=Wales Research Page|}}
Section title=|
Section title size=|
Section title will output the text that you enter, and will use Section title size as the text size value. Section title size must be a number from 1-5, since it will use this number to generate the size of the text using <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Following are the current text sizes for numberes 1-6:

This is text size 1, including the underline across the width of the section

This is text size 2, including the underline across the width of the section

This is text size 3

This is text size 4

This is text size 5
This is text size 6

Section text=|
Section text size=|
Section text will output the text that you enter and will use Section text size as the text size value. Section text size must be a number from 1-5...please refer to Section title size=| above, for a detailed explanation of font sizes. At the moment, Section text and Page text are identical, placing text at the top of the current working area. This may change in the future with different sizes based on which text is being defined.
example:
{{Dropdown|
  Section title=Wales Research Page|
  Section title size=4|
  Section text=Welcome to the research page for Wales|}} 
{{Dropdown end}}
Page text=|
Page text size=|
Page text can be as much text as you need in order to explain something. It will be put above the Dropdown area. If you wish to put a carriage return in the middle of the text, use <br>. The text size that will be used will be <p>, unless Page text size is specified. Page text size must be a number from 1-5...please refer to Section title size=| above, for a detailed explanation of font sizes.
Begin text=|
Begin text size=|
Begin text will place text immediately after the dropdown keyword, and will be visible after the user has selected the keyword to open up the dropdown area. If no Begin text size is used, <p> will be used to define the text. Please refer to Section title size=| above, for a detailed explanation of font sizes.
Page image=|
Page image will place an image on the page, exactly as you specify the image. In other words, use wiki code to define the Page image.
example:
{{Dropdown|
  Page image=[[File:Wales Burial.jpg|thumb|right]]|}} 
{{Dropdown end}}
Dropdown title=|
Dropdown title will be the keyword displayed that the user must select in order to open up the dropdown area.
example:
{{Dropdown|
  Dropdown title=Birth|}} 
{{Dropdown end}}
Dropdown text style=|
Dropdown text style defines how the text for the Dropdown title will look. If you do not use this parameter, <p> will be used. If you wish to have the dropdown look like a link, you can use the following.


example:
{{Dropdown|
  Dropdown title=Birth|
  Dropdown text style=font-size:small !important; color:#0B0BEC !important; display:inline-block; font-weight:bold;|}}
{{Dropdown end}}
Previous dropdown title=|
Previous dropdown title is used when you create dropdown areas inside of dropdown areas. For example, when you create 3 top-level options such as Birth, Marriage and Death, and then create dropdown areas within each of those 3 top-level options, you will need to use the this template. In the code that creates the dropdown area, a proper name is assigned to the area, so when the keyword is selected, the wiki knows exactly which area is to be opened or closed. These areas are named based on the title (or keyword) given to that particular dropdown areas, however, sometimes there are duplicate keywords that are used on the same page. (Example: Under Birth, Marriage and Death, you may want to create dates like '1850 to 1900', as keywords under all three of the main options. In this case, when you create the 2nd level dropdown using these duplicate keywords, you must also define the keyword that was used as the top-level option.
example:
{{Dropdown|
  Dropdown title=1850 to 1900|
  Previous dropdown title=Birth|}} 
{{Dropdown end}}
{{Dropdown|
  Dropdown title=1850 to 1900|
  Previous dropdown title=Marriage|}} 
{{Dropdown end}}
and
{{Dropdown|
  Dropdown title=1850 to 1900|
  Previous dropdown title=Death|}}
{{Dropdown end}}


Troubleshooting

Text styles not working correctly
Due to layering of css files in php, sometimes another css file may take higher priority than specific code defined on a page. If this happens, you may not see the style that you defined, but will see whatever css file code has been defined as a higher priority. In order to fix this issue, add !important after each style that you define. This forces your style to take priority over any other style defined in the css code.
example:
{{Dropdown|
  Dropdown title=Section 1|
  Dropdown text style=font-size:small !important; color:#0B0BEC !important; text-decoration:underline !important; display:inline-block; font-weight:bold;|
}}

Dropdown areas not working

If you are unable to get the dropdown areas to work correctly, there are several things that you should verify.

  1. Verify that all parameters passed into the Dropdown template are spelled correctly, with correct lowercase and uppercase letters.
  2. If any of the keyword links you have created are red in color, that means that the call to the template is not recognized. Check spelling and spacing of the template name.
  3. Make sure all calls to {{Dropdown|}} are coupled with a call to {{Dropdown end|}}, however, you must include all information inside the dropdown area BEFORE {{Dropdown end|}}.

Code Example

Here's a simple example of code, which can be used to create your own dropdown area on a page.

{{Dropdown|
  Section title=Section Title Here|
  Section title size=3|  <!-- size h3 -->
  Section text=Section text goes here to introduce the page to the user|
  Dropdown title=Section 1|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Begin text=This text will only be displayed after Section 1 has been selected|
}}

{{Dropdown|
  Dropdown title=   Subsection 1|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Previous dropdown title=Section 1|
  Begin text=This text only displays after Section 1 -> Subsection 1 has been selected|
}}
Inside each dropdown area, you can place images, links or additional dropdown options.
{{Dropdown end}}

{{Dropdown|
  Dropdown title=   Subsection 2|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Previous dropdown title=Section 1|
  Begin text=   This text only displays after Section 1 -> Subsection 2 has been selected|
}}
Inside each dropdown area, you can place images, links or additional dropdown options.

{{Dropdown end}}

{{Dropdown end}} <!-- this closes the very first dropdown for Section 1 -->  
<hr>
{{Dropdown| <!-- Note: no section title or text here -->
  Dropdown title=Section 2|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Begin text=This text will only be displayed after the Section 2 has been selected|
}}

{{Dropdown|
  Dropdown title=Subsection 1|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Previous dropdown title=Section 2|
  Begin text=This text only displays after Section 2 -> Subsection 1 has been selected|
  }}
Inside each dropdown area, you can place images, links or additional dropdown options.
{{Dropdown end}}

{{Dropdown|
  Dropdown title=Subsection 2|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Previous dropdown title=Section 2|
  Begin text=This text only displays after Section 2 -> Subsection 2 has been selected|
}}
Inside each dropdown area, you can place images, links or additional dropdown options.
{{Dropdown end}}
{{Dropdown end}} <!-- this closes the definition for Section 2 -->  
<hr>

{{Dropdown| <!-- Note: no section title or text here -->
  Dropdown title=Section 3|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Begin text=This text will only be displayed after the Section 2 has been selected|
}}

{{Dropdown|
  Dropdown title=Subsection 1|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Previous dropdown title=Section 3|
  Begin text=This text only displays after Section 3 -> Subsection 1 has been selected|
  }}
Inside each dropdown area, you can place images, links or additional dropdown options.
{{Dropdown end}}

{{Dropdown|
  Dropdown title=Subsection 2|
  Dropdown text style=font-size:small; color:#0B0BEC; text-decoration:underline; display:inline-block; font-weight:bold;|
  Previous dropdown title=Section 3|
  Begin text=This text only displays after Section 3 -> Subsection 2 has been selected|
}}
Inside each dropdown area, you can place images, links or additional dropdown options.
{{Dropdown end}}

{{Dropdown end}} <!-- this closes the definition for Section 3 -->