Help:Infobox

From UBC Wiki
Jump to: navigation, search

What is an Infobox?

An infobox is a fixed-format table usually added to the top right-hand corner of articles to consistently present a summary of some unifying aspect that the articles share and sometimes to improve navigation to other interrelated articles. Infobox are often like fact sheets, or sidebars, in magazine articles. They quickly summarize important points in an easy-to-read format. On the UBC Wiki they are often used to help organize course pages and projects.

Example of Infobox:

Step 1:Open this documentation on separate tab, and use the Create an infobox using the box below

From the box below, type the name of the infobox.For example: "Resource Guide" and click on create a new infobox


Step 2:Create a documentation for the infobox

At this point, you have already created an infobox. It will look something like the screenshot below. The next step is to create a documentation for the infobox.

1.
Click on the create button to create the template documentation
Click on create beside the green Template documentation box.

2. On the template documentation page that you are about to create, copy and paste the code below. Replace the part of the code that says Put-the-name-of-the-infobox-here to the page of your infobox. (For example, if your inbox is called Resource Guide, then it will look something like {{Infobox Resource Guide}}

This is the template page for resources related to the Name of the resource/course. 

==Usage==
This  template is a general infobox used for resources related to the website page 

==How to use==
To include an Infobox name-of-the-infobox in your article, copy and paste the following code onto your page. 

<nowiki>{{Infobox Put-the-name-of-the-infobox-here}}</nowiki>

==Example==

{{Infobox Put-the-name-of-the-infobox-here}}

3. Edit the message according to the template that you are creating. Then press save


4. After you save, it will look something like below. Then click on the breadcrumb below the title of the page to go back to the template.

click on the breadcrumb below the title of the page to go back to the template.

5.When you go back to the template, your template page will look something like the image below:

When you go back to the template, your template page will look something like the image

Step 3: Customize the infobox template

Now the final step is to customize the infobox template. Follow the step below depending on the text you would like to change:

Replace the text(Title, subtitle and headings within the infobox)

explanation diagram on how to replace text within the infobox template


Replace the Title text

Replace the text that says Simple<br/>Infobox with the title of the Infobox

 Simple<br/>Infobox

For example,if you want to change the title to Resource Guide Infobox:

 Resource Guide<br/>Infobox

Replace the subtitle text

Replace the text that says UBC Project Title with the subtitle of the Infobox

UBC Project Title

For example, if you want to change the subtitle text to Resource Guide, it will look something like:

Resource Guide

Replace the project description text

Replace the text that says "Welcome to the wiki for our project.... this specific project" with the project description

Welcome to the wiki for our project. This wiki is intended to be a space for to share and to contribute knowledge and resources related to this specific project.

For example, if you want to add your project description, it will look something like

 Welcome to the Resource Guide wiki page. This wiki is intended to be a space for to share and to contribute knowledge and resources related to Resource Guide.

Replace the "associated page" text

Replace the text that says "associated page" with another text

'''Associated Pages'''

For example, if you want to change the Associated Pages text to Related Pages, it will look something like this:

 '''Related Pages'''

Replace the link within the text

Replace the link that says

*[[Help:Main|Link to Specific Page]]
*[[Help:Main|Another Link]]
with another link.


For example:

*[[Help:Contents|Wiki Help]]
*[[Documentation:Resource_Guide|Resource Guide]]
*[[Documentation:Resource_Guide/Getting Started|Getting Started]]

Replace the image within the infobox

explanation diagram on how to replace image within the infobox template


In order to replace an image, replace:

[[Image:Card_Catalogue.jpg|264px]]

with another image. For example, if you want to replace an image to http://wiki.ubc.ca/File:Open_UBC_card.png , it will look like this:

 [[Image:Open_UBC_card.png|264px]]

To learn how to customize the image more, please refer to Help:Adding_Media/Images_and_Pictures#Adding_a_Picture_to_a_UBC_Wiki_Page_using_wikitext

Change the color within the infobox

explanation diagram on how to change color within the infobox template

You can change the color within the infobox by changing the part that says background:#.... . You can replace color with any HTML/Hex color code. To look for HTML color code, use the online picker here https://htmlcolorcodes.com/color-picker/

For example, if I want to change the background color in the infobox title text to dark red (Hex color code - #5D1000), and subtitle text and "Associated Pages" to lighter red (Hex color code - #BD5039 ), it will will look something like this:


<includeonly>
{|  class="infobox"
! colspan="2" style="background:#5D1000; width:200px; color: white; font-weight:normal; font-size:11pt; padding-top: 0.5em; padding-bottom: 0.5em;" | Simple<br/>Infobox
|-
!scope="row" colspan="2"| [[Image:Card_Catalogue.jpg|264px]]
|-
! colspan="2" style="background:#BD5039; font-weight:normal; width:200px; color: white; font-size:10pt;" | UBC Project Title
|-
! colspan="2" style="font-size:9pt; font-weight:normal; width:200px; text-align:left; padding:0.5em;" | Welcome to the wiki for our project. This wiki is intended to be a space for to share and to contribute knowledge and resources related to this specific project.
|-
! colspan="2" style="background:#BD5039; width:200px; font-weight:normal; font-size:10pt; color: white;" | '''Associated Pages'''
|-
|
| style="font-size:9pt;" |
*[[Help:Main|Link to Specific Page]]
*[[Help:Main|Another Link]]
|}
</includeonly>

<noinclude>
[[Category:Infobox Templates]]{{documentation}}
</noinclude>