DIY Desktop Site Customisation - Use at own risk

Shocking to see all the effort that's being put in here is needed after the migration to a brand new shiny platform that was going to fix all the problems with the old one!

What exactly did the early morning downtime achieve?

To do?

Couple of quick customizations for discussion pages might spend more time with it, (using stylus extension on opera with the page addon so it only targets ../discussion)

/* center posts to window */
.Container .Frame-row {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* sticky breadcrumps */
.pre-header {
  position: fixed;
}
.BreadcrumbsBox {
  position: fixed;
  width: 100%;
  top: 48px;
  height: 20px;
}
#titleBar {
  position: fixed;
  top: 0px;
  width: 100%;
}
.Container {
  margin-top: 20px
}

/* smaller reaction buttons lighter colour */
.Reactions .ReactButton.Quote,
.Reactions .ReactButton.ReactButton-Like,
.Reactions .FlagMenu.ToggleFlyout {
  width: 69px!important;
  height: 25px!important;
  background: linear-gradient(#fdfdfd, #d8d8d8);
  border: 1px solid #d8d8d8;
  display: flex!important;
  justify-content: center!important;
  margin: 4px!important;
}

.Reactions .ReactButton {
  color: rgb(151, 148, 148);
}

/* in between post spacing */
/* after */
.Section-Discussion .Content .pageBox .pageBox .pageBox::after {
  content: "";
  display: block;
  height: 8px;
  width: calc(100% + 2px);
  margin-left: -2px;
  border-bottom: 3px solid #3b5586
}
/*before*/
.Section-Discussion .Content .pageBox .pageBox .pageBox::before {
  content: "";
  display: block;
  height: 8px;
  width: calc(100% + 6px);
  margin-left: -3px;
  border-top: 1px solid rgb(211, 212, 213);
}

/* postbit colour and font size, as well as spacing from side and top i.e. post time & background colour */
.postbit-header {
  color: #f4f4f4!important;
  background-color: #3b5586a8!important;
  padding: 0 15px 0 5px!important;
  height: 28 px!important;
  line-height: 27px!important;
  font-size: 14px!important;
}

Why make it complicated - style the button as you want

CSS

JS

@fritzelly for troubleshooting i have disabled ALL other code related to react buttons - culprit still there.

Remove the 2 commented styles

I'm seeing the border fine

Remove

height: 30px!important;

Yes, the guys who shared have kept me here.

@fritzelly i can post full script i have if you willing to look into. perhaps i have some "dodgy" line, however some feeling that it comes from original unmoded code

@fritzelly yeah, with 1px visually looks ok, but from code prospective its still wrong... or should i say different from other two

Guys, please don't use codeblock formatting - page again freezing browser!

Removing this it looks fine to me

border: 1px solid #4d4d4d;

disabled ALL my code, applied ONLY yours suggeted in this post still can see button different size pushing over bottom border

@fritzelly bet you there is extra "border" and it cross with my code. Disabling bolded parts gives visual at glance, but then it breaks other section of code as white border is present above what would be expected if hover over ->> red, as it happens to other two buttons (amber, green)

Increase border: to 3px and you will see red frame appearing inside/beneath white, compare to other two buttons and you will see difference

Thanks for patience.

Yes! Perfectly reflected on 3-4 s on vid - "Flag" button turn red background, but remain white frame, where other two perfectly change frame color respectively

Bingo!

Only needed .FlagMenu{} , placed above ALL other related to buttons, then enabled

All buttons same border, color and size. behaviour as expected on hover

Thanks for tip, next is ....coming soon

need to learn more about coding 😎

Thanks again

let me ask - code commands order in sequence matter or am i mistaking?

Depends...

Where the class has the same specificity then the last one wins but in this case ReactLabel wins as it has more specificity even tho its for the same element, but add !important to the span and it wins

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

@[Deleted User] guess its JS, unfortunatelly, on my third day in coding .....

@archfi this in turn would remove ALL stiling from that page, unless make separate stiling just for that section and control there. might try.

Thanks

i hope whoever reported my post as spam was testing something...ignore my next sentence if that's the case.

Again, boards need to sort out the 'reaction' count or reset the flag reactions if they 'count' against users when they finally get their house in order - that is only giving a gun to genuinely problematic posters.

wonder is person who did it click again, does that remove it? It does for "Like" .... hm mhhh ... "Thanks"