update: This text is translated using Google Translate. The original text written in arabic here
For web design enthusiasts, you have a bitcointalk site to learn about and modify the style. An opportunity to learn and explore some new tricks. One of these tricks I got to know from the practice of modifying the forum :]
The feature here is not a static code and requires a lot of changes to modify the background color, for example, but you can customize the shape and colors according to your taste by changing the color value for one time and applies to all elements used for that custom property in a way similar to the variable name of the feature css custom properties search for it to know More I used the feature with the following code, knowing that I previously posted in the English sections, but I think I did not communicate the idea well, so I deleted the code so as to make sure that there are some mistakes if there is anyone interested in this code unless there is no problem considering it to raise the topic and give permission to those who want to publish the code in the English language For not perfecting her
And I was hoping for a unified topic about the userstyle amateurs so that the community would share there with one topic instead of publishing a topic every time in the meta section so that it wouldn't be annoying to the members
The topic is not that difficult. If you understand the basic principle, all you need to do is define the required element and add the necessary properties
css style code/* ----------------------------------------------------
custom bitcointalk header
author: 0x256 ¯\_(ツ)_/¯
author url: https://bitcointalk.org/index.php?action=profile;u=2680306
------------------------------------------------------*/
#smfheader, body > div.tborder+table, .tborder table#smfheader+table, table#upshrinkHeader2 {
/*---------------------------------------------------
custom your style by changing these values below
---------------------------------------------------*/
/* header position: fixed or absolute */
--header_position: fixed;
/* main colors */
/*basic options*/
--h_bgColor: #fff;
--h_fColor: #000;
--h_act_color: #3d7eba;
/*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(--h_act_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 */
.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);
}
.maintab_back a:link, .maintab_back a:visited, .maintab_active_back a:link, .maintab_active_back a:visited {
padding: 10px 6px !important;
color: var(--h_fColor);
}
.maintab_back a:hover,
.maintab_active_back a:hover {
opacity: 0.85;
background-color: var(--h_bgColor_hover);
color: var(--h_fColor_hover);
}
.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;
padding: 0;
}
body>.tborder table#smfheader+table,
body>.tborder table#smfheader+table+table {
border-top: none !important;
display: inline-table !important;
}
/*-----------------*/
/*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-color: var(--btn_bgColor);
color: var(--btn_fColor);
}
#upshrinkHeader2 input[type="submit"]:hover {
background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) 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;
}
}
/*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;
}
For those who did the experiment, send us your assignment: D You may display unique colors, all you need to change the values of the variables above for the required values, for example --h_bgColor indicates the background color of the top menu
One of the problems with the above code is this example
html {
/* overflow-x: hidden; */
}
The action of this code is to hide the elements outside the page borders so if, for example, there are elements larger than the size of the page and request that the scroll bar be passed, it will not be visible, so I disabled it until it was confirmed.
All this is due to the user list, because it is initially a phenomenon, so there is no solution in this case when using css only, unlike the process. Hide the menu by default and show it when clicking on the button Fold the menu for this reason the icon is reversed; D
