Allow table of contents and page metadata to be moved to the right or hidden
complete
K
Kaleb Elwert
This seems to be a point of contention - there have been posts about moving it to the right, moving it to the left, and about removing it entirely.
Moving it to the right would give the actual content more focus. As of right now, on the 13" Macbook Pro, 40% of the page (approximately 600px when the screen width is only 1440px, adjusted for retina scaling) is taken up with navigation, all on the left side.
Allowing the ToC to be moved to the right would drop that to 20% on each side, making the content the focus rather than the navigation.
In previous requests I saw that this was planned to be resolved in 2.2 which was a few months ago. I see that there's a place in the admin for this, but it would be nice to know if this is still planned.
Nicolas Giard
complete
Added in 2.5.294
Chase Sterling
Instead of using js to move the sidebar after page load, you can use custom CSS in the theme. This prevents things from jumping around as the page loads.
#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-sd.lg3.xl2 {
order: 1;
}
Narendra Vadapalli
Chase Sterling: This worked perfectly well in moving the metadata pane (tags etc..) to the right and now the content is more focused
Narendra Vadapalli
This stopped working lately, possibly with the new version
Nicolas Giard
Narendra Vadapalli: Narendra Vadapalli: Avoid using JS or CSS to move the sidebar. It's natively supported under Admin > Theme now.
Narendra Vadapalli
Nicolas Giard: Thanks.. didn't pay attention and I was banging my head, why the CSS override wasn't working and throwing me this error in the rendered pages
The display: block property prevents order from having an effect.
Try setting display to something other than block
Admin-> Theme -> Theme Options -> Right
did what I was looking forAdrianus Bussem
Using Robert Mech Script, I modified so it hide the Page content and strech the page it self, as well as moving the header to the left. WARNING: This might re-arrange some of your previous created pages content.
Just copy and paste it on Theme > Head HTML injection:
<script
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(window).on('load', function()
{
setTimeout(function()
{
$("#app > div.v-application--wrap > main > div > div.container.grey.pa-0.container--fluid.darken-4-l3 > div > div").attr('style','margin-top: auto; margin-bottom: auto; margin-left: auto');
$("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-content.xs12.lg9.xl10").attr('style','flex-basis: 100%; max-width: 100%');
$("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-sd.lg3.xl2").hide("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-content.xs12.lg9.xl10");
}, 0);
});
</script>
p
petit lorcàn
Adrianus Bussem: Hello, I would like to hide the "social link" box and the "author" box but keeping the table of contents how can I do it plz?
T
The LouD1
petit lorcàn not sure for the social one but for the author you can use this in the head HTML box (not my code)
<script
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(window).on('load', function()
{
setTimeout(function()
{
$("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-sd.lg3.xl2 > div.page-author-card").hide("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-content.xs12.lg9.xl10");
}, 0);
});
</script>
Robert Mech
Those of you in a rush to have this moved to the right side and cant wait you can do a little JS work to move it over after the page load.
Add query to your head HTML injection in theme settings.
<script
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
Then add the following to the fotter HTML injection. This moves everything in that block to the right side.
<script>
$(window).on('load', function() {
setTimeout(function() {
console.log("move nav menu");
$("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-sd.lg3.xl2").insertAfter("#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div > div.flex.page-col-content.xs12.lg9.xl10");
console.log("move Complete");
}, 100);
});
</script>
You can see this in action at wiki.makersmashup.com
Tanisha Kashyap
Robert Mech: Hey just Checked your site... I wanted to know how you brought the page name to the absolute right and got rid of the path in the home page.
Robert Mech
Tanisha Kashyap: You can see everything I did here https://wiki.makersmashup.com/en/other-stuff/wikijs
That is essentially those configurations I made. I also tweaked the fonts as well.
Tanisha Kashyap
Robert Mech: Thanks a lot!!
Mariano Gedisman
Robert Mech: Thanks a lot for your input! This is fantastic. Now I wonder if there's a way to make the page contents, tags, etc smaller both in font size and also the boxes that contain them 🤔Also, can it be made to move to the bottom of the page??
Tony Payne
I am happy with the navigation and table of contents where they are, but it would definitely be useful at times to be able to collapse them, especially if a page contained a wide table..
T
Tecsun Yeep
I would suggest besides removing it entirely, allow the viewer to collapse/expand the site navigation and the table of contents. Each of them would have a collapse/expand button to do so.
M
Morgan Drew
Can someone provide the CSS or Javascript required to achieve removal of contents on all pages while we wait?
Frostyfrog
Morgan Drew: In the meantime, I've used the following CSS to move it to the right (only the .layout section) or to move it to the right AND get rid of the TOC (both sections):
.v-main .page-col-sd > div:nth-child(1) {
display:none;
}
.v-main .layout {
flex-direction: row-reverse;
}
J
Jose Bencosme
Frostyfrog: Thank you!!!!
J
Jonathan Doyle
Frostyfrog: Do you have CSS to move the page title over to the left (removing the offset?)
Nicolas Giard
Nicolas Giard
in progress
Stefaan Vandevelde
I 'd also love to have the option to disable the table of content. It's taking up much needed space and we're not using it
Load More
→