How can I hide left column and stretch main content area for guests?

Version 1.1 by Nikita Petrenko on 2023/05/03

Method 1 (Most Recommended)

The best recommendation for customizing the UI is to create a new custom overriding template VM file. Knowing the code of left panels and the layouts you can customize the UI to your needs. Furthermore, this allows for greater flexibility in changing layouts and can be combined with Velocity and CSS code to achieve the desired result.

Method 2 (Optional)

Warning

Please, note that even it's the workable methods. It's not recommended due to the prohibition of the use of the !important parameter according to our CSS guide. By using !important, you’re essentially telling the browser that, under no circumstances should elements have these CSS rule. Because it can cause issues with specificity and can make it harder to debug CSS issues. It can also make it more difficult to override styles later on if you need to make changes to your CSS code.

This approach has been tested on both XWiki 13.10.10 and 15.3 versions.

For the global effect.

  1. First, ensure you are logged in to XWiki and have the necessary permissions to edit pages.
  2. Go to your profile page and enable an advanced user or use shortcut x+x+x+a, and enable displayed hidden pages or use shortcut x+x+x+h
  3. Change your XWiki layout from two sides columns into one left column Administration -> Look&Feel -> Panels, then from Page Layout options to select "Left column".
  4. Open the Sandbox page or any page you want to edit.
  5. At the top right corner of the page, click on the "Edit" button and select "Object" or use shortcut "o"
  6. Create a new object type "XWiki.StyleSheetExtension", then change the parameter "Use this extension" to On the demand only, and inside the field "Code" place the below-written code.
#leftPanels {
    display: none;
}

#body .main {
    position: static !important;
    width: 100% !important;
}

Finally:

  1. Navigate to the DefaultSkin page via shortcut and type "Skin" into search field
  2. Select Default XWiki Skin
  3. Press "Edit this skin"
  4. Add the new overriding template, name it layoutExtraVars.vm and place these lines of code:
#if($isGuest)
  #set ($discard = $xwiki.ssx.use('Sandbox.WebHome'))
#end

Learn more about Skin extension.

Get Connected