Posts off-centered on PC

I’m using Mozilla Firefox 82.0.2 on Windows 10 with a 1920x1080 screen, and whenever I go to posts they look like this:


The font for the post title is also not loading for whatever reason. I tried reloading and that didn’t fix it. I found this bug around 4:46 PM EST. I’m using the Vincent theme. This also looks sort of off:
image

No, this theme seems to be deprecated by Discourse, it’s in the broken-theme category:

If there are significant issues we will probably remove this theme since it’s no longer being maintained properly it seems.

7 Likes

I’ve changed the label in the selector in preferences to say “Vincent (deprecated)” on the Vincent theme for now, we won’t remove it yet. I don’t really want to take away the theme if people still enjoy using it outside of the off-centering issue.

8 Likes

My favorite theme, leaving, please don’t, I beg you. It is just really good looking, a nice cool blue, with some black, and then the blue outlines on the editor, and even posts, what is so bad about it.

2 Likes

The author dropped support for it, so it will end up more broken over time. You should ask the maintainer to keep supporting it or (ask someone to) fork it and create a working version. Discourse Vincent theme - theme - Discourse Meta

3 Likes

For anyone still using Vincent (like me), you can patch this as well as a few other issues with Vincent using @PeZsmistic’s Vincent CSS tweaks. You can use a plugin like Stylus to apply it to devforum. There’s no guarantee this will fix Vincent forever, but for now it doesn’t seem to have any issues.

https://hastebin.com/ibuxupudul.css

2 Likes

Why not try to push back fixes to the theme repo instead? The maintainer may be willing to accept PRs.

2 Likes

I’ve updated these tweaks as of yesterday, I’ll edit the changed version into this reply in a few minutes.

The changes are just rough CSS hacking so it’s a lot of effort for me to push them into the main repo. Anyone else is welcome to try though.

/************************************ 
Mobile-specific fixes / tweaks
************************************/

/* Fix bad padding */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* Fix header logo cut off at bottom */
.d-header #site-logo {
    max-height: 2.6em;
}

/* Fix inconsistently sized lock/unlist messages, fix mysterious space on right side of threads somehow */
.small-action {
    width: 100%;
}

/* Fix youtube embeds not being centered */
.lazyYT-container {
    margin: 12px 20px;
}

/* Fix topic list padding on tablets */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/* Fix flagged posts being totally broken on mobile */
.post-hidden .topic-body .contents {
    opacity: 0.5 !important;
}

/* Fix post gutter on mobile being too wide, causing things to cut off */
.container.posts>.row {
    max-width: calc(100vw - 48px) !important;
}

/************************************
Generic and desktop-specific fixes / tweaks 
************************************/

/* Fix font getting overridden by .font-helvetica on html */
html {
    font-family: "Assistant", sans-serif !important;
}

/* Square category color badges */
span.badge-category-bg, span.badge-category-parent-bg, span.badge-category-parent-bg+.badge-category-bg {
    border-radius: 0;
}

.badge-wrapper.bullet .badge-category-parent-bg,
.badge-wrapper.bullet .badge-category-parent-bg+.badge-category-bg,
.extra-info-wrapper .badge-wrapper.bullet .badge-category-parent-bg {
    width: 4px;
    min-width: 4px;
}

span.badge-category-parent-bg {
    border-right: 1px solid rgba(0,0,0,0.2);
}

span.badge-category-parent-bg+.badge-category-bg {
    border-left: 1px solid rgba(0,0,0,0.2);
}

/* Fix threads being too skinny and in strange alignment with controls at bottom of page */
.topic-post {
    max-width: 758px;
}

.topic-post .embedded-posts {
    width: 758px;
}

#topic-title .title-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 758px;
}

#topic-title, .posts-wrapper {
    margin: 0;
    width: 758px;
}

html.desktop-view.not-mobile-device .topic-body {
    max-width: 758px;
}

.topic-body {
    width: 100%;
}

/* Fix poor contrast on thread list sort labels when new thread banner is visible */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

.alert.alert-info {
    background: rgba(19,20,24,1);
}

/* Make code blocks blend better */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* Fix youtube embeds missing padding */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* Fix category left colored lines not reaching bottom of category container */
.category-list tbody .category {
    display: table-cell;
}

/* Better subcategory layout (desktop only) */
.not-mobile-device .category-list .subcategories {
    display: flex;
    flex-direction: column;
}

.not-mobile-device .category-list .subcategories .subcategory .badge.new-posts {
    display: inline-block;
    margin: 0 5px;
}

.not-mobile-device .category-list .subcategories .subcategory {
    height: 21px;
    align-items: center;
}

/* Highlight pinned posts */
.topic-list-item.pinned  {
    background: rgba(200,200,255,0.06);
}

.topic-list tbody tr:nth-of-type(even).pinned {
    background: rgba(200,200,255,0.04);
}

/* Better appearance and contrast on disabled New Topic button */
.list-controls #create-topic[disabled],
.list-controls #create-topic.disabled {
    background-color: rgba(255,255,255,0.04);
    color: #888
}

.list-controls #create-topic[disabled]:hover,
.list-controls #create-topic.disabled:hover {
    background-color: rgba(255,255,255,0.06);
}

.list-controls #create-topic[disabled] svg,
.list-controls #create-topic.disabled svg {
    color: inherit;
}

/* Larger letter spacing for better readability */
* {
    letter-spacing: 0.2px;
}

/* Larger fonts for better readability */
a {
    font-size: 95%; /* theme sets 90% */
}

.search-link .blurb {
    font-size: 1em;
}

/* Fix wrongly colored UI on search page */
.search-container .search-advanced-sidebar .search-advanced-title,
.search-container .search-advanced-sidebar .search-advanced-filters {
    background: rgba(255,255,255,0.04);
}

.search-container .search-advanced-sidebar .search-advanced-title.btn {
    background: rgba(255,255,255,0.04);
}

.search-advanced-options {
    background: rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

/* Fix floating border around composer for profile bio */
.user-preferences .bio-composer {
    border: none;
}

/* Fix collapse button exiting frame on profile page */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* Fix post notice size and border color */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* Fix post links container size */
.post-links-container {
    margin-left: 0;
}

/* Fix bio scroll bar not being to the right */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* Category link hightlighting */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

.category-list .subcategories .subcategory .badge-wrapper .category-name {
    transition: color 0.3s;
}

/* Fix hidden posts being split horizontally by unhide link */
.post-hidden {
    position: relative;
}

.post-hidden .post-menu-area,
.post-hidden .expand-hidden,
.post-hidden .topic-body .contents .cooked {
    background: none !important;
}

.post-hidden .topic-body .contents {
    background-color: rgb(19, 20, 24) !important;
}

/* Remove scroll bar on topic actions bar when unhidden */
.topic-post nav.post-controls.expanded {
    overflow-x: auto !important;
}

/* Remove background on "User is typing..." */
.presence-users {
    background: none !important;
}

/* Fix flagged post banner has wrong background color */
.post-hidden .post-actions {
    background-color: rgb(19, 20, 24) !important;
}

/* Add padding to "you flagged this" action banner */
.post-actions .post-action {
    padding-right: 13px !important;
}
5 Likes

Maybe DET could locally override the theme and add these fixes to the CSS :eyes:

Vincent is the best theme on the DevForum, and it’s a shame to see it in a broken state and at risk of going.

Again, you should just contribute back to the theme repo if you know what to fix… this is not worth the effort/maintenance needed to hack around the issue. Better to fix it for everyone.

3 Likes