Make a portal

Wikiversity portal pages are directories of Wikiversity content, providing browsers of Wikiversity content with organized groups of links to related pages. A relatively simple way to make a portal is discussed at How to start a portal. This page is a learning resource that helps Wikiversity participants learn how to create more complex portals that have tabs (for example, see Portal:Social entrepreneurship).

File:Anothertabstyle.png

Example of tabs used on a portal page. See Portal:Social entrepreneurship. Clicking on one of the links in a "grayed out" tab takes you to another page of the portal where the appearance of that tab is different.

What are tabs?

The "edit this page" tab

Wikiversity participants are familiar with tabs because most wiki pages have tabs at the top of the page that contain links to other pages. An example is the "edit this page" tab. Tabs do not have to go right at the top of the page. The first Wikiversity page with an added set of tabs slightly down the page was Wikiversity:Introduction. Such tabs allow a small group of related pages to all link to each other in a very clear and obvious way.

File:Tabsexample.png

Example of tabs (yellow rectangles) that appear when you click on the links. See Wikiversity:Introduction.

Why use tabs on portal pages?

File:Redlinksexample.png

Example of what a newly created portal page looks like (made with {{subst:Tabbed portal}}).

Wiki websites can have many thousands of pages. Providing directories that efficiently guide readers to the pages they are interested in is a challenge. If there are a large number of related pages, a single portal page might become too cluttered when trying to point to all the related pages. In order to deal with this problem one option is to create hierarchies of portal pages. Using tabs is one way to spread the clutter of one large portal page over several related pages.

Portals with tabs

An example of a Wikipedia portal page that at one time used tabs is Portal:Free software. The rest of this page is a guide to how to create a portal with tabs. Specifically, these instructions are for a portal with three pages that are all linked to each other by prominent links located in tabs.

Start with Template:Tabbed portal.

Decide on the name of the new portal. Open an edit window for your new portal page and enter:

Save your new portal page.

Note: When you make your new portal page, do not try to edit Template:Tabbed portal. Be sure that you start a new page with a good name...the page name should start with "Portal:".

File:Usedtemplates.png

Templates that are used by Template:Tabbed portal.

Colors

