8

Post unfinished - will continue to add more

All selectors here will be for light theme. To change the dark theme, add body.dark before your selector.

Example: body.dark .sidebar

Sub bar

  • Background: .th-subbar (has border-bottom in dark mode, can be removed/changed)
  • Sub bar links: .th-subbar a
  • Separator: .th-subbar ul li

Header

Background: This will change the orange strip at the top of the page. It has a box-shadow property at the bottom, this may need to be changed with certain colors/layouts.

  • .th-navbar

Change logo color

  • .th-l-stroke{stroke: orange;}
  • .th-l-fill{fill:orange;}

User info

There are two main selectors, #th-uinfo is the largest and then there is .cw-items. I'll come back to this later because I can't remember what they are exactly.

  • Username: a.smallcaps
  • Separators: .separator
  • User score: #postscore
  • Settings cog: .glyphbutton - this will also target the inbox and light/dark icon. Change those two icons with the selectors below if you want the settings cog to have different CSS.
  • Inbox: .glyphbutton.sep - (also has span.mailcount for inbox notifications)
  • Light/dark toggle: #toggledark.glyphbutton
  • Logout button: #logout button

Body/Post CSS

  • Background body

Post containers - There are three selectors for these, one to select all posts, and two you can use to change the first and second containers to have different backgrounds alternating down the page, for example)

  • All posts .post
  • "First" post - div.post
  • "Second" post .post:nth-child(2n)
  • Post titles .post .title
  • Comment button a.comments
  • Posting time .post .author
  • Poster .post .author a
  • Link post domain .post .domain
  • Expandos .expando
  • Image thumbnails .post .thumbnail img
  • Sticky posts .stickyposts

Votes - Complicated and I will come back to add this stuff

  • Main vote area .votebuttons
  • Post score .score
  • Upvoted.upvoted path

Sidebar

#Post unfinished - will continue to add more All selectors here will be for light theme. To change the dark theme, add body.dark before your selector. Example: body.dark .sidebar ###Sub bar - **Background**: .th-subbar (has border-bottom in dark mode, can be removed/changed) - **Sub bar links**: .th-subbar a - **Separator**: .th-subbar ul li ###Header Background: This will change the orange strip at the top of the page. It has a box-shadow property at the bottom, this may need to be changed with certain colors/layouts. - .th-navbar ####Change logo color - .th-l-stroke{stroke: orange;} - .th-l-fill{fill:orange;} ####User info There are two main selectors, #th-uinfo is the largest and then there is .cw-items. I'll come back to this later because I can't remember what they are exactly. - **Username**: a.smallcaps - **Separators**: .separator - **User score**: #postscore - **Settings cog**: .glyphbutton - this will also target the inbox and light/dark icon. Change those two icons with the selectors below if you want the settings cog to have different CSS. - **Inbox**: .glyphbutton.sep - (also has span.mailcount for inbox notifications) - **Light/dark toggle**: #toggledark.glyphbutton - **Logout button**: #logout button ###Body/Post CSS - **Background** body Post containers - There are three selectors for these, one to select all posts, and two you can use to change the first and second containers to have different backgrounds alternating down the page, for example) - **All posts** .post - **"First" post** - div.post - **"Second" post** .post:nth-child(2n) - **Post titles** .post .title - **Comment button** a.comments - **Posting time** .post .author - **Poster** .post .author a - **Link post domain** .post .domain - **Expandos** .expando - **Image thumbnails** .post .thumbnail img - **Sticky posts** .stickyposts Votes - Complicated and I will come back to add this stuff - **Main vote area** .votebuttons - **Post score** .score - **Upvoted**.upvoted path ###Sidebar

2 comments

[–] Polsaker 1 points (+1|-0)

Logo

(yes, you can change the logo's colors with CSS)

.th-l-stroke{stroke: orange;}
.th-l-fill{fill:orange;}

That snippet will change the logo's color to orange.