-
Adding the JKHub Bar
Installing the JKHub Bar can vary from site to site, as some require dirty
code hacks and workarounds, and some free hosts don't allow people to edit
their own templates. Nonetheless, the basic principles is this:
In the site's stylesheet (.css file), add:/* Start of JKHub Bar essential CSS. The below should not be customized or edited without good reason! */ .jkhub-bar{line-height:normal;position:absolute;top:0;left:0;width:100%;min-width:1000px;height:40px;border-bottom:1px solid rgba(0,0,0,0.5);font-family:Arial,Helvetica,sans-serif;font-size:16px;box-shadow:0 0 2px rgba(0,0,0,0.5);} .jkhub-bar img{border:none;} .jkhub-bar a:link,.jkhub-bar a:visited{text-decoration:none;text-shadow:none;} .jkhub-bar a:hover{text-decoration:underline;} #jkhub-gloss{position:absolute;top:0;left:0;height:100%;width:100%;/*background:url(https://jkhub.org/assets/bar/bargradient.png) repeat-x left 50%;*/} #jkhub-inner{position:relative;max-width: 1350px;height:40px;margin:auto;background-color:transparent;} #jkhub-logo{float:left;margin: 4px 8px 4px 0;} #jkhub-logo img {width:32px; height:32px; opacity:.2; filter: var(--logo-filter);} #jkhub-headline{float:left;display:inline-block;line-height:1.6;text-align:center;width:520px;border-style:inset;border-width:1px;height:34px;padding-top:3px;margin:3px 2px 2px 0;font-weight:bold;border-radius:17px;} #jkhub-prev-headline{display:block;float:left;font-size:25px;text-decoration:none;margin-right:2px;} #jkhub-next-headline{display:block;float:left;font-size:25px;text-decoration:none;margin-left:2px;} .jkhub-headline-buttons{float:left;margin-top:6px;} #jkhub-inner ul{margin:0;padding:0;list-style-type:none;} #jkhub-inner li:hover ul{opacity:1;display:block;} #jkhub-inner li:hover ul ul{display:none;} #jkhub-inner li li:hover ul{display:block;} #jkhub-inner ul a{display:inline-block;/*height:100%;*/width:90%;margin:0;padding:10px 0 0 0;text-decoration:none;width:100%;} .jkhub-categories{display:block;border-right-style:solid;border-right-width:1px;height:40px;text-align:right;} .jkhub-categories li{display:inline-block;height:40px;vertical-align:top;width:220px;margin-right:1px;} .jkhub-categories a{height:40px;border-left-style:solid;border-left-width:1px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.5);font-weight:bold;} .jkhub-categories a:hover{text-decoration:none;background-color:rgba(0,0,0,0.1);} .jkhub-menu{position:relative;text-align:left;width:101%;border-radius:0 0 6px 6px;opacity:0;transition:opacity 0.3s ease-out;display:none;z-index:9999;border-style:solid;border-width:1px;border-top:none;} .jkhub-menu li{display:block;height:16px;padding:5px 0 20px 0px;z-index:9999;} .jkhub-menu li:hover{background-color:rgba(0,0,0,0.1);} .jkhub-submenu{padding:0;} #jkhub-inner .jkhub-menu a{border-left:none;text-shadow:none;font-weight:normal;text-align:left;padding:0;font-size:14px;width:92%;background:transparent;} .jkhub-submenu{position:relative;padding:4px 0;margin-top:1px;top:-2.8em;left:220px;border-radius:6px;border-style:solid;border-width:1px;} #jkhub-prev-headline, #jkhub-next-headline{margin-top:5px;} .bar-spacer{height: 40px !important;} /* End of JKHub Bar essential CSS. The above should not be customized or edited without good reason! */ .jkhub-bar, .jkhub-menu,.jkhub-submenu{background: var(--menu-top_bg);} /* Edit the hex value to customize the bar's background color */ .jkhub-bar a:link, .jkhub-bar a:visited, .jkhub-bar, .jkhub-bar a:hover{color:var(--menu-top-text-color);} /*Edit the hex value to customize the bar's text color */ .jkhub-categories a, #jkhub-headline, .jkhub-categories,.jkhub-menu,.jkhub-submenu{border-color:var(--bar-border);} /* On light styles, you'll want to replace this with '0, 0, 0, 0.15' for optimal effect. Otherwise, there is usually no need to edit this. */ .jkhub-menu li:hover, .jkhub-categories a:hover{background-color:rgba(255, 255, 255, 0.25);} /* Same as above: on light styles, you'll want to replace this with '0, 0, 0, 0.1' for optimal effect. Otherwise, there is usually no need to edit this. */ #jkhub-next-headline, #jkhub-prev-headline{color:var(--menu-top-text-color);} /* Again: on light styles, you'll want to replace this with '0, 0, 0, 0.15'. Otherwise, there is usually no need to edit this. */ @media only screen and (max-width: 1285px) {.jkhub-bar,.bar-spacer{display:none;}} :root { --menu-margin: 0 0 20px 0; --breadcrumb-top-margin: 0 0 20px 0; --breadcrumb-bottom-margin: 20px 0 0 0; --menu-margin-dropd: 0 0 20px 0; --forums--section-title-margin: 0; --forums--section-row__description--font-size: 12px; --widget_vertical_item--border-radius: 0px; --forums--padding: 10px; --forums--margin-bottom: 20px; --menu-top-margin: 0; }
Find:
<body>
Replace with:
<body onload="init_bar()">
Find:
</body>
Replace with:
<script async src="https://jkhub.org/assets/bar/jkhub_bar.js"></script> </body>
That's all.
The code may vary ever so slightly between forum softwares - for
instance, some software will demand that you use ", while other
will demand that you use '. Still, that's the basic principle.Contact us at contact@jkhub.org or PM an admin if you need help.
Thanks for your interest in the JKHub Network!