Adjust KOH Terminal width?

Post Reply
sremick
Jr. Bludit
Posts: 4
Joined: Wed Jun 15, 2022 1:19 am

I'm testing Blundit at the moment, and right not KOH Terminal is my favorite theme. However, I'd prefer that it made better use of screen real estate and was wider. Actually, this is my general problem with a lot of themes.

Is there a way to adjust the width of KOH Terminal? Even better, is there a general universal trick for adjusting the width of any theme? I tried the suggesting in this old thread but it didn't work:
viewtopic.php?p=8956
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

The theme KOH Terminal uses Bootstrap with a fixed container (CSS class .container). The width depends of the size of the screen:

https://www.w3schools.com/bootstrap4/bo ... ainers.asp

To change this you have to add your own media queries.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
sremick
Jr. Bludit
Posts: 4
Joined: Wed Jun 15, 2022 1:19 am

Edi wrote: Wed Jun 15, 2022 4:19 pm The theme KOH Terminal uses Bootstrap with a fixed container (CSS class .container). The width depends of the size of the screen:

https://www.w3schools.com/bootstrap4/bo ... ainers.asp

To change this you have to add your own media queries.
Thanks for the quick reply! I appreciate your effort to "teach a man to fish". However I'm afraid your assumption of my baseline understanding was a bit too generous. ;)

What file is the "container" CSS defined?
Can you elaborate as to what you mean by "add your own media queries"?

Thanks!
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
Contact:

The modification of themes need some basic understandings of CSS and Bootstrap. There are a lot of tutorials about it. ;-)

For example if the width of your screen is more than 1200 px you can use the following media query:

Code: Select all

@media (min-width: 1200px) {

   .container {
      max-width: 1200px;
   }

}
This instead of the media query with the max-width of the theme:

Code: Select all

@media (min-width: 1200px) {

   .container {
      max-width: 1140px;
   }

}
You can do this by adding the following to the field "Head" of the plugin HTML Code:

Code: Select all

<style>
@media (min-width: 1200px) {

   .container {
      max-width: 1200px;
   }

}
</style>
But be aware that Bootstrap uses several media queries for different screen sizes.
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
sremick
Jr. Bludit
Posts: 4
Joined: Wed Jun 15, 2022 1:19 am

Thank you! This seems to be working out well so far and I'm able to get it how I like.
Post Reply