Flamingo Skin

Flamingo is XWiki'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.7 on XWiki Enterprise 8.2 
  • 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 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 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 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

Alerts

Whenever someone else modifies a page in your favorites list, posts a blog article or submits a comment, you will see a number of notifications displayed on the top menu bar, just above the bell icon. 

NotificationsBar.png

Actions Menu

The "Cog" menu and the "More Actions" menu have been merged to a single menu to address issues with understanding what is the difference between them.

Before Version 9.4
PageMenuNonTerminal.pngPageMenuTerminal.png
MoreActionsMenuNestedPage.pngMoreActionsMenuTerminalPage.png
Current Version
PageMenuNonTerminalNew.pngPageMenuTerminalNew.png

Content Menu Usability Improvements

Each menu button now has labels and backgrounds so that it is clearer and easier for users to interact with them.

Before Version 9.4Current Version
ContentMenuOld.pngContentMenuNew.png

Wiki and Page Administration Improvements

The wiki and page administration menu is now implemented using a collapsible accordion. Most of the sections from the "Applications" group have been moved to existing or new groups, a consistent style was applied across all the administration sections and more hints were added for the configuration options. Moreover, the search input was added so that you can filter the administration categories and sections. Note that for now the live search matches only the category/section name and description.

Wiki Administration Before Version 9.3Current VersionLive Search
AdminMenuOld.pngAdminMenuNew.pngAdminLiveSearch.png
Page Administration Before Version 9.3
PageAdminMenuOld.png
Current Version
PageAdminMenuNew.png

Page Source View Improvements

The wiki source code of the current page has been improved to look nicer and have proper line numbers that support Syntax highlighting and linking.

PageSource.png

Also, you can enable the blame view by clicking the "Show last authors" button.

BlameView.png

Attachments

In the "Attachments" tab before the attachment name you can now see:

  • a thumbnail preview for images
  • an icon reflecting the file extension for non-image files

ViewAttachments.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 after creating a nested page (top-level or not).

Non-Terminal Page

Breadcrumb
NonTerminalPageBreadcrumb.png

Terminal Page

Breadcrumb
TerminalPageBreadcrumb.png

Non-Terminal Top-Level Page

Breadcrumb
NonTerminalTopLevelPageBreadcrumb1.png   NonTerminalTopLevelPageBreadcrumb2.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

"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

Import

The Import UI was moved to the new standard tree.

PackageContent.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

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 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

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

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.

In the newer versions, the "Logos" section has an associated attachment selector, so that it is much easier to update the wiki logo. If until now you had to first attach an image to the color theme page, then edit the page in "Inline" mode and finally select the image from a list, now all you have to do is to click on "Choose an attachment" straight from inline mode an upload the new logo from you local files. 

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. 

AdministrationWysiwygEditor.png

    

Related Pages

Search this space

 

Most popular tags

Failed to execute the [groovy] macro
  1. access rights
  2. activity stream
  3. annotation
  4. attachment
  5. comment
  6. Document Tree Macro
  7. export
  8. Extension Manager
  9. Flamingo skin
  10. global user
  11. Groovy event listener
  12. group
  13. nested page
  14. search
  15. skin
  16. syntax
  17. user
  18. user profile
  19. velocity macros
  20. wiki
  21. wysiwyg
  22. XWiki Applications
  23. xwikiattachment_archive table
  24. xwikiattachment table
  25. xwikiattrecyclebin table
  26. xwikiproperties table

[Display all tags from this space]