Topic: my Draft (Read 87 times)
--main_color: #62d;
--main_color: #f16;
--main_color: #f16;
Code:
/* ----------------------------------------------------
custom bitcointalk header
author: 0x256 ¯\_(ツ)_/¯
url: https://bitcointalk.org/index.php?action=profile;u=2680306
------------------------------------------------------*/
:root {
/*---------------------------------------------------
custom your style by changing these values below
---------------------------------------------------*/
/* header position: fixed or absolute */
--header_position: fixed;
/* main colors */
--main_color: #62d;
/*basic options*/
--h_bgColor: #fff;
--h_fColor: #000;
--h_act_color: var(--main_color);
/*additional options*/
--logo_color: var(--h_fColor);
--h_act_bgColor: var(--h_bgColor);
/*header links on mouse hover */
--h_bgColor_hover: var(--h_bgColor);
--h_fColor_hover: var(--h_fColor);
/* search input and button */
--btn_bgColor: var(--main_color);
--btn_fColor: var(--h_bgColor);
--input_bgColor: var(--h_bgColor);
--input_fColor: var(--h_fColor);
--input_bColor: #ccc;
/* end custom */
}
/*overflow html page!*/
html {
/* overflow-x: hidden; */
}
/* navbar */
body > div.tborder+table {
position: var(--header_position);
top: 10px;
left: 160px;
}
/*change Bitcoin_Forum_color */
table#smfheader td.catbg >span {
color: var(--logo_color);
} /* separator between Bitcoin Forum and navbar */
table#smfheader td.catbg >span:after {
content: "";
border-right: 1px solid var(--h_fColor);
padding-right: 8px;
opacity: 0.15;
}
/*---------------------------------------------
navbar
---------------------------------------------*/
/* remove navbar background */
body > div.tborder+table .maintab_back, .maintab_active_back {
background-image: none !important;
padding: 0;
}
.maintab_first,
.maintab_last,
.maintab_active_first,
.maintab_active_last {
display: none;
}
.maintab_active_back > a {
color: var(--h_act_color) !important;
background-color: var(--h_act_bgColor) !important;
}
body > div.tborder+table .maintab_back a:link, body > div.tborder+table .maintab_back a:visited,
.maintab_active_back a:link, .maintab_active_back a:visited {
padding: 10px 6px !important;
color: var(--h_fColor);
}
body > div.tborder+table .maintab_back a:hover,
.maintab_active_back a:hover {
opacity: 0.85;
background-color: var(--h_bgColor_hover);
color: var(--h_fColor_hover);
}
body > div.tborder+table .maintab_back a:hover strong {
border-color: var(--h_bgColor_hover);
}
/*---------------- end navbar --------------------*/
/* remove simple machines logo (smflogo) from header */
table#smfheader tr:first-child > td+td.catbg img {
display: none;
}
/* top bar */
table#smfheader {
position: var(--header_position);
top: 0; left: 0; right: 0;
box-shadow: 0 0 5px 0 #aaa;
}
/*element up to header*/
body > div.tborder+table,
table#smfheader,
.tborder table#smfheader+table+table tr > td+td > form,
.tborder table#smfheader+table {
z-index: 4;
}
table#smfheader tr > td.catbg {
border: none;
background-image: none;
background-color: var(--h_bgColor);
}
table#smfheader tr > td.catbg:first-child {
color: var(--h_fColor);
}
/*Messages notification*/
body > div.tborder+table tr > td > a > strong {
background: #f22;
padding: 0 4px;
position: absolute;
top: -2px;
margin-left: -6px;
color: #fff;
border-color: var(--h_bgColor);
border-style: solid;
border-right: 3px;
border-top: 3px;
z-index: 1;
}
/* News bar */
body>.tborder {
border: none;
background-color: transparent;
}
#upshrinkHeader2 {
display: table !important;
}
/* news bar style */
#upshrinkHeader2 td.titlebg2 {
background-image: none;
border:none;
padding: 0;
background: var(--h_bgColor);
background: linear-gradient(
rgba(255, 255, 255, 0.95),
rgba(255, 255, 255, 0.85)
) var(--main_color);
}
/*news title*/
#upshrinkHeader2 td.titlebg2 > span.smalltext > b:first-child {
background: var(--main_color);
background: linear-gradient(
rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0.4)
) var(--main_color);
padding: 5px;
display: inline-block;
}
/*------------- end News bar ------------*/
/*remove background behind hello username ..*/
body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child,
body>.tborder table#smfheader+table tr:first-child > td.titlebg2:first-child+td {
background: none; border: none;
background-color: var(--h_bgColor);
padding: 0;
}
#upshrinkHeader td#variousheadlinks {
background-color: #fff !important;
}
/*put search input on top header*/
.tborder table#smfheader+table+table tr > td+td > form {
display: inline-block !important;
position: var(--header_position);
background: none; border: none;
top: 4px;
right: 21%;
z-index: 4;
}
/* hide the extra search icon */
.tborder table#smfheader+table+table tr > td+td > form > a > img {
display: none;
}
.tborder table#smfheader+table+table tr > td+td {
padding: none;
}
/*after header*/
.tborder table#smfheader+table {
border-bottom: none !important;
position: var(--header_position);
top: 0; right: 20px;
width: auto;
z-index: 4;
}
#upshrinkHeader2 {
margin-top: 30px;
}
/* remove date and time from top bar */
table#smfheader + table > tbody > tr:first-child > td:last-child span {
display: none;
}
/*-----------------------*/
/* search input and button
------------------------------------*/
#upshrinkHeader2 input[type="text"],
#upshrinkHeader2 input[type="submit"] {
outline: none;
border: none;
padding: 4px 8px;
}
/* input */
#upshrinkHeader2 input[type="text"] {
border: 1px solid var(--input_bColor);
background-color: var(--input_bgColor);
color: var(--input_fColor);
}
#upshrinkHeader2 input:focus {
border-color: var(--btn_bgColor);
}
/* button */
#upshrinkHeader2 input[type="submit"] {
cursor: pointer;
background: var(--btn_bgColor);
background: linear-gradient(
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.1))
var(--btn_bgColor);
color: var(--btn_fColor);
}
#upshrinkHeader2 input[type="submit"]:hover {
background: linear-gradient(
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.2))
var(--btn_bgColor);
}
/*----------------------------------*/
/*remove search Form from top bar on screens less than 1000px (small screen) */
@media (max-width: 1000px) {
.tborder table#smfheader+table+table tr > td+td > form {
position: relative;
top: 0;
right: 0;
z-index: 0;
}
}
/*hellomember*/
#hellomember {
color: var(--h_fColor);
}
/*----------------------------
fixed image box
----------------------------*/
/*min width #variousheadlinks*/
tr#upshrinkHeader td#variousheadlinks {
min-width: 222px !important;
max-width: 222px !important;
}
/*space before hellouser for avatar*/
table#smfheader+table tr > td.titlebg2:last-child {
width: 62px;
}
/*first click: show user box mandatory*/
tr#upshrinkHeader[style^="display: none;"] {
display: block !important;
right:0;
}
/*second click and startup: hide user box off the page*/
tr#upshrinkHeader {
position: absolute;
right: -400px;
}
/*when box hide show avatar in header */
tr#upshrinkHeader tr > td.windowbg > img,
tr#upshrinkHeader[style=""] tr > td.windowbg > img {
width: 32px !important; height: 28px !important;
position: absolute !important;
top: -30px;
left: -200px;
}
/*eles back avatar in normal place*/
tr#upshrinkHeader[style^="display: none;"] tr > td.windowbg > img {
width: auto !important; height: auto !important;
position: inherit !important;
}
/*--------------------- end fixed image box -------------------------*/
#bodyarea td[width="180"] > table.bordercolor {
background: transparent;
border-collapse: collapse;
}
#bodyarea td[width="180"] tr > td.catbg {
background-image: none;
border: none;
background: var(--main_color);
background: linear-gradient(
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.2))
var(--btn_bgColor);
}
#bodyarea td[width="180"] tr+tr.windowbg2 {
border-bottom: 10px solid #e5e5e8;
background: var(--h_bgColor);
}
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext {
padding: 0;
}
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext br {
display: none;
}
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a {
color: var(--h_fColor);
display: block;
padding: 2px 8px;
}
#bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a:hover {
background: rgba(255, 255, 255, 0.05);
}
Jump to: