Flamingo Skin

Flamingo is XWiki Enterprise's default skin - it is based on the Bootstrap Framework that uses the HTML5 DOCTYPE in order to provide a modern and responsive user interface which adapts to the small screen of current mobile devices: tablets, smartphones and so on. 

The Flamingo skin uses:

  • Bootstrap 3.3.6 on XWiki Enterprise 8.1
  • Bootstrap 3.3.5 on XWiki Enterprise 7.2
  • Bootstrap 3.3.4 on XWiki Enterprise 7.1
  • Bootstrap 3.3.2 on XWiki Entreprise 6.4.1 and 7.0
  • Bootstrap 3.3.1 on XWiki Enterprise 6.4
  • Bootstrap 3.2.0 on XWiki Enterprise 6.2
  • Bootstrap 3.1.1 on XWiki Enterprise 6.1

XWiki Enterprise has a total of 4 bundled themes, Charcoal, Marina, Garden and Kitty and another 16 themes that have been adapted from the Bootswatch collection. These ones have been integrated using the advanced lessCode property. Most importantly, the preview of the Flamingo Theme Application won't work in these cases. Also, the Bootswatch themes use some fonts from the Google Fonts web service which means that if you are working behind a proxy that filters some requests, or if you are browsing XWiki on an intranet without having an Internet connection, you will not have the same fonts, but a default one instead.

Responsive Skin

On a desktop, the user gets a full view of the site whereas on a smartphone or a tablet the window will retract so that the user no longer needs to zoom and shrink the text or images.

FlamingoPhoneView.pngFlamingoPhoneView2.png

On a small screen, the page header is displayed above the main content area and the left and right panels float below.

FlamingoPhoneViewHeader.pngFlamingoPhoneViewPanels.png

New Home Page

The old Dashboard application for the main home page was replaced with instruction steps written in wiki syntax in order to be simpler for new users to edit its content. Moreover, the main home page has its dedicated tour in order to better familiarize you with the most relevant features.

FlamingoDesktopView.png

Sandbox Relocation

The Sandbox pages were previously accessible through a link in the Quick Links Panel. In the latest XWiki Enterprise versions, the link has been removed and a Sandbox entry has been added to the Applications Panel. 

 Before Version 8.1 Starting with Version 8.1
SandboxQuickLinks.pngSandboxApplications.png

Drawer Menu

Starting with version 7.2, the "Wiki Name" menu from the top bar was moved to a drawer menu which is accessible by clicking the DrawerMenuIcon.png button. The languages menu was also moved to the drawer.

Since XWiki Enterprise 8.4.2, the drawer menu displays items by scope which can be:

  • local - concerns only the current wiki
  • global - affects the whole farm

As a consequence, items like "Home", "Create Wiki" and "Delete Wiki" have been removed from the drawer menu, in order to focus on frequent operations.

 Before Version 7.2 Current Version

WikiMenu.png

LanguageMenu.png

DrawerMenu.png

Search Box

The search box is still in the top menu bar, but it is only displayed after clicking the magnifying glass button.

SearchWiki.pngSearchBox.png

Nested Pages

Page Hierarchy

Starting with version 7.2, XWiki has adopted the 'Nested Pages' paradigm. As a consequence:

  • the concept of "space" is no longer used
  • the old Parent-Child relationship was dropped and the Breadcrumb was reworked in order to reflect the location of a page in the reference hierarchy; each breadcrumb element has a drop-down tree that shows the siblings and the children, helping you navigate easily around the wiki. In the table below you can see the breadcrumb for terminal and non-terminal pages and also what appears in the "Spaces" widget after creating a nested page (top-level or not).

Non-Terminal Page

Breadcrumb
NonTerminalPageBreadcrumb.png
"Spaces" Widget
NonTerminalPageSpaces.png

Terminal Page

Breadcrumb
TerminalPageBreadcrumb.png

Non-Terminal Top-Level Page

Breadcrumb
NonTerminalTopLevelPageBreadcrumb1.png   NonTerminalTopLevelPageBreadcrumb2.png
"Spaces" Widget
NonTerminalTopLevelPageSpaces.png
  • the wiki home page is now included in the breadcrumb for its children and descendants
  • the ability to modify the page parent has been removed in edit mode

    PageParentEditMode.png

Content Menu

The content menu replaces the old "More actions" menu and also comes with one extra item depending on the page type. For a terminal page, you have an extra "Siblings" option, whereas for nested page you have a "Children" option. 

 Old "More actions" MenuNested Page (Non-Terminal)Non-Nested Page (Terminal)
