Horizon
-
Joined: 18 Feb 2022
Posts: 60
|
 Posted: Mon Dec 09, 2024 12:29 pm Post subject: Improving the Abyss Web Server Web console layout |
 |
|
Hello,
I created some time ago a CSS mod for Abyss Web Server where its layout gets improved & enlarged to account for longer texts, such as URLRewrite rules & the need for text wrapping.
This modification also adds text-wrapping for long texts that exceed the width of a table column, especially useful for URLRewrite.
It makes the Abyss Web Server UI much easier for working with Reverse-Proxy & URLRewrite rules, as you can see with below previews:
Hosts table:
Hostnames list:
Reverse-Proxy:
URLRewrite:
You can copy the CSS file here or download it on Pastebin (save it as 'console-mods.css', then put it in your Abyss Web Server's 'console' folder):
https://pastebin.com/TG76LwyD
| Code: | /* Get wider and more comfortable columns in Hosts view */
div.wform_frame > div#_hosts_Pane > div.wform_item_name {
text-align: center !important;
display: table-row-group !important;
width: calc(100% - 1em - 5px) !important;
max-width: calc(100% - 1em - 5px) !important;
}
div.wform_frame > div#_hosts_Pane > div.wform_item_content,
div.wform_frame > div#_hosts_Pane > div.wform_item_content > span > div.wlist_frame > div.wlist_secondary_frame > table.wlist {
width: 1100px !important;
max-width: 1100px !important;
}
/* Get wider and more comfortable rows in URLRewrite */
table.wlist > thead > tr > td.wlist_item_content_head,
table.wlist > tbody > tr > td.wlist_item_content,
table.wlist > tfoot > tr > td.wlist_footer {
width: 450px !important;
max-width: 450px !important;
overflow-wrap: break-word !important;
white-space: pre-wrap !important;
}
div.wform_frame > div > div.wform_item_name {
width: 100px !important;
max-width: 100px !important;
overflow-wrap: break-word !important;
white-space: pre-wrap !important;
}
div.wform_frame > div > div.wform_item_name > label,
div.wform_frame > div > div.wform_item_name > label > a {
/*
display: contents !important;
*/
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 0 !important;
}
/* Override console CSS to allow the CSS mods to work */
.wform_item_name, .wform_item_name_error {
display: flex !important;
}
|
Afterwards you have to open the 'console.css' file in the same 'console' folder and put a new line at the top of it:
| Code: | | @import url("console-mods.css"); |
This way the Abyss Web Server console will always load the CSS modifications without the need for browser extensions. |
|
