Help:Wiki University HTML--Sidebars

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

WHAT IS A SIDEBAR

  • The light gray elongated box to the left is a sidebar.
  • Sidebars contain a list of links to other pages that go into detail of the subject of the page you are on.
  • A place where you can navigate to the other pages without having to search for them.
  • Sidebars are very similar to infoboxes; they are templates as well.

SIDEBARS ARE TEMPLATES

  • Side bars are really only templates with a special use.

HOW SIDEBARS DIFFER FROM INFOBOXES

  • They are usually saved on the left side of the page as opposed to the right for infoboxes.
  • They usually contain a list of clickable links (internal or external), as you see, on the sidebar to the left.
  • They sometimes have a place to add announcements or additional information of interest.
  • They are floated to the left so text and other material may float alongside on the right.

HOW TO CREATE A SIDEBAR

  • Sidebars are templates and created in the same manner.
  • If the sidebar only contains a list of links, using list format will do in most cases.
  • The sidebar on this page was created with a one column table in order to generate a sortable list of internal links.

ADDING NEWS AND EVENTS

  • Sometimes these sidebars allow for announcements or additional information to be added and edited. Check out County Cork Genealogy. If there were any announcements, they would be posted under News and Events on the sidebar on that page.
  • To add information to sidebars, we use our parameter coding.

Let's create a sidebar with the ability to add announcements and we will format it with a one column table:

News and Events
News and events here
Topics
  • Topic one
  • Topic two
Did You Know?
Add items of interest here.

Here is the coding; it should look familiar:

<table style="width:150px; background-color:#F4F1FB; border:1px solid gray; float:left"
<tr>
<td style="width:140px; text-align:center; background-color:#E6E6FF">News and Events</td>
</tr>
<tr>
<td>{{{news and events|Add news or events here}}}</td>
</tr>
<tr>
<td style="width:140px; text-align:center; background-color:#E6E6FF" > Topics</td>
</tr>
<tr>
<td>
*Topic one
*Topic two
*
*
*
</td>
</tr>
<tr>
<td style="width:140px; text-align:center; background-color:#E6E6FF" > Did You Know?</td>
</tr>
<tr>
<td>{{{items of interest|Add items of interest here.}}}</td>
</tr>
</table>


SAVING THE SIDEBAR

  • Be sure to include the word "sidebar" somewhere in your title so people will know what the template is about.

PLACING THE SIDEBAR

  • Same procedure as with infoboxes.
  • This time you will add the parameters for News and Events and Additional Information:
{{Sample sidebar

| News and Events =
| Additional Information =

}}

TRY THESE OUT . . . .

Tests.gif
Exercises

Here is an existing infobox. Copy and paste this coding in your sandbox and fill out the information for the county you were born in:

  • This an existing infobox for US Counties. You will not need the brackets of word File to place the required images.

{{Infobox U.S. County
| county =
| county_map =
| state =
| state_map =
| founded year =
| founded date =
| seat wl =
}}


Quick Quiz
  • Once the information after the equal signs is entered and saved, there is no changing the parameters.
A. True
B. False
  • Infoboxes can only be used on county pages.
A. True
B. False
  • Infoboxes are limited just to genealogical organizations.
A. True
B. False

Navigation menu