Bookstack: Make pages bigger

[madsmka]

Is there a way to make the pages bigger in the width? Maybe a feature request or is it possible with the Custom HTML if so how?

[philjak]

You could put this into the custom HTML box in the settings menu, but it won't make it that much bigger.

<style type="text/css">
.tri-layout-container {
    margin-left: 18px;
    margin-right: 18px;
    grid-template-columns: 1fr 5fr 1fr;
}
</style>

[KeithIT-Dev]

I was wondering the same thing. I don't really like this new UI

[zlatin]

I think an option to hide sidebars will solve the problem.

[KeithIT-Dev]

The font is also an issue, the feature updates were great but the UI shouldn't have changed.

[madsmka]

I just think that there are so much wasted space from the page to the menus. Which we really could use in some of our big pages.

[KeithIT-Dev]

I just think that there are so much wasted space from the page to the menus. Which we really could use in some of our big pages.

I agree. Hopefully it all gets addressed in a upcoming update. I'm glad my team and I was able to view the demo site before I upgraded my prod instance.

[ssddanbrown]

Using the following CSS in the "Custom HTML Head" option will help wider things a bit if that's what you're after:

<style>
@media screen and (min-width: 1400px) {
    .tri-layout-middle-contents {
        max-width: 1700px;
    }
}
.page-content { max-width: 1200px; }
</style>

Could be some side-effects of this and may break thus require tweaking on update.

---

The font is also an issue,

As in the fonts used? I don't think these have changed in a good while. A set of system fonts have been the default since 2017 at least. Or is this in regards to weighs and sizes? I specifically tried not to change the sizes of page content much to allow a smooth upgrade of user content.

the UI shouldn't have changed

The UI will evolve as required over time. When doing this redesign I tried my best to explain the goals, keep development open and gain feedback from BookStack users as can be seen here: https://github.com/BookStackApp/BookStack/pull/1153

The change has generally been well received.

Just to clarify, the page-content wide remained pretty much the same to ensure that user-content would generally be unaffected upon update & space was generally better utilised in the new design thanks to a 3-column layout instead of 2.

Hopefully it all gets addressed in a upcoming update.

It probably won't.

[madsmka]

Using the following CSS in the "Custom HTML Head" option will help wider things a bit if that's what you're after:

<style>
@media screen and (min-width: 1400px) {
    .tri-layout-middle-contents {
        max-width: 1700px;
    }
}
.page-content { max-width: 1200px; }
</style>

Could be some side-effects of this and may break thus require tweaking on update.

Yes, this is what I was looking for, thanks! :)

[Liandriz]

Thanks for the CSS tip, is it even possible too to disable the right sidebar, letting it on the left all the time no matter what is the page width?
Thanks!

[ssddanbrown]

@Liandriz You could copy out the mid-screen styles and extend the range, so something like:

<style>
    @media screen and (min-width: 1000px) and (max-width: 4200px) {
        .tri-layout-container {
            grid-template-areas:
                "c b b"
                "a b b"
                ". b b";
            grid-template-columns: 1fr 3fr;
            grid-template-rows: min-content min-content 1fr;
            padding-right: 24px;
        }
}
</style>

Again, Not officially supported and could cause side-effects but might get you what you want.

---

Since the original issue creator's problem has been addressed I'm going to go ahead and close this.