This is JavaScript that can be used with Tampermonkey/Greasemonkey
Screenshot: https://i.imgur.com/STLkXMQ.png
var searchSelect = document.getElementById("search-box"); // move pool navigation to above search box var poolSelect = document.getElementById("pool-nav"); if (poolSelect != null) { //only moves elements if they exist, to prevent null error searchSelect.before(poolSelect); } // more compact navigation arrows to make room for pool name var getFirst = document.querySelectorAll("#pool-nav .first"); var getPrev = document.querySelectorAll("#pool-nav .prev"); var getNext = document.querySelectorAll("#pool-nav .next"); var getLast = document.querySelectorAll("#pool-nav .last"); var i; for (i = 0; i < getPrev.length; i++) { //loop for if a post is in more than one pool getFirst[i].innerHTML = "«"; getPrev[i].innerHTML = "‹"; getNext[i].innerHTML = "›"; getLast[i].innerHTML = "»"; } // adds class name to pool for CSS styling if (poolSelect != null) { poolSelect.className = "ui-corner-all nav-notice"; } // move parent/child notices to above search box var childSelect = document.getElementsByClassName("bottom-notices")[0]; if (childSelect != null) { if (childSelect.children.length > 0) { //only moves elements if they exist, to prevent null error searchSelect.before(childSelect); }} // fixes situation where empty container displays when viewing a pool without an active search var navSelect = document.getElementById("nav-links"); if (navSelect != null) { if (navSelect.children.length == 0) { navSelect.style.display = "none"; }}
Corresponding CSS:
#has-children-relationship-preview { white-space: normal; } #has-parent-relationship-preview-link { float: right; } #has-children-relationship-preview-link { float: right; } .bottom-notices { flex-direction: column; margin-top: 0 !important; font-size: .8em; } .parent-children { flex-direction: column; } #pool-nav li { display: flex; padding: 0 !important; position: inherit !important; height: inherit !important; } #pool-nav a { position: inherit !important; } #pool-nav span { position: inherit !important; line-height: 1.25em; } .pool-name { font-size: 80%; font-weight: 700; margin:auto; padding: 0 5px !important; } #pool-nav .prev { margin: 0 .1em; font-size: 150%; font-weight:normal; } #pool-nav .next { margin: 0 .1em; font-size: 150%; font-weight:normal; } #pool-nav .first { font-size: 150%; font-weight:normal; } #pool-nav .last { font-size: 150%; font-weight:normal; }
I am a novice coder so if anything is broken let me know
Edit: better null handling
4/5/2020 Now works with latest theme
Updated