BookStack
BookStack copied to clipboard
BookStackApp
Hide sidebar blocks.
Hello, you are doing a great job with this tool. Is there a configuration to hide the “recent activity”, “recently updated pages” and “my recently viewed” sidebar blocks?
Hi @andersonbrantes,
Hiding such items is not supported via UI options or anything like that.
If you are handy with CSS it's possible to hide these with CSS rules, placed in the Custom HTML head content setting.
If you can confirm the view you're looking at (Do you have a custom homepage set?) I could help with those rules.
Ok @ssddanbrown , I will try to do it with CSS... I didn't know the custom homepage feature, that's a great idea. I am using BookStack for a Wiki that has private and public documents. The main idea is only users with private permissions could see these sidebar blocks(recent activity, recently updated pages, my recently viewed). Do you think it is possible with the custom pages?
@andersonbrantes something like this is what I use:
<style>#sidebar { display: none; } [expand-toggle] { visibility: hidden; }</style>
I put this in the page content for our homepage rather than in the custom HTML header where you'd only want:
<style>#sidebar { display: none; }</style>
Hi @unknowndomain... I could use something like that, but, I want this rule only for public pages. This is tricky to do with CSS without a specific identifier(Id or Class) for this. Maybe I can do it with Javascript. But, the best way would be on the server side, I think.
There is a similar issue to what I want to do: #1319
I agree, another solution which would be helpful generally is that the body tag have a few classes on it to help you figure out what kind of page you are on, i.e. <body class="shelf"> or <body class="page public"> or <body class="page private">
That way you could write CSS selectors like body.private or body.page.public.
This is how WordPress handles the issue.
I think hiding recent activity block from public is important in terms of security at some cases. Some users who has different roles should see this.
I think hiding recent activity block from public is important in terms of security at some cases. Some users who has different roles should see this.
I fully agree. Pages hidden to some roles appear in the recently changed area to all roles, and they can access it by just clicking the link. Hiding the side bar is not a good solution, as it makes the navigation less practical in the book/chapter level.
On the custom css route it would be helpful if IDs or better still class names set for the entire block section so they can be hidden individually. Currently they seem to be applied somewhat inconsistently.
For example i can set in Custom HTML Head Content:
<style>
#recent-activity {display:none;}
</style>
and it removes the whole block. But if i do:
<style>
#recently-updated-pages {display:none;}
</style>
it removes the block contents but not the header because the id tag has been applied at the sub block of the full recently-updated-pages block content.
If the IDs were set on the top block element for each section that would be helpful fix.
Lastly I would think about using classes rather than IDs as at some point you can guarantee someone is going to want to use the same block twice on a page in a customised theme for whatever reason and if you use IDs it will be invalid html and you've got yourself another support ticket.
Lovely looking wiki so far, looking forward to seeing it improve over time!
Any progress on this? This is an important feature IMHO. Right sidebar, history, and if possible top-right header content should be hidden from public.
Hi, I'm looking forward to see this feature. I'm looking for a way to hide recent activity, especially usernames for guest viewers. Maybe this could be simply implemented to display Someone instead of real username when guest loads the page ?
It's very important feature. In our case we send guest links on specified documents, but all guests can see all documents in Recent activity. Maybe this can be solved through User rights?
Yes, possible solution would be, to replace username with Someone and disable link to user based on user role or permission.
It's very important feature. In our case we send guest links on specified documents, but all guests can see all documents in Recent activity. Maybe this can be solved through User rights?
Yes, Users (Including guests) should only be able to see the activity for items they have access to. By default the guest user can view everything but this is configurable by alterting their role.
It's very important feature. In our case we send guest links on specified documents, but all guests can see all documents in Recent activity. Maybe this can be solved through User rights?
Yes, Users (Including guests) should only be able to see the activity for items they have access to. By default the guest user can view everything but this is configurable by alterting their role.
If this could be the role "List chapter, books, shelf" it would be great. We could send a link for book/chapter but if we dont't give that role - guests will not be able to list anothers books/chapters. This role can affect showing recent activity too. And of course Guests mustn't be able to view User name or another private information.
I've worked around this for now by hiding the sidebar things we don't need in
<style>
/* ----------- hiding sidebar stuff ----------- */
.tri-layout-left-contents h5 {
display: none;
}
.tri-layout-right-contents h5 {
display: none;
}
.activity-list {
display: none;
}
.tri-layout-right-contents .text-muted {
display: none;
}
#new {
display: none;
}
#popular {
display: none;
}
#recently-updated-pages {
display: none;
}
#page-details > div > div {
display: none;
}
#sidebar > aside > div:nth-child(2) {
display: none;
}
#main-content div.grid-card-footer.text-muted {
display: none;
}
#main-content div.list-sort-container {
display: none;
}
#header > div > div.text-right {
display: none;
}
</style>
Just want to advise, we do have the visual theme system that can be utilised if you need to do something more extensive outside of setting styles, without altering core app files:
https://github.com/BookStackApp/BookStack/blob/master/dev/docs/visual-theme-system.md
Would allow you to override any view file we use and completely remove those parts if desired.
Hello everyone, this how my wife hide the right panel for guests users only. She's using the custom HTML head content in Settings with this code :
<!-- FBU -->
<script type="text/javascript">
window.onload=function() {
$links =document.getElementsByTagName('a');
for($link of $links){
if ($link.href =="https://**PUT YOUR URL HERE**/login"){
document.querySelector("div.tri-layout-right").style.visibility = 'hidden';
}
}
}
</script>
It's just hidden i can see it appear and vanish in a second, not quite secure IMO but still better than nothing. She may will work (or not i don't know) on a custom CSS style using the features mentioned above to hide both panels for guests users.
Have a nice day.
@satanahell Slightly optimized/earlier-loading version of that if desired:
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const loginShowing = document.querySelector('a[href$="/login"]') !== null;
const rightPanel = document.querySelector("div.tri-layout-right");
if (loginShowing && rightPanel) {
rightPanel.style.visibility = 'hidden';
}
});
</script>
Note, if you're hiding the right sidebar with a primary aim to hide export options, these can instead be controlled via role permissions (As most right sidebar actions can at some level.)
@ssddanbrown thanks for your optimized reply, my wife told me that she didn't have your skill level !
I start using this "tricks" in order to expand the main page frame even if i had to hide the left panel too. I still want to display a large google slide into an e-frame on my bookstack instance. Ultimately i find out an acceptable way to achieve that whitout tweaking my bookstack. But i'm still pushing my wife to get a special custom CSS template for this purpose !! 👍
Enjoy your day,
@satanahell Slightly optimized/earlier-loading version of that if desired:
<script> window.addEventListener('DOMContentLoaded', (event) => { const loginShowing = document.querySelector('a[href$="/login"]') !== null; const rightPanel = document.querySelector("div.tri-layout-right"); if (loginShowing && rightPanel) { rightPanel.style.visibility = 'hidden'; } }); </script>Note, if you're hiding the right sidebar with a primary aim to hide export options, these can instead be controlled via role permissions (As most right sidebar actions can at some level.)
How would I go about hiding all occurrences of the .tag-item class using this? Instead of just the first occurrence.
Thanks for the JavaScript snippets - those work great ~~, except that the script seems to load quite late, making the sidebar blocks temporarily visible before they are hidden~~.
Edit: I figured this out by mixing some of the suggestions here up a bit and having the element hide unless instead of display if a user is logged in:
<style>
.tri-layout-left { visibility: hidden; }
.tri-layout-right { visibility: hidden; }
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const loginShowing = document.querySelector('a[href$="/login"]') == null;
const leftPanel = document.querySelector("div.tri-layout-left");
const rightPanel = document.querySelector("div.tri-layout-right");
if (loginShowing) {
leftPanel.style.visibility = 'visible';
rightPanel.style.visibility = 'visible';
}
});
</script>
This does not quite address the security aspect though - anyone with minor computer knowledge can access the browser console and change the visibility value themselves, gaining easy access to the "hidden" data.
This is a kludgy way to implement it, but I was looking for a similar way to hide recent activity and recent books from public users and this is what I've come up with: As part of the custom theme, I've edited the below files: common/activity-list.blade.php home/parts/sidebar.blade.php
Inside of those two, I've wrapped the drafts, recently updated pages, and activity list code blocks in the following if statement:
@if(userCanOnAny('create', \BookStack\Entities\Models\Book::class) || userCanOnAny('create', \BookStack\Entities\Models\Chapter::class) || userCan('page-create-all') || userCan('page-create-own'))
@endif
This should check that a user has any kind of 'creation' permissions before displaying that section, but can be modified to look for whichever permission fits your use best. This works for our uses, but this will also strip the recent activity lists from logged in users that do not have any creation permissions.
A variation of the above example, if you only wan to hide recent activity from public viewing, you could use this snippet:
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const loginShowing = document.querySelector('a[href$="/login"]') !== null;
const leftActivity = document.querySelector("#recent-activity");
if (loginShowing && leftActivity) {
leftActivity.style.visibility = 'hidden';
}
});
</script>
Or completely remove it
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const loginShowing = document.querySelector('a[href$="/login"]') !== null;
const leftActivity = document.getElementById("recent-activity");
if (loginShowing && leftActivity) {
leftActivity.innerHTML = "";
}
});
</script>
Thanks for the JavaScript snippets - those work great ~, except that the script seems to load quite late, making the sidebar blocks temporarily visible before they are hidden~.
Edit: I figured this out by mixing some of the suggestions here up a bit and having the element hide unless instead of display if a user is logged in:
<style> .tri-layout-left { visibility: hidden; } .tri-layout-right { visibility: hidden; } </style> <script> window.addEventListener('DOMContentLoaded', (event) => { const loginShowing = document.querySelector('a[href$="/login"]') == null; const leftPanel = document.querySelector("div.tri-layout-left"); const rightPanel = document.querySelector("div.tri-layout-right"); if (loginShowing) { leftPanel.style.visibility = 'visible'; rightPanel.style.visibility = 'visible'; } }); </script>This does not quite address the security aspect though - anyone with minor computer knowledge can access the browser console and change the
visibilityvalue themselves, gaining easy access to the "hidden" data.
This worked great. Thanks @tacerus.
<style> .tri-layout-left { visibility: hidden; } .tri-layout-right { visibility: hidden; } </style> <script> window.addEventListener('DOMContentLoaded', (event) => { const loginShowing = document.querySelector('a[href$="/login"]') == null; const leftPanel = document.querySelector("div.tri-layout-left"); const rightPanel = document.querySelector("div.tri-layout-right"); if (loginShowing) { leftPanel.style.visibility = 'visible'; rightPanel.style.visibility = 'visible'; } }); </script>
This works well but just to highlight an edge case: If you have a shelf/book/chapter/page called login then this can stop working and start hiding both panels for logged in users too.
It will continue to work if you include the full link for login to your instance:
const loginShowing = document.querySelector('a[href$="YOUR_PROTOCOL://YOUR_DOMAIN/login"]') == null;
Hi -- I appreciate all this problem solving. I would like to exclude/hide ONLY the "recent activity" -- the "Book Navigation" that shows up on the left sidebar is very useful to my users, but I would like them to not see the editing activity. The examples above do not seem to work for me -- the event listeners don't work when all i'm doing is removing recent activity. They are being ignored completely. I also don't want public viewers to be able to see the previous versions of the books/pages.
Not sure how to proceed.
<style> .tri-layout-left { visibility: hidden; } .tri-layout-right { visibility: hidden; } </style> <script> window.addEventListener('DOMContentLoaded', (event) => { const loginShowing = document.querySelector('a[href$="/login"]') == null; const leftPanel = document.querySelector("div.tri-layout-left"); const rightPanel = document.querySelector("div.tri-layout-right"); if (loginShowing) { leftPanel.style.visibility = 'visible'; rightPanel.style.visibility = 'visible'; } }); </script>This works well but just to highlight an edge case: If you have a shelf/book/chapter/page called login then this can stop working and start hiding both panels for logged in users too.
It will continue to work if you include the full link for login to your instance:
const loginShowing = document.querySelector('a[href$="YOUR_PROTOCOL://YOUR_DOMAIN/login"]') == null;
This seemed to be working for us until the latest update (23.12). Is an updated method required to hide the sidebar?
