We need compact layout design for more space to browse content
-
Here is my simple CSS mod for this forum, i hope vivaldi forum dev will use it to improve the forum usability:
// lower header menu visibility to 10% when browsing content #header-menu:not(:hover) {opacity: 0.1; transition: opacity 0.7s 0.3s;} // autohide main menu; show by mouseover header menu #header-menu .menuwrapper {visibility:hidden; transition: visibility 1s 0s;} #header-menu:hover .menuwrapper {visibility: visible;} // move pagination to right; position vertically div.text-center.pagination-container {position: fixed; top: 58.5%; right: 0; font-size: 90%; max-width: 38px; transform: translateY(-50%);} .pagination > li > a {border: none;}
This mod provide maximum viewing space for content by hiding the header menu partially while preserve all functionality. Next, moving the pagination to the right-side user can switch page anytime without scrolling to the bottom.
One thing i can't accomplish with pure CSS mod is always showing the header menu when the screen is on top-most position. Thus, i think this can only be done by the forum dev.
Thanks for your support.
-
The pagination on the right is a bit messy right now, but a very interesting idea.
-
@luetage It suppose to look like this, well at least on my setup:
I guess my mod doesn't work on all setup, that's why it's best to be implant by forum dev natively.
-
mod update for new forum layout:
/* off-white background color to protect eyes */ body, .composer, .preview {background-color: rgb(204, 232, 207);} .form-control, .write {background-color: rgba(0,128,0,.1);} .form-control:focus-within, .write:focus-within {background-color: rgba(0,50,0,.1);} /* shrink header menu into icons when not needed */ #nav-dropdown {visibility:visible; margin-right:-4%;} #header-menu {transition: 0.15s ease-out 0s;} #header-menu:not(:focus-within):not(:hover) {visibility:hidden; margin-top:-1%; opacity:0.1; transition: 0.3s 0.4s} #header-menu:not(:focus-within):not(:hover) ~ #submenu:not(:focus-within):not(:hover) { margin-top:-1%; opacity:0.1; visibility:hidden; transition: 0.2s 0.15s;} /* move pagination to right side */ div.text-center.pagination-container { position: fixed; right: 0; font-size: 90%; max-width: 38px; top: 50%; transform: translateY(-50%);} .pagination > li:not(.active) > a:not(:hover) {background-color:transparent; border-color:transparent;} .pagination-container .fa {transform: rotate(90deg);} /* marker for voted post */ .upvoted { box-shadow: 0 0 0 2px cornflowerblue inset;} .downvoted { box-shadow: 0 0 0 2px red inset; }
-
@dude99 This is very cool; thank you.
I'm now "purplifying" my local copy of it.
-
-
Thanks for your request, but as this is an old request with few votes, I'm going to move it to the main forum area out of requests, that way if people want to use the CSS they can find it.
-