Hide sidebar blocks. #1291

andersonbrantes · 2019-02-20T16:48:39Z

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?

ssddanbrown · 2019-02-20T19:07:01Z

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.

andersonbrantes · 2019-02-21T17:48:43Z

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?

unknowndomain · 2019-03-09T18:01:41Z

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

andersonbrantes · 2019-03-10T19:28:57Z

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

unknowndomain · 2019-03-10T21:19:11Z

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.

ayyilmaz · 2020-03-16T18:36:47Z

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.

HAMFEM · 2020-03-27T00:02:24Z

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.

haveyougotanypets · 2020-07-14T00:18:05Z

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!

purpletreesoft · 2020-07-24T21:16:20Z

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.

SloCompTech · 2021-01-12T10:56:43Z

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 ?

kulpin74 · 2021-02-05T09:19:25Z

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?

SloCompTech · 2021-02-05T09:21:40Z

Yes, possible solution would be, to replace username with Someone and disable link to user based on user role or permission.

ssddanbrown · 2021-02-05T19:06:15Z

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.

kulpin74 · 2021-02-07T08:28:04Z

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.

sarah-arrrgh · 2021-11-16T22:13:48Z

I've worked around this for now by hiding the sidebar things we don't need in <style> tags in the HTML head content. The way I've done it means all the sidebar headings aren't visible, but it works ok for what we need it for. Not totally secure as folks can just open developer tools and disable "display: none" to see the content, but means general punters won't see unnecessary clutter.

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

ssddanbrown · 2021-11-16T22:25:13Z

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.

satanahell · 2022-03-31T08:44:01Z

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.

ssddanbrown · 2022-03-31T10:56:04Z

@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.)

satanahell · 2022-03-31T11:08:25Z

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

TritonB7 · 2022-05-02T01:04:54Z

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

tacerus · 2022-09-24T15:49:34Z

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.

foxfabi · 2023-02-17T13:59:09Z

It would be helpful if I could show/hide these blocks via the settings.

RMurphy-Impact · 2023-03-07T16:08:28Z

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.

code-kungfu · 2023-03-21T11:55:52Z

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>

ghost · 2023-03-28T00:53:02Z

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 worked great. Thanks @tacerus.

retrokit-max · 2023-04-05T13:11:39Z

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

cgregaisc · 2023-05-30T14:47:08Z

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.

rooteam-deploy · 2024-02-14T20:15:52Z

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

hmkim · 2024-04-15T05:35:37Z

I'm not familiar with PHP code. Who can provide me with the applied code file? I'd like to see it and apply it myself.

code-kungfu · 2024-05-26T02:09:52Z

For those of you who are still in search of a solution which doesn't involve JavaScript, this might be helpful to you:
https://github.com/code-kungfu/bookstack-cktheme

ctrlaltca · 2024-10-04T07:55:03Z

It would be really nice if BookStack could integrate the two added permissions from https://github.com/code-kungfu/bookstack-cktheme/ in the main core, to avoid future breakage.

ssddanbrown added 🎨 Design 🔨 Feature Request 🖌️ View Customization labels May 18, 2019

ssddanbrown mentioned this issue May 27, 2019

How to remove recent activity, recent viewed, recent updated pages? #1467

Closed

ssddanbrown mentioned this issue Jun 6, 2019

Presentation Mode #1482

Closed

ssddanbrown mentioned this issue May 22, 2023

Ability to hide "Details" including "Recently Viewed", "Popular Books", and "New Books" #4255

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hide sidebar blocks. #1291

Hide sidebar blocks. #1291

andersonbrantes commented Feb 20, 2019 •

edited

Loading

ssddanbrown commented Feb 20, 2019

andersonbrantes commented Feb 21, 2019

unknowndomain commented Mar 9, 2019 •

edited

Loading

andersonbrantes commented Mar 10, 2019 •

edited

Loading

unknowndomain commented Mar 10, 2019 •

edited

Loading

ayyilmaz commented Mar 16, 2020

HAMFEM commented Mar 27, 2020

haveyougotanypets commented Jul 14, 2020

purpletreesoft commented Jul 24, 2020

SloCompTech commented Jan 12, 2021

kulpin74 commented Feb 5, 2021

SloCompTech commented Feb 5, 2021

ssddanbrown commented Feb 5, 2021

kulpin74 commented Feb 7, 2021

sarah-arrrgh commented Nov 16, 2021 •

edited

Loading

ssddanbrown commented Nov 16, 2021

satanahell commented Mar 31, 2022 •

edited

Loading

ssddanbrown commented Mar 31, 2022

satanahell commented Mar 31, 2022 •

edited

Loading

TritonB7 commented May 2, 2022

tacerus commented Sep 24, 2022 •

edited

Loading

foxfabi commented Feb 17, 2023

RMurphy-Impact commented Mar 7, 2023

code-kungfu commented Mar 21, 2023 •

edited

Loading

ghost commented Mar 28, 2023

retrokit-max commented Apr 5, 2023 •

edited

Loading

cgregaisc commented May 30, 2023

rooteam-deploy commented Feb 14, 2024

hmkim commented Apr 15, 2024

code-kungfu commented May 26, 2024

ctrlaltca commented Oct 4, 2024

Hide sidebar blocks. #1291

Hide sidebar blocks. #1291

Comments

andersonbrantes commented Feb 20, 2019 • edited Loading

ssddanbrown commented Feb 20, 2019

andersonbrantes commented Feb 21, 2019

unknowndomain commented Mar 9, 2019 • edited Loading

andersonbrantes commented Mar 10, 2019 • edited Loading

unknowndomain commented Mar 10, 2019 • edited Loading

ayyilmaz commented Mar 16, 2020

HAMFEM commented Mar 27, 2020

haveyougotanypets commented Jul 14, 2020

purpletreesoft commented Jul 24, 2020

SloCompTech commented Jan 12, 2021

kulpin74 commented Feb 5, 2021

SloCompTech commented Feb 5, 2021

ssddanbrown commented Feb 5, 2021

kulpin74 commented Feb 7, 2021

sarah-arrrgh commented Nov 16, 2021 • edited Loading

ssddanbrown commented Nov 16, 2021

satanahell commented Mar 31, 2022 • edited Loading

ssddanbrown commented Mar 31, 2022

satanahell commented Mar 31, 2022 • edited Loading

TritonB7 commented May 2, 2022

tacerus commented Sep 24, 2022 • edited Loading

foxfabi commented Feb 17, 2023

RMurphy-Impact commented Mar 7, 2023

code-kungfu commented Mar 21, 2023 • edited Loading

ghost commented Mar 28, 2023

retrokit-max commented Apr 5, 2023 • edited Loading

cgregaisc commented May 30, 2023

rooteam-deploy commented Feb 14, 2024

hmkim commented Apr 15, 2024

code-kungfu commented May 26, 2024

ctrlaltca commented Oct 4, 2024

andersonbrantes commented Feb 20, 2019 •

edited

Loading

unknowndomain commented Mar 9, 2019 •

edited

Loading

andersonbrantes commented Mar 10, 2019 •

edited

Loading

unknowndomain commented Mar 10, 2019 •

edited

Loading

sarah-arrrgh commented Nov 16, 2021 •

edited

Loading

satanahell commented Mar 31, 2022 •

edited

Loading

satanahell commented Mar 31, 2022 •

edited

Loading

tacerus commented Sep 24, 2022 •

edited

Loading

code-kungfu commented Mar 21, 2023 •

edited

Loading

retrokit-max commented Apr 5, 2023 •

edited

Loading