Webflow Forum - Desktop CSS Stylesheet with Stylus

Community resources General
1

Hey there!

I’m not sure if this would be better suited for the General or the Meta section.

I’ve gotten a bit bored today and made a few stylesheet tweaks to make the forum more readable and lessen the use of whitespace.

I made it in the form of a sideloaded clientside Stylesheet.

Heres a video of me going through the appearance changes: 09-14 15-01-30 GIF by Psyda | Gfycat

The stylesheet is attached at the bottom of this post.

I worked on this for about 20 minutes to see if I could make the desktop forum experience a bit more comfortable, so please let me know if it’s anything I should polish up.

I’m using the Stylus extension to do this easily, set it to apply to URLs on the domain forum.webflow.com

#reply-control {
    max-width:unset;
    padding:0 100px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.33);
}
.d-editor-container {
    display: flex;
}
.d-editor-textarea-wrapper, .d-editor-preview-wrapper{
    flex: 1 0 100%;
}
.wrap {
    max-width: 800%;
    padding:0 190px;
}
#reply-control .user-selector.with-preview, #reply-control .title-and-category.with-preview {
    width:unset;
    margin-left:auto;
    margin-right:auto;
}

/* Post Sizing */
.topic-body {
    width: calc(90% + (11px * 2));
}
.posts-wrapper{
    padding: 20px 80px;
    box-shadow: 0px 2px 5px -0px rgba(0, 0, 0, 0.19);
}
.topic-status-info{
    border:unset;
}
@media (max-width: 888px){
.topic-body {
    float:unset;
}
}
.timeline-container {
    margin-left: unset;
    right:40px;
}
/*@media (min-width: 1250px){
.timeline-container {
    margin-left: 2450px !important;
}
}*/
.posts-wrapper {
    padding: 20px 0 20px 80px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.19);
}
timeline-container{
    margin-top:-120px;
    transition: margin 50ms ease
}
timeline-container.timeline-docked {
    margin-top:-100px;
}

/* Text Editor */
.d-editor-container {
    display:block;
    position:relative;
}
.d-editor-textarea-wrapper {
    height:70%;
    position:relative;
}
.d-editor-preview{
    height:auto;
    position: relative;
    display:inline-block;
}
.d-editor-preview-wrapper {
    margin-top: 10px !important;
    margin-left: unset;
    height:25%;
    overflow-y:scroll;
    position:relative;
    max-width:unset;
    padding: 0 10px;
    background-color:#cbcbd630;
}


#reply-control.hide-preview{
    max-width:unset;
}

.d-editor-container {
    display:block;
    position:relative;
}
.d-editor-textarea-wrapper {
    height:100%;
    position:relative;
}
.d-editor-preview{
    padding-top:30px;
    padding-left:20px;
    height:100%;
    position: absolute;
    display: block;
    top:0;
    bottom:0;
    box-shadow: 0px 22px 0px 2px rgb(208, 208, 220);
    overflow-x: overlay !important;
}

.d-editor-preview-wrapper {
    margin-top: 10px !important;
    margin-left: unset;
    height:100%;
    position:absolute;
    overflow-y:scroll;
    max-width:unset;
    padding: 0 50px;
    background-color:#e6e6ef;
    display: block;
    bottom:0;
    left:0;
    right:0;
}

If that is hard to copy from here’s a Pastebin: https://pastebin.com/raw/bYzeqxrk

Cheers :slight_smile:

1 Like