"gentler" css for dark/dawn forum theme

Contributors
#1

I always thought the buttons looked a bit harsh, so I whipped up a user style that mellows it out a bit. If you have Stylus or some other user styles browser extension, copy this into a new style for forum.freecodecamp.org and enjoy not cutting your shins on the corners of those buttons :wink:

Posting it in #contributors since I’d love to get the base theme changed, but you know what they say about taste. Feel free to add suggestions or report any bugs.

BTW to all the FCC students: user styles have to use a lot of !important due to their nature. Don’t use it for the CSS you write in your own pages.

/* This is designed for the "Dawn" theme.  Do not use with the light theme */

p,
a.title {
  color: #ccc !important;
}

a.title:visited {
  color: #878893 !important;
}

.btn,
.avatar,
.combo-box-header,
.navigation-container a {
  border-radius: 5px !important;
  border: 1.5px solid #999 !important;
  color: #ccc !important;
}

.badge-category-bg {
  border-radius: 3px;
}

.avatar[height='32'],
.avatar[height='25'] {
  border-radius: 3px !important;
}

.avatar {
  box-shadow: none !important;
}

.avatar.latest {
  border-color: #5a5 !important;
}
1 Like
#2

Screenies:

image
image1383×426 62.2 KB

image
image1047×272 19.6 KB

(be sure to click on the buttons :point_down:, not :point_up_2: :crazy_face:)

1 Like
#3

For some of the a elements, I cannot tell what has been seen (visited) and what has not, because of this.

EDIT: By the way, I do like the rounded edges more. And I think it is reasonable to just have this available here. Cheers :+1:

#4

Good catch, I’ll add a style for :visited then … done

1 Like
#5

I’m definitely a fan of the rounded corners and softer buttons - but my understanding is that the theme is designed to mirror the styles on our /learn page?

image

I could be wrong.

#6

Should be pretty easy to adapt the style to the /learn pages too, I just never got around to it. I’ll leave that up to some enterprising student … :slight_smile: