Title: Bootstrap3 Skin plug-in

The Bootstrap3 Skin is designed for mobile devices such as tablets and smartphones but you can use it with your desktop browsers.

* Image Template ... Huge Set of Responsive Design Interface Mockups (PSD)

How to install

Click the link below to download the zip file of this plug-in.

Log in to your TeamPage server, open Server Settings > Plugins page, specify the zip file in "Install New Plugin", and upload it.

You will see "I18N Error" in "Installed Plugins" list but don't worry. This error just means "the internationalization language files are not loaded yet". Restart your TeamPage server by clicking "Restart TeamPage" in Server Settings > General > Manage Server page. After restart(s), the I18N issue will be solved. (If your TeamPage server is hosted in Traction Software's cloud environment, you will need to restart your server twice.)

How to select this skin

This section describes how to switch the skin from Proteus (default) to Bootstrap3.

Automatically selected on smartphones

If you are using iOS or Android smartphones, such as iPhone, you will not have to do anything. TeamPage will detect your smartphones and automatically serve the contents with Bootstrap3 skin.

Select this skin manually on desktop browsers and tablets

If you are using desktop-browsers in your PC or tablets such as iPad, follow one of the directions below to switch the skin to Bootstrap3.

Switch skin button

You can find "Switch to Bootstrap3 Skin" button in the bottom of Proteus skin's views. Just click it.

Search box

Type /skin bootstrap3 and press Enter key.

Skin setting for your user account

Open Account Settings > Preferences > Browser page and find "Skin" setting. Select "Bootstrap3" in the drop-down-menu.

Features

Responsive Design

The design of the skin changes automatically based on the resolution (width) of the screen.

Long Width

If the width of the screen is larger than 768px, such as iPad, the side column (sidebar) should appear in the right or left of the main column. (You can set the position of the side column to the right or left in the skin configurations.)

Here is an example picture taken on my iPad3.

Narrow Width

If you get your browser's width less than 768px or use an iPhone, the side column moves down to the bottom of the page. (underneath the main column)

And the navigation bar displayed in the top of the page gets collapsed.

This is an example picture taken on my iPhone5S.

Navigation Bar

The Navigation Bar is a menu bar displayed in the top of the page. You can do;

Move to home page (Front Page)
Move to a space
Move to a user's profile page
Search
Check notifications
Post a new entry
Login/Logout
And so on...

When the width of your screen (your browser's window) is less than 768px, the navigation bar will be collapsed as following. You can open the menu by clicking/tapping the three-striped icon.

Main Column

The main column is the area where the entries (articles, tasks, projects, schedules, and their related contents) are displayed.

Tabs

You can allow the tabs to be displayed and choose a view (Dashboard, Recent Posts, Status Updates, Tasks, Projects, Flat Discussions, and so on) by selecting the corresponding tab. By default, only Discussions tab is selected but the tab is hidden because the only-one-tab doesn't mean a "tab". You can select tabs to be displayed or not, and their order in the skin configuration.

The icon in the entry title shows the kind of (the sort of) the entry.

Entry Volumes

In several views, you can change the entry volume.

Side Column

The side column is the area where the notifications, the keyword search, tags etc are displayed. You can select its location from right or left in the skin configuration.

Some of the boxes can be displayed or hidden in the skin configurations. For example, you can hide the notifications and the search boxes because they are duplicated. (The notifications and the search are also available in the navigation bar.)

How to operate

Move

Show a specific entry

Tap or click an entry title or an entry ID to show the entry in the single view.

The entry is displayed in the single view or the chronological discussion (aka "flat" discussion) view. The view is selected based on the "Open Single Flat Thread Directly" configuration.

The Single View

The Chronological Discussion View

Go home

Tap or click the "TeamPage Logo" icon in the navigation bar.

You can select the type of the icon from the blue TeamPage logo, the white TeamPage logo, and Home icon.

Move to a specific space

Tab or click the "four squares" icon to drop-down the spaces list and choose a space to go.

If the skin configuration "Side Column Nav: Show Spaces List" is set to Yes, the space select box will show up in the side column.

Move to your profile page

Tap or click "My Profile" menu item to open your profile page.

Move to somebody's profile page

Tap or click an avatar image or a user display-name link to open his/her profile page.

Submit

Because some of mobile browser apps are not fully-featured and have some limitations (e.g. TinyMCE doesn't work properly), using "post via email" feature is preferred in this skin. However, the new entry, new comment, and edit entry forms are also available.

Post a new article via email

Tap or click "Post A New Article" menu item in the "By Email" group.

The Email app is launched. Check the destination (target) space in the subject. Fill in the body content. You can add images if you want.

After sending the email message, wait for a while until the message is submitted as a new article.

Post a new article via form

Tap or click "Post A New Article" menu item in the "By Form" group.

The New Article form appears. Select a target space, enter title, fill in content... If you are a desktop user, you can attach files by drag-and-drop.

Tap or click "Post Article" button to submit.

Check the article you just posted.

Post a next action (comment, task, schedule) via email

To post a comment, task, or event (schedule) to an existing entry, tap or click Comment, Task, or Event button. Your email app will be launched. The subject of the email message includes the directives for the sort of the entry, target entry ID, related entry ID, assignee name, etc.

Wait for a while until the email message is submitted.

Post a next action (comment, task, schedule) via form

Tap or click "Form" button to open the view to post a comment (or task, or schedule, or others).

You can select a "type". For example, if you select "task" here, the entry will be posted as not a standard comment but a task. Note that the task properties (e.g. assignees, due date, estimated time etc) are not supported on this view.

Check the new comment you just posted.

Attachments:

bootstrap_mockup_image2.jpg
installed_plugin.png
switch_skin_button.png
rs_example.png
user_skin_setting.png
example_ipad3.png
example_iphone5s.png
navbar_wide.png
navbar_narrow.png
allspaces_tabs_icons.png
change_volume.png
sidecolumn_boxes.png
open_single_1.png
open_single_2.png
open_single_3.png
go_home.png
select_a_space_1.png
select_a_space_2_sidebox.png
your_profile_page_1.png
other_profile_page.png
newentry_form1.png
newentry_form2.png
newentry_form3.png
post_task_via_email1.png
sandbox772_task_via_email.png
form1.png
form2.png
comment_posted_via_email.png
newentry_via_email1.png
newentry_via_email2.png
newentry_via_email3.png

Shared Files for Forum6497

Article: Forum6497 (permalink)
Categories: :Doc:plug-in
Date: November 2, 2015; 12:32:58 AM Eastern Standard Time

Author Name: Takashi Okutsu
Author ID: takashi