Christian 2.0 wrote:Keep us posted on progress.
Ok, there is some progress.
I now have the CSS running live, on the actual site files rather than in Stylish, so if you're curious the forum url is:
http://hawkdawg.com/forums/index.php (you'll have to select Prosilver Dark from the quick style select over at the right).
I've pulled the Buttonmenu extension's content out of its default overall_header_navbar_before.html and put it into a custom overall_header_body_before.html. This isn't coded quite the way the default menu was coded. Markup and CSS are different, and the superfluous javascript has been removed. I haven't got around to doing the responsive/hamburger thing on it yet, but that will be along soon (basic checkbox hack and pure CSS burger, set li's to block, blah blah blah).
Edit: The hamburger top menu is live now.
The empty overall_header_navbar_before.html still came in handy though, because I wanted the login form sitting just below the banner, and that file was ideal for the purpose. The form was deleted from Prosilver's index.body.html and thrown into overall_header_navbar_before.html, minus some crud I didn't think it needed. Threw some eye candy at it. Sorted.
Incidentally, the eye candy is currently sitting in buttonmenu.css, because that loads after everything else anyway so it's a good one for custom tweaks. So the old Buttonmenu extension is now menu + custom login + sundry other tricks.
CSS looks like this at the moment:
Code: Select all
body {
padding: 0 0 12px;
}
#buttonmenu {
position: relative;
z-index: 9;
padding: 4px 0 2px;
background: #242a36;
box-shadow: 0 3px 4px #0009;
}
#buttonmenu .inner {
max-width: 1152px;
margin: 0 auto;
padding: 0 20px;
}
#buttonmenu #search {
margin: 2px 6px;
background-color: #fff4;
border-radius: 4px;
}
#buttonmenu .menu_search {
width: 140px;
padding: 3px 6px;
background-color: #0000;
border: 0;
}
#buttonmenu #search a {
padding: 3px 4px 2px;
border-left: 1px solid #242a36;
}
#buttonmenu ul {
list-style: none;
margin: 2px 0;
padding: 0;
}
#buttonmenu>.inner>ul>li {
display: inline-block;
position: relative;
}
#buttonmenu a {
display: block;
padding: 6px 12px;
color: #9d9d9d;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
}
#buttonmenu>.inner>ul>li>a {
border-radius: 4px;
}
#buttonmenu a:hover, #buttonmenu a:focus, #buttonmenu ul>li:hover>a {
background-color: rgba(0,0,0,.3);
color: #ddd;
text-decoration: none;
}
#buttonmenu ul ul {
position: absolute;
z-index: 9;
left: -120vw;
max-height: 0;
overflow: hidden;
padding: 6px 0 8px;
background: #242a36;
border: 1px solid;
border-color: #444 #3b3b3b #333;
border-radius: 0 7px;
box-shadow: 2px 3px 4px #0009;
transition: left .3s step-end, max-height .3s step-end;
}
#buttonmenu li:hover ul {
left: 0;
max-height: 66em;
transition: left .05s step-end, max-height .2s linear .05s;
}
#menu ul ul li {}
#menu ul ul li a {}
/* Hide default search input.*/
#search-box {
display: none;
}
/* Add temporary code for quick style select. */
#quick_style {
padding: 0 6px;
border-radius: 4px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
/* For IE and Edge */
#quick_style::-ms-expand {
display: none;
}
#quick_style option {
padding: 3px 1em 3px 0;
}
/* Add temporary beastiness for general Prosilver Dark tweaks. */
.headerbar {
margin-bottom: 0;
padding: 4px 4px 0;
border-width: 1px 1px 0 !important;
border-radius: 7px 7px 0 0;
}
.headerbar>.inner {
background-image: url(Banner_36.jpg) !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center;
background-position: center 65%;
border: solid #222;
border-width: 1px 1px 0;
border-radius: 4px 4px 0 0;
}
.site-description {
float: left;
width: 100%;
}
h1 {
margin-top: 1.7em;
margin-left: .4em;
color: #ccc !important;
font-size: 2.6em;
text-shadow: 0 -1px 0 #000, 0 1px 1px #000;
opacity: .9;
}
#site-description p {
margin-left: .8em;
color: #ccc !important;
font-size: 1.1em;
font-weight: 700;
text-shadow: 0 -1px 0 #000, 0 1px 1px #000;
opacity: .9;
}
#logo {
padding: 3em .6em 6em 1em;
opacity: .9;
}
#logo .site_logo {
width: 72px !important;
height: 72px !important;
background-size: contain;
}
#page-header .headerspace {
margin: 0;
padding: 6px 12px 0;
background: #242a36;
border: solid rgba(255,255,255,0.04);
border-width: 0 1px;
}
fieldset.quick-login {
margin: 0;
padding: 0 0 6px;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.quick-login .inputbox {
padding: 3px;
background: rgba(255,255,255,0.4) !important;
color: #000 !important;
border-radius: 4px;
}
#autologin {
opacity: .8;
}
.quick-login .button2 {
padding: 2px 6px;
border-radius: 4px;
}
.navbar {
border-width: 0 1px 1px !important;
border-radius: 0 0 7px 7px;
}
#nav-main {
padding: 3px 0 5px;
}
.section-index .page-body>p {
display: none;
}
.section-index .page-body>.action-bar.compact {
margin: 8px;
}
.forabg .header a {
padding: 0 10px;
color: #9d9d9d !important;
font-size: 1.5em;
font-weight: 400;
text-transform: none;
}
.forabg .list-inner>strong {
display: block;
height: 0;
margin: 4px 0 0;
overflow: hidden;
/* border-top: 1px solid rgba(255,255,255,.04);*/
}
.forabg .list-inner>.subforum {
display: inline-block;
width: 30%;
padding: 4px 0 0;
}
.forabg dd.posts, .forabg dd.topics {
width: 75px;
}
.forabg dd.lastpost {
width: 290px;
}
li.header dd {
margin: 0;
padding: 6px 0 0;
color: #838b98 !important;
}
.lastpost .username-coloured::after {
color: #838b98 !important;
content: ",";
}
.lastpost .username-coloured + a,
.lastpost .username-coloured + a + br {
display: none;
}
.postbody .content {
color: #aaa !important;
font-size: 1.4em;
}
dl.thumbnail img {
border-color: #666666;
background-color: #fff4;
}
/* Media queries. */
@media screen and (max-width: 1220px) {
#buttonmenu .inner {
margin: 0 12px;
}
}
Слава Україні! 