MoreActionsMenu.pngMoreActionsMenuNestedPage.pngMoreActionsMenuTerminalPage.png

Also, the "Annotations" option was renamed to "Annotate".

Page Information Tab

The "Information" tab now displays only the backlinks and included pages. The old "Parent" and "Children" sections were removed because there are already dedicated menu items available in the content menu.

PageInformation.png

Page Administration Menu

The page administration menu is available by clicking on the cog button in the page content area and it replaces the old "Page Name" menu. If the page is nested (non-terminal) the menu has the following 4 items:

If the page is terminal (non-nested), "Administer Page" is replaced by "Administer Parent".

The copy and rename features support nested pages. Also, the delete form has an option to delete the children of the current page.
Before 7.2Nested Page (Non-Terminal)Non-Nested Page (Terminal)
PageMenuFlamingo.pngPageMenuNonTerminal.pngPageMenuTerminal.png

To learn what "Administer Page" and "Administer Parent" do, follow this link.

"Edit" Menu

The old "Edit" menu blue button was replaced by an editing pen and the "Access Rights" option was removed for non-terminal pages. In its place, you can use the new Administer Page UI.

Secondly, there is an extra "Edit" menu item which loads the default editor for that page or form. The default editor setting is available in the user preferences page.

Before 7.2After 7.2
OldEditMenu.pngEditMenu.png

"Add" Menu

The "Add" menu has been relocated near the edit button and it is marked by the AddButton.png icon. The difference is that now the button redirects to the 'Create Page' form which supports nested pages and allows to:

  • create a blank page
  • create a page using one of the available templates

The "Add Space" function has been removed as XWiki has adopted Nested Pages. To create a page from Office you can either use the XWiki Office Importer or the Import Office Document tool provided by the Wysiwyg editor.

Import

The Import UI was moved to the new standard tree.

PackageContent.png

Index Application

The "Page" and "Space" livetable columns were merged into a "Location" column which just like the breadcrumb displays the location of the page in the reference hierarchy and allows to filter at several path levels. Also, XWiki has introduced the "Title" column which was necessary because all non-terminal page names are called WebHome, so displaying this value would not be user-friendly. This one doesn't allow filtering because XWiki currently doesn't support filtering on page titles.

DocumentIndexFilterLocation.png

The "Tree" tab is using the reworked Document Tree Macro and is thus honoring the Nested Pages hierarchy.

DocumentTreeFinder.png

The "Orphaned Pages" tab is visible only if the Parent-Child Hierarchy Mode is enabled, which is not the case by default.

Finally, starting with version 7.2, we don't use the concept of "space" anymore but "nested pages" and "terminal pages". In order to access the children of a nested page, you must use the "Children" option of the new content menu. Similarly, you can access the siblings of a terminal page by clicking on the "Siblings" option of the same menu.

ContentMenuChildren.pngContentMenuSiblings.png

Panels Application

After adopting the "Nested Pages" paradigm, there have been 2 main changes in the Panels application:

  • the "Navigation" panel displays nested pages 
  • the "SpaceDocs Panel" has been deprecated and replaced by 2 new panels:
    • the "Sibling Pages" panel displays the siblings of a terminal page
    • the "Child Pages" panel displays the children of a nested page
NavigationPanel.pngSiblingsPanel.pngChildrenPanel.png

Tips Panel

The "Tips" panel is part of the Help Application and displays useful tips and tricks about how to use XWiki. Also, the message about the shortcut key to use the "Jump To Page" feature has been moved from the old "Quick Link" panel to the "Tips" panel.

TipsPanel.pngTipsPanel2.pngTipsPanel3.png

"Need Help" Panel

The "Need Help?" panel was added to the column on the right and comes with dedicated links in order to get community and professional support.

NeedHelpPanel.png

Watchlist Application

Starting with XWiki Enterprise 7.4, a new notifications menu was added to the top bar, represented by a bell icon which in the future will be the place where you can find notifications about wiki events like personal messages, page changes and so on. By clicking the bell icon, you can access the watchlist icons and 3 dedicated switch buttons in order to watch / unwatch:

  • a whole wiki
WatchWiki.pngUnwatchWiki.png
  • a nested page and its children
WatchNestedPage.pngUnwatchNestedPage.png
  • a single page
WatchPage.pngUnwatchPage.png

Also, in the "Watchlist" section of the user profile, the "Wiki", "Space" and "Document name" livetable columns were merged into a "Location" column. Just like the breadcrumb, this column displays the location of the page in the reference hierarchy.

