CSS QOL #1177

Closed
opened 2026-02-05 00:09:26 +03:00 by OVERLORD · 2 comments
Owner

Originally created by @FMCUSystemAdmins on GitHub (May 9, 2019).

Hello,

I am putting this here because I am not familiar with how to do a pull/commit.

Upon first use of BookStack, I was a bit irritated by the large header indicated here:
before

Using the "Inspect" function of the browser, I narrowed down the CSS that needed to be tweaked to have the header appear like this (much more appealing):
after

The CSS file I tweaked to make this happen was here: /var/www/bookstack/public/dist/styles.css
Line 928, .col-md-9 width changed to 70% from 75%
Line 940, .col-md-3 width changed to 30% from 25%

Thank you,
Craig

Originally created by @FMCUSystemAdmins on GitHub (May 9, 2019). Hello, I am putting this here because I am not familiar with how to do a pull/commit. Upon first use of BookStack, I was a bit irritated by the large header indicated here: ![before](https://user-images.githubusercontent.com/50454265/57477652-cb036380-725e-11e9-8764-7bcd92f240ab.PNG) Using the "Inspect" function of the browser, I narrowed down the CSS that needed to be tweaked to have the header appear like this (much more appealing): ![after](https://user-images.githubusercontent.com/50454265/57477751-fab26b80-725e-11e9-801f-3e4e425db2af.PNG) The CSS file I tweaked to make this happen was here: /var/www/bookstack/public/dist/styles.css Line 928, .col-md-9 width changed to 70% from 75% Line 940, .col-md-3 width changed to 30% from 25% Thank you, Craig
Author
Owner

@ssddanbrown commented on GitHub (May 9, 2019):

Hi @FMCUSystemAdmins,
Thank you for offering this tweak.

As of the latest release, v0.26, The design of BookStack has changed quite considerably, and the underlying layout code is now different so such a tweak could not be applied to the current version of BookStack. You can get a sense of the new design via the demo here:
https://demo.bookstackapp.com/

Just something to note, The header is only large due to the long application name that causes the text to drop-down. We can only support so many characters while displaying in a reasonable format. It may be better to use an initialism or build the name in smaller format into the logo image.

@ssddanbrown commented on GitHub (May 9, 2019): Hi @FMCUSystemAdmins, Thank you for offering this tweak. As of the latest release, v0.26, The design of BookStack has changed quite considerably, and the underlying layout code is now different so such a tweak could not be applied to the current version of BookStack. You can get a sense of the new design via the demo here: https://demo.bookstackapp.com/ Just something to note, The header is only large due to the long application name that causes the text to drop-down. We can only support so many characters while displaying in a reasonable format. It may be better to use an initialism or build the name in smaller format into the logo image.
Author
Owner

@FMCUSystemAdmins commented on GitHub (May 9, 2019):

Ok, we are actually upgrading tonight, so I suppose I put the cart before the horse a bit here.

Thanks for the explanation.
Thanks,
Craig Jones
Sr. System Administrator
Firstmark Credit Union | Information Technology
2023 Gold Canyon Dr. | San Antonio, TX 78232
210.341.9602 x10514
craigj@firstmarkcu.orgmailto:mcraigj@firstmarkcu.org | www.firstmarkcu.orghttp://www.firstmarkcu.org/
CONFIDENTIAL NOTIFICATION: This electronic mail message and any files or documents transmitted with it contain information belonging to the sender that is confidential and may be legally privileged. This information is intended for the use of the individual or entity to which it is addressed. If you are not the intended recipient, be advised that you may have received this electronic mail in error and that any use, including but not limited to, disclosure, copying, distribution, forwarding, printing, dissemination of any kind, or action taken in reaction to or reliance on the contents of the information is strictly prohibited. If you have received this electronic mail message in error, please immediately delete it as permanently as possible and notify the sender.

From: Dan Brown notifications@github.com
Sent: Thursday, May 09, 2019 2:22 PM
To: BookStackApp/BookStack BookStack@noreply.github.com
Cc: zzSystemAdmins zzsystemadmins@firstmarkcu.org; Mention mention@noreply.github.com
Subject: Re: [BookStackApp/BookStack] CSS QOL (#1438)

Hi @FMCUSystemAdminshttps://github.com/FMCUSystemAdmins,
Thank you for offering this tweak.

As of the latest release, v0.26, The design of BookStack has changed quite considerably, and the underlying layout code is now different so such a tweak could not be applied to the current version of BookStack. You can get a sense of the new design via the demo here:
https://demo.bookstackapp.com/

Just something to note, The header is only large due to the long application name that causes the text to drop-down. We can only support so many characters while displaying in a reasonable format. It may be better to use an initialism or build the name in smaller format into the logo image.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/BookStackApp/BookStack/issues/1438#issuecomment-491032745, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMA556MO3FOQ6754DPPNDV3PUR2UHANCNFSM4HL47M7Q.

@FMCUSystemAdmins commented on GitHub (May 9, 2019): Ok, we are actually upgrading tonight, so I suppose I put the cart before the horse a bit here. Thanks for the explanation. Thanks, Craig Jones Sr. System Administrator Firstmark Credit Union | Information Technology 2023 Gold Canyon Dr. | San Antonio, TX 78232 210.341.9602 x10514 craigj@firstmarkcu.org<mailto:mcraigj@firstmarkcu.org> | www.firstmarkcu.org<http://www.firstmarkcu.org/> CONFIDENTIAL NOTIFICATION: This electronic mail message and any files or documents transmitted with it contain information belonging to the sender that is confidential and may be legally privileged. This information is intended for the use of the individual or entity to which it is addressed. If you are not the intended recipient, be advised that you may have received this electronic mail in error and that any use, including but not limited to, disclosure, copying, distribution, forwarding, printing, dissemination of any kind, or action taken in reaction to or reliance on the contents of the information is strictly prohibited. If you have received this electronic mail message in error, please immediately delete it as permanently as possible and notify the sender. From: Dan Brown <notifications@github.com> Sent: Thursday, May 09, 2019 2:22 PM To: BookStackApp/BookStack <BookStack@noreply.github.com> Cc: zzSystemAdmins <zzsystemadmins@firstmarkcu.org>; Mention <mention@noreply.github.com> Subject: Re: [BookStackApp/BookStack] CSS QOL (#1438) Hi @FMCUSystemAdmins<https://github.com/FMCUSystemAdmins>, Thank you for offering this tweak. As of the latest release, v0.26, The design of BookStack has changed quite considerably, and the underlying layout code is now different so such a tweak could not be applied to the current version of BookStack. You can get a sense of the new design via the demo here: https://demo.bookstackapp.com/ Just something to note, The header is only large due to the long application name that causes the text to drop-down. We can only support so many characters while displaying in a reasonable format. It may be better to use an initialism or build the name in smaller format into the logo image. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://github.com/BookStackApp/BookStack/issues/1438#issuecomment-491032745>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AMA556MO3FOQ6754DPPNDV3PUR2UHANCNFSM4HL47M7Q>.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#1177