Forum [CSS] Customization

[Spar]

As you can notice, in settings section there's a field for custom CSS styles.
I think, we should have a topic with your decisions.
Upload you CSS code with picture that demonstrate changes.
For getting css styles i use Goggle "inspect" then Sources -> styles and there will be main css code, when you can find needed object.
Write in field like it written in file
Example:
body {
  color: #ffff00;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  }

[Rhapsody]

Despite the Disagreement votes, I think this is a nice idea.

[Alice]

People are probably disagreeing because using the CSS field to just copy+paste CSS isn't really going to work since the limit is so low. There's already some threads that provide full themes using the CSS @import command:

https://forum.facepunch.com/f/general/gvro/Facepunch-Awfully-White/
https://forum.facepunch.com/f/general/cwkg/Facepunch-Awfully-Dark-II-Even-Darker/

[Luna]

I posted this on gmodstore but I think some meme lords would like it too so I made a 10 line css file to make it look like gmodstore's forums a bit cuz I don't like the spooky dark theme

To apply it just follow these ezpz steps:
Click the settings tab on your nav bar
Go to the css area
Add @import url("https://www.lunaversity.me/css/facepunch.css"); only to the css
save and maybe ctrl + f5 just 2 b sure and hard reload

[Chewgum]

i like how you integrated the activate windows message into the forum

[Luna]

Yeah I thought the background was a bit empty without it

[Spar]

Facepunch Simple Dark Theme
Changes:
Everything, except reply and emotion buttons, because they're looks nice on dark BG

Installation:
@import url("https://nofile.io/g/vshQYjA3XdVR6UNx46vt0h7D3W5mYrtu04TXb8tP0HDKgD25dxOyKWRKTmTRdy4G/facepunch_css_simple_dark_theme.css/");
Click "Settings" on top of site. Then in paste this in "Custom CSS" field.

Screenshoots:

[R E D L I N E]

I don't know a thing about CSS but I can give someone a diamond if they can make a kind of a "compact" theme, by that I mean make everything take a little more space horizontally, remove the gaps between posts, make thread fonts smaller, etc.
Basically keep the color scheme and overall design but try to fit as much information on screen as you could on oldpunch

[Spar]

Basically, CSS allows change objects positions. A'm also thinking to upload a mobile version. I change some values to make wide mobile-alike design.
If you want, i can try to copy old Facepunch design in some ways

[Clive]

Trust me the gaps between posts are good, I've changed the padding on it to be closer and it looks awful, even with little borders.

[Spar]

Some UX test.
Centering post body, by default forum center post with left user info.
This will center by post
.container {margin-left: 25%;}

[PieClock]

I read posts and highlight text as I go, weird habit, maybe others have it. If so you'll be annoyed to find it's near impossible to read the default highlighted text, so quick fix:
Firefox:
::-moz-selection {background:#FA225B;color:white}
Other:
::selection {background:#FA225B;color:white}
GG

[Geferon]

I basically loved on newpunch that you could instantly see the spoiler tags, and now I hate it that they take so long to appear after holding your mouse over it, so i reduced the time off it as you hold your mouse on it.
Also yes, IK this CSS is quite simple but it may be useful for some people.
spoiler {
transition: all 0.2s ease-in-out;
}

[Alice]

You could try using Teddybeer's theme as a base if you're going to try to replicate oldpunch's style.

You can get rid of the gaps altogether if handled right. Ie:

[Spar]

No Gold

Changes:
Gold members color changed to default users

Code:
.user-gold a {color: inherit;}

[Kecske]

Come on, the true solution is:

All Gold
.username a {color: #e8b622;}

[Ananace]

Personally, I'm just annoyed by the stupid word breaks in posts, so my solution for that is;
.postbody p {
  word-break: initial;
}

[Kecske]

Why isn't this there by default??

[Ananace]

And a little something for those big quotes;
postquote .expandable:not(.expandable-open) {
  background: linear-gradient(currentColor 60px, transparent 98%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[Winsanity]

All posts and quotes expanded by default:
.expandable-overflown {
overflow: visible !important;
max-height: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
.postexpand.expandable-overflown::after {
display: none !important;
}
If you're wondering why everything has !important, the default styles kept overriding the custom css. Not sure if I'm doing something wrong.

[meharryp]

Wide mode was too wide and default is just like 100px too small for my tastes so here's the most minor nitpick tweak ever
@media screen and (min-width: 1300px){
    .container {
        max-width: 1250px;
        width: 1250px;
    }
}

[Alice]

Actually it was originally like that but for some reason posts as well as the post editor use the same CSS and not having that means that trying to write long text in the post editor would never break a line of text.

[vnc]

I guess this belongs here. Changes spoiler text to look like it does on imageboards.
/* [Imageboard Spoilers] */
spoiler, spoiler a:not(:hover) {
background: #000000!important;
color: #000000!important;
filter: none;
text-decoration: none;
transition: none;
}

spoiler:hover, spoiler:focus {
color:#FFFFFF!important;
filter: none;
transition: none;
}

[vnc]

I have a simple stylesheet full of various fixes that are to my tastes, if anyone's interested.
@import url("https://vnc1.github.io/stylesheets/fpfixes.css");
Features:
No rounded buttons
User rank listed under username
Levels are actually readable
Reply box doesn't look bad
Usernames are actually highlighted on hover
Imageboard spoilers (of course)

[Janus Vesta]

The image board spoilers CSS is great on phones. Thanks.

[nuke4fix]

Highlight threads and forums on hover
body.page-forum .forumpanel:hover {
    background-color: rgba(0, 0, 0, 0.2);
}