[Request] html tags of the upper avatar image

0x256

sr. member

Activity: 338

Merit: 337

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

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

Code:

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

mprep

global moderator

Activity: 3794

Merit: 2612

In a world of peaches, don't ask for apple sauce

It's before all the links, under the same parent table row. Here's the HTML from mine:

Code:

...

Try adding the additional HTML via the developer console into your page and see how it looks. From what you've posted, the theme looks real nice BTW. Most of custom CSS tends to just swap out some colors, maybe round a few edges here and there but it seems that you're going all out with the modernized look (with CSS only no less).

Hope this helped.

0x256

sr. member

Activity: 338

Merit: 337

Hello

Currently I work on the idea of custom bitcointalk menu using css custom properties [css only]

Here is avatar image But I do not know the structure of the tags like that or what ?

Code:

...

..

assumed end result:

Note some items are hidden

the topic is not useful. After receiving an answer I will often send it to the Archival section or maybe I add the final code here
I apologize in advance. I use the translator to communicate!

Topic: [Request] html tags of the upper avatar image (Read 672 times)