If you want to change the colors used in your new portal page, find this code:
style="background:#AACCFF; border-style:solid; border-width:3px; border-color:#003366;"
and
style="background:#ABE6EE; border-style:solid; border-width:3px; border-color:#003366
and change the colors (#AACCFF, #003366, #ABE6EE, #003366).

Intro section

While you are working on your new portal, mark it as being under construction. Click the "edit this page" button at the top of your new portal page. Scroll down to the bottom of the edit page and find the list of templates that are used by your portal page. It should look something like the list shown to the right. Click on the "/Introduction" page (in the example shown, the full page name is "Portal:Wiki//Introduction"). Add a message to that page such as "This portal is under construction".

Header and footer

Notice that most of the red links on your new portal page are for "box-headers" and "box-footers". The so called "boxes" are going to be the sections of your portal page. These sections are (at first) called: Introduction, Tabs, Box-left-1, Box-left-2, Box-right-1, Box-right-2, Box-right-3, Box-bottom-1 and Box-bottom-2. All of these page sections will have its own edit button. To create the "box-header", click on one of the links to your new "box-header" page.

A new edit window should open. Copy the following text, past it to the edit window, and save. Note: you might want to change the colors.

{{Portal:Box-header | title={{{1}}} 
|editpage={{{2}}} 
|border=#aaaaaa           <!-- This is the color of the borders around Box Sections -->
|titleforeground=white    <!-- This is the color of the Box Section Title Bar text -->
|titlebackground=#aaccff  <!-- This is the color of the Box Section Title Bar -->
|background=#f9f9ff       <!-- This is the color of the Box Section background -->
|foreground=black}}       <!-- This is the color of the Box Section text -->

Return to your main portal page. To create the "box-footer", click on one of the links to your new "box-footer" page. A new edit window should open. Copy the following text, past it to the edit window, and save.

{{Portal:box-footer | {{{1}}} }}

File:Boxedportal.png

Portal page sections after creating headers and footers.

Your portal page should now look similar to the one shown in the image to the right.

Note: you do not have to use exactly the number of page sections shown in this example. You can remove page sections, add more page sections, change the order of wide and narrow page sections.

Name the page sections

This is a good time to decide on the names of your page sections. Click on the edit button for your portal page. Note that there are several related groups of three lines such as:

{{/box-header|'''Box-left-1'''|{{FULLPAGENAME}}/Box-left-1|}}
{{{{FULLPAGENAME}}/Box-left-1}}
{{/box-footer|}}

that correspond to each section Box-left-1, Box-left-2, Box-right-1, Box-right-2, Box-right-3, Box-bottom-1 and Box-bottom-2. For each section you want on your portal page, change the text such as "Box-left-1" to the name that you want to use for that page section. For example, you might want a section called "Featured resource". You could replace each of the the three occurrences of "Box-left-1" with "Featured resource".

Add content to page sections

After you have named all of the page sections (see the section above for how to do this) of your portal page, you can now create a page for each section and start adding the content for the sections. All these pages for the sections will be subpages of your main portal page. Just click on the links to the subpages that are on your main portal page (initially they are all red) and edit the new pages to add some content.

Create your second and third portal pages

Now is a good time to decide on the names you will use for the links in your tabs. By default the tabs have links called: "Main Page", "Networking" and "Curriculum". You can over-ride the defaults by providing other text for the links in the tabs (described below).

Above, you were instructed to make the "Main Page" for your new portal"

"Portal:Foobar" (used by the main page of your portal; replace "Foobar" with your desired portal name)

For a portal with three tabs, there will be two subpages called:

"Portal:Foobar/Page2" (the second page of your portal)
"Portal:Foobar/Page3" (the third page of your portal)

You can go to the edit window for your new "Portal:Foobar/Page2" portal page and enter {{subst:Tabbed portal/Page2}}. Save the page.

Similarly, use {{subst:Tabbed portal/Page3}} to start your "Portal:Foobar/Page3" page.

Customize your tabs

Notice that the tabs look different on your three portal pages: they indicate which page you are on. Each of your three portal pages uses these templates to show the tabs:

Template:Make a portal/Tab1 (makes first tab; the one on the left)
Template:Make a portal/Tab2 (makes the middle tab)
Template:Make a portal/Tab3 (makes the third tab; the one on the right)

You can provide parameters for these three templates that alter the appearance of the tabs. Each of these three templates takes the same six parameters as shown below:

Background colour of tab (#eee)
Colour of text on tab (default #ffffff)
Colour of the 3px bottom border of the tab (default #003366)
width of the top, left, and right borders of the tab (default 1)
bottom border thickness (default 3)
name to show in the link (The defaults are "Main Page", "Page 2" and "Page 3")

Customized tab examples

For the "Main Page" of Portal:Wiki, the three tabs were customized as follows:

{{Make a portal/Tab1|#ABE6EE|#000|#ABE6EE|3|0|'''MediaWiki'''}} (This makes the first tab)
{{Make a portal/Tab2|#999|#ffffff|#003366|1|3|'''Wikimedia'''}} (This makes the second tab)
{{Make a portal/Tab3|#999|#ffffff|#003366|1|3|'''Wikiversity'''}} (This makes the third tab)

For the second page of the Wiki portal, (Portal:Wiki/Page2), the three tabs were customized as follows:

{{Make a portal/Tab1|#999|#ffffff|#003366|1|3|'''MediaWiki'''}} (This makes the first tab)
{{Make a portal/Tab2|#ABE6EE|#000|#ABE6EE|3|0|'''Wikimedia'''}} (This makes the second tab)
{{Make a portal/Tab3|#999|#ffffff|#003366|1|3|'''Wikiversity'''}} (This makes the third tab)

For the third page of the Wiki portal, (Portal:Wiki/Page3), the three tabs were customized as follows:

{{Make a portal/Tab1|#999|#ffffff|#003366|1|3|'''MediaWiki'''}} (This makes the first tab)
{{Make a portal/Tab2|#999|#ffffff|#003366|1|3|'''Wikimedia'''}} (This makes the second tab)
{{Make a portal/Tab3|#ABE6EE|#000|#ABE6EE|3|0|'''Wikiversity'''}} (This makes the third tab)

Note that for each page, one tab is colored uniquely as the "active" tab. The other two tabs are both shown as "inactive" but with their link ready to be clicked on.

Additional resources

Another tab format: w:Portal:Science.