[Slight] adjustment of forum GUI - for more convenient reading and editing

Plug-in and third party software discussion.
Post Reply
Thy Grand Voidinesss
Posts: 697
Joined: Wed Jun 01, 2022 5:01 pm

[Slight] adjustment of forum GUI - for more convenient reading and editing

Post by Thy Grand Voidinesss »

I am working on a CSS code for this forum [and other phpBB ones [https://www.phpbb.com/] that I happen to have a user account on]. This adjustments can be applied with plugins for web browsers like Stylish

The adjustment below are nowhere a complete work and I am not a programmer - but nevertheless this code is [as to my knowledge] perfectly usable. However beware that I was making it with my personal setup and subjective preferences / modus operandi in mind, consisting of:

- Windows 10 scaled to 150%

- Firefox set to a 150% zoom-in

- 21:9 aspect ratio monitor with 3840 x 1600 resolution

- displeasure of counter-productive wasted on-screen space

- using also Dark Reader plugin for automated adjusting of colors to a dark themed look


#page-body
{
margin: 0;
}
#phpbb
{
padding: 0;
}
#wrap
{
padding-top: 0;
margin-top: -23px;
}
div.panel:nth-child(2),
div.panel:nth-child(4),
#postingbox,
#tabs
{
margin: 0;
padding: 0;
}
.submit-buttons
{
margin:0 !important;
padding:0 !important;
}
.copyright
{
DISPLAY: none !IMPORTANT;
}
#wrap
{
margin-bottom: -20px;
padding-bottom: 0;
}
#phpbb > div:nth-child(7),
#phpbb > div:nth-child(8),
#phpbb > div:nth-child(12)
{
DISPLAY: none !IMPORTANT;
}
.smiley-box img
{
height: 0;
width: 0;
}
#smiley-box > a:nth-child(1),
#smiley-box > a:nth-child(2),
#smiley-box > a:nth-child(3),
#smiley-box > a:nth-child(4),
#smiley-box > a:nth-child(5),
#smiley-box > a:nth-child(6),
#smiley-box > a:nth-child(7),
#smiley-box > a:nth-child(8),
#smiley-box > a:nth-child(18)
{
DISPLAY: none !IMPORTANT;
}
#site-description
{
DISPLAY: none !IMPORTANT;
}
html body#phpbb.notouch.section-viewtopic.ltr.hasjs div#wrap.wrap,
html body#phpbb.notouch.section-posting.ltr.hasjs div#wrap.wrap
{
margin-top: -77px;
}
#message
{
min-height: 650px;
margin-left: 5px;
overflow: auto;
padding-left: 4px;
}
#message-box
{
inline-size: 670px;
}
#topicreview
{
height: auto;
overflow: auto;
}
#format-buttons
{
background: rgba(255,255,255,0.66);
border: #11a3ea;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
display: block !important;
margin-top: 0;
margin-left: 157px;
padding-bottom: 2px;
padding-left: 0.5%;
padding-top: 1px;
position: sticky !important;
top: 0;
width: 45%;
position: relative;
z-index: 1000 !important;
}
div.content:nth-child(2)
{
border: 1px #11a3ea;
border-style: solid solid none none;
inline-size: 660px;
word-spacing: 24%;
padding-right: -10px;
}
html body#phpbb.notouch.section-posting.ltr.hasjs div#wrap.wrap div#page-body.page-body form#postform div#preview.post.bg2 div.inner div.postbody
{
border: 1px rgba(17,163,234,0.5);
border-right-style: solid;
inline-size: 672px;
}
#page-header
{
margin-top: 0 !important;
position: relative;
}
.headerbar
{
transform: translate(0,-100px);
}
#search-box
{
transform: translate(6px,170px);
}
.search-box .inputbox
{
font-size: 15px;
padding-left: 11px;
width: 444px;
}
#subject
{
left: -88px !important;
position: relative;
width: 800px !important;
}
.posting-title,
.topic-title
{
font-size: 17px;
padding-left: 10px;
margin-top: -3px;
transform: translate(0,2px);
}


All in all this code saved me a lot of vertical space and made the format menu stick to the top whenever scrolling down an edited post. But at some point I realized that such changes of layout / functionality of this forum will not be sufficient enough - thus I decided to ditch the direction I initially took [of mainly floating menu]

Nowadays I am tying to make the window with an edited post to be placed side by side with the windows of its previewed version. When I finish that and test it thoroughly, I plan to also publish it
Post Reply