Discourse Vincent theme

theme-full

(Robert Strick) #230

Great. That worked. Though it does seem that the BG is zoomed in on this particular page now: Test topic coming up - Console General Discussion - Pipeworks Studio

Thanks for the tip also. Moved everything to a component before updating.


(Joe) #231

Category backgrounds will be improved soon in Discourse core. What you’re seeing there is a clash between Discourse wanting to do something and the theme wanting to do something else. For now, you can add this to your custom code to temporarily resolve the issue

body[class*="category-"] {
  background-attachment: fixed;
}

(Robert Strick) #232

Fixed. I’ll keep an eye out for other stuff as well and report my findings. Thanks again!


#233

Hi @Johani.

Can you take a look here? I think the theme is not compatible with the latest version.

Thank you.


(Joe) #234

I’m pretty sure that’s not a part of the theme. There’s some custom scss added at the bottom your theme that’s causing this:

// category list ------------------------------------------------------------------------------

.categories-and-latest,
.categories-and-top {
  display: flex;
  flex-direction: column;
}

.categories-and-latest div.column,
.categories-and-top div.column {
  flex: none;
}

.categories-and-latest div.column.categories,
.categories-and-top div.column.categories {
  margin-right: 0;
}

table.category-list {
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;

  thead {
    display: none;
  }

  tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border: none;
    padding: 14px;

    tr {
      margin: 14px;

      td.topics {
        display: none;
      }

      td.category {
        display: block;
        text-align: center;
        border-radius: 6px;
        border-style: solid;
        border-width: 1px;
        padding: 24px !important;
        background: #f8f9fa;
        box-shadow: 1px 2px 5px 2px #e0e0e0;
        width: 180px;
        height: 180px;

        & > div {
          height: 100%;
        }

        & > div > h3 {
          height: 100%;
        }

        & > div > h3 > a {
          height: 100%;
        }

        .subcategories {
          display: none;
        }

        .category-description {
          display: none;
        }

        a.category-title-link {
          display: flex;
          flex-direction: column-reverse;
          justify-content: center;
        }

        a {
          text-decoration: none;
        }

        .category-text-title {
          justify-content: center;
          font-size: 16px;
          font-weight: 300;
          color: black;
          white-space: nowrap;
          overflow: hidden;

          span.category-name {
            text-align: center;
          }
        }

        .category-logo {
          margin: 0 0 20px 0;
          width: 100px;
          height: 100px;
          float: none;
          object-fit: contain;
        }
      }
    }
  }
}

#235

I deleted this code and everything is ok now.

Thank you. :beers:


(Steven Greco) #236

I am having an alignment issue on the menu bar that i just recently noticed. Not sure what is causing it. Switched over to just the Vincent theme thinking it was one of the other components i have altering it. But cant seem to find the cause.

Site is https://forums.grimreapergamers.com/


#237

Have you added any CSS Margins to any of the classes as I can see Margins on both the category-breadcrumb and the nav-pills classes of which are throwing it out.


(Steven Greco) #238

Thought about that but even if I remove all my added components its still coming up. I did not alter the vincent base theme at all


(Taylor) #239

Ok, so it was something that was introduced in a very recent update to core Discourse. I’ll try to track it down.

Edit: I think I’ve got it!

So it looks like given the recent changes, Vincent will eventually want to ditch this line:

And add some CSS rules to get everything centered:

ol.category-breadcrumb {
	margin: 0.5em 0;
}

and

button#create-topic {
    margin: 0.2em 0;
}

But since this is a super recent change, I’d just make those changes in a separate component. The full fix for right now from what I can tell is:

// ------ Temporary Vincent Fixes -------------//

// Fixes layout with newest Discourse version
.nav-pills > li {
	float: left;
}
// Vertically centers breadcrumbs
ol.category-breadcrumb {
	margin: 0.5em 0;
}
// Vertically centers "New Topic" button
button#create-topic {
    margin: 0.2em 0;
}

(Anders Thengs Kristensen) #240

It’s been a while, but suddenly profile pictures started overlapping usernames.

image


#241

I had the same issue. I am sure there is a better solution than this, but I added a component with this custom CSS and included it with my vincent theme.

.topic-body .topic-meta-data {
    padding: 0.5em 0.5em 0.5em 66px;
}

(Steven Greco) #242

With the latest Discourse Update i am seeing an odd issue only on mobile were a space is being added on Reply boxes.

Phone: Huawei Mate 10 Pro
OS: Android 8.0.0
Browser: Chrome 69.0.3497.100

image


(Joe) #243

Thanks for reporting the issues!

I pushed a couple of fixes and they should be resolved once you update the theme :+1:


(Steven Greco) #244

That fixed the issue for posts without link or pictures. This issue still seems to show up on those

Also on desktop I am now getting some weird topic sizes.

I thought it was a component, so i switched over to just the base Vincent theme for my view. Narrowed the issue down to this rule.

Topic%20width

Wondering if i have something setup differently to cause this.

Thanks for the quick replies.


(Joe) #245

No that was definitely me. I pushed a fix, let me know if you see any other problems. :+1:


(Steven Greco) #246

Awesome thanks. All good now.


(jjaarrvviiss) #247

@Johani some while back you mentioned a white or Light version of Vincent? I’m wondering if that theme version is available for testing? We are already using the dark version, and it’s great, but would love to have a lighter version that is easier on the eyes

thank you!


#248

Hi @Johani

I have a problem with the “reply” button – it doesn’t work. Here is the .CSS code I’ve modified:

// Large Post

.post-stream {
    align-items: flex-start;
}

#topic-title,
#topic-title .title-wrapper,
.posts-wrapper,
.topic-body {
    width: 100%;
}

.topic-body {
    width: 1100px;
}

.topic-post,
.topic-body {
    max-width: 100%;
}

.timeline-container.timeline-docked {
    margin-top: 50px;
}


// Bar right temporar

.timeline-container .topic-timeline {
    margin-left: 19em;
    width: 150px;
    transition: opacity 0.2s ease-in;
    touch-action: none;
}

// Topic

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

And if I delete this code, it works:


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

Where is the issue exactly? Thanks. :beers:


(Chris Klugewicz) #249

Happy New Year @Johani! :tada: Two questions to start off 2019:

Having gotten fairly comfortable tweaking your Vincent theme, I was wondering how I’d go about adding an .mp4 file as the background (instead of a custom image, which has worked out great, thanks to your help!).

Sort of related question: when Discourse 2.2 is released, will there be a way to give users a choice of which background image they’d like?