Hello,
I would like to remove the navigation panel on the left side of my home page, I tried to set my page layout to “No Side Column” in the “Look&Feel/Panels” settings page but it doesn’t apply to the home page. Also I tried to edit in objects mode but I didn’t find what to do…
For example, I would like to delete the whole column on the left in order to have a page like this
Thanks you in advance for your help !
Not sure if it’s a good way but you can create a Skin Extension.
You can add a StyleSheetExtension object to the Home Page and style your page to your needs, in this case you can add this CSS to the StyleSheetExtension object:
#leftPanels {
display: none;
}
#body.content.panel-left-width-Medium.panel-right-width-Medium .main {
position: static;
}
It did hide the side panels for me:
If you want to remove the side panel and not just hide it, you can add the JavaScriptExtension object and do document.querySelector("#leftPanels").remove();
It works, but now I’m wondering: is there a way to override the templates for specific pages only? Sounds like a job for Skin Extension and/or Skin Application: something like attach OverridingTemplateObject to a page, similar to the StyleSheetExtension object, change the template, and then let it be included in the same page, all sub pages, on demand, etc, similar to the StyleSheetExtension objects.
Hello Kulagin,
First of all thank you for your complete reply and your time.
I have tested your instructions and the navigation panel is gone but there is still a white panel on the left that I can’t remove. Do you have any idea how to solve that ?
Originally when I tried it, I’ve had the same problem after I hid the left panel and the way I fixed it for me is by adding the second css rule:
#body.content.panel-left-width-Medium.panel-right-width-Medium .main {
position: static;
}
The reason it doesn’t work for you could be because of a different resolution and so the classes are different. Try something like this for the second css rule and see if it works:
#body .main {
position: static !important;
}
Hi,
Indeed it finally worked ! thank you very much !
I just have a last problem, I have now a white panel on the right, do you know how I can get rid of it ?
I tried to add the command :
#rightPanels {
display: none;
}
But it didn’t work.
You mean you want to make the content area span the whole width of the page? The #rightPanels rule you added hides panels on the right. The reason the main area haven’t expanded is because the original css sets width of the .main element to 66.66(6)%. So you need to overwrite that and set it to either 100% or auto. You can add width: auto; rule to your #body .main css rule.
Hello,
Once again thanks for your reply !
Yes exactly that’s what I want, no white panels on both side
So I have tried to add the width : auto rule as you said but unfortunately it didn’t work ( the width : 100%; rule neither)
Do you have any other solution ?
The reason it doesn’t work for you could be because you’re not actually overwriting the original rule with yours. For me the original rule that’s used is this:
#body.content.panel-left-width-Medium.panel-right-width-Medium .main {
float: left;
width: 66.66666666666%;
}
Depending on your resolution I guess it can change. Since your rule’s selector is only #body .main, it is less specific than the original one in the XWiki and so your rule is simply not used by the browser.
You need to either make your selector more specific than the original one or make your css properties important.
@STG by default, XWiki layout has panes on both left and right sides. Your initial approach was good by applied rather in the wrong place, you didn’t specify where you are trying to apply this change. You can get rid of panes by using the No side column layout. It can be done in 2 ways
Hope it helps,
Alex