Watchlist.png

Applications Panel and Applications Index

The "Applications" panel displays a better overview of the applications installed on the wiki so that users can quickly switch between extensions. For administrators, there is an extra section available named "More applications" with links to Extension Manager and App Within Minutes. Starting with XWiki Enterprise 8.2, some applications were removed from the "Applications" panel - like Scheduler, Invitation, Panels - with the intention to simplify the UI and promote a smaller number of applications. 

Before version 8.2Starting with version 8.2
ApplicationsBarFlamingo.pngApplicationsBarNew.png

In order for them to still be discoverable, we added in the "Application Index" option to the drawer menu.

ApplicationIndexDrawer.png

In older versions, applications were listed alphabetically, which was quite limiting for the users. This is the reason why version 8.4 adds support for reordering items.

User Profile Menu

The user profile menu has been removed from the top menu bar. Instead, the user avatar is displayed which redirects to the profile page. 

Moreover, the drawer menu also displays the user avatar along with the first name and last name.

 Before 7.2After 7.2
UserProfileMenuFlamingo.png

FlamingoPhoneViewHeader.png

UserProfileDrawerMenu.png

User Preferences

For easy use, each field in the user preferences page now has a documentation hint. 

UserPreferences.png

LightBox and Modal Popups

Modal Popups and LightBox resource components are now responsive and adapt to small resolutions.

 Registration Lightbox "Share by Email" Modal Popup
LightBoxFlamingo.pngModalPopupFlamingo.png

Livetables

LivetableFlamingo.png

Improved Tree Display

The "Tree" tab in the Page Index Application uses the Document Tree Macro based on a JQuery plugin named jstree

TreeView.png

Also, the Document Tree Widget has also been integrated with the Wysiwyg editor.

TreeViewWysiwyg.png

Export Page Improvements

The page export modal popup is now split in 2 format categories:

  • Office Formats - for the PDF, RTF and ODT export

    AvailableFormats.png

  • Other Formats - for the XAR and HTML export; in case the exported page is nested and has children, you may choose to export them too.

    OtherFormats.png

    Also, the "Export" menu has been replaced with a corresponding entry in the "More Actions" menu.

Login Form Improvements

LoginPage.png

Blog Application Improvements

The Blog panels are now displayed on the right column by default in to fit the Flamingo layout and the icons are now displayed using the Icon Theme Application.

BlogPanelsFlamingo.png

Moreover, you can easily subscribe to the RSS feed for the whole blog by clicking the RSS icon next to the "All" link in the "Blog Categories" panel.

RSSBlogCategory.png

Easy to Customize Color Themes

The default color theme is the "Charcoal" which displays a preview of the wiki home page 

FlamingoColorThemeHome.png

and a "Variables" panel with the list of LESS variables you can customize.

FlamingoBootstrapVariables.png

The preview only works for the 4 bundled Flamingo themes: Charcoal, Marina, Garden and Kitty. The remaining 16 themes were created from Bootswatch using the lessCode property.

On sub-wikis the "Color Theme" section has 2 tabs:

  • Local - refers to the color themes from the current sub-wiki
  • Global - allows to use a color theme from the main wiki

LocalGlobalColorTheme.png

Icon Theme Application and Font Awesome

XWiki comes with the new "Icon Theme" application which allows administrator users to choose the wiki icon set via the "Presentation" section of the wiki preferences page.

IconSetAdmin.png

The available icon sets are silk and Font Awesome which is used by default.

 Silk  Font Awesome
SilkIconSet.pngApplicationsBarNew.png

The App Within Minutes application provides an icon picker with a default preview for Font Awesome icons. 

AddIconFontAwesome.png

The other available icon set is Silk which corresponds to the images located in the "\webapps\xwiki\resources\icons\silk" folder on your filesystem.

AddIconSilk.png

Improved Quality of the Image Avatar

The quality of scaled images (most noticeable in the case of user avatars) was much improved, thanks to the Thumbnailator library that we started using since version 8.4.4. 

 User Profile Activity Stream
MyActivityStreamBefore.pngMyActivityStreamAfter.png
Comments Tab
CommentsBefore.png
CommentsAfter.png
User Index
UserIndexBefore.png
UserIndexAfter.png

CKEditor Configuration Section

Starting with version 8.4, we have added a dedicated configuration page to the wiki preferences. The new section allows administrators to activate or deactivate specific functionalities in the editor toolbar or to enable the display of the "Advanced" and "Target" tabs in the "Link" dialog box. 

AdministrationCKEditor.png

    

Search this space