<<  >> (p.2)
    Author Topic: custom your bitcointalk header and profile page [css only]  (Read 585 times)
    0x256 (OP)
    Sr. Member
    ****
    Offline

    Activity: 346
    Merit: 343


    View Profile
    August 14, 2020, 10:32:26 PM
    Merited by suchmoon (7), Welsh (6), LoyceV (4), hugeblack (4), mprep (3), ibminer (3), Cyrus (2), Daniel91 (2), TryNinja (2), Pmalek (2), o_e_l_e_o (2), OgNasty (1), notocactus (1), hd49728 (1), cryptoaddictchie (1), Heisenberg_Hunter (1)
     #1



    change the color by changing the values ​​of the variables
    for example, the main color in the image above --main_color: #006b9f;
    and share your favorite customization with us  Smiley

    Additions and modifications are welcome
    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: #006b9f;
       
       *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 rgba(0, 0, 0, 0.4);
    }

    /*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,
    #bodyarea td[width="125"] > table.bordercolor {
        background: transparent;
        border-collapse: collapse;
    }

    #bodyarea td[width="180"] tr > td.catbg,
    #bodyarea td[width="125"] tr > td.catbg{
        background-image: none;
        border: none;   
        background: var(--main_color);
        background: linear-gradient(
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.1))
            var(--btn_bgColor);
    }

    #bodyarea td[width="180"] tr+tr.windowbg2,
    #bodyarea td[width="125"] tr+tr.windowbg2 {
        border-bottom: 10px solid #e5e5e8;
        background: var(--h_bgColor);
    }

    #bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext,
    #bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext {
        padding: 0;
    }

    #bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext br,
    #bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext br {
        display: none;
    }

    #bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a,
    #bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext a {
        color: var(--h_fColor);
        display: block;
        padding: 2px 8px;
    }

    #bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext a:hover,
    #bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext a:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    #bodyarea td[width="180"] tr+tr.windowbg2 > .smalltext b a,
    #bodyarea td[width="125"] tr+tr.windowbg2 > .smalltext b a {
        color: var(--main_color);
    }
Page 1
Viewing Page: 2