Discourse Vincent theme

theme-full

(Joe) #163

Ok I just updated again with

Larger avatars pushed back until I see the consensus about them

I left the poll open, so vote.


(Anders Thengs Kristensen) #164

Because I haven’t done one of these in a while:


The centred posts seem to affect the following admin pages as well:

Dashboard and Logs: Screened Emails, Screened IPs, Screened URLs and Search Logs.


The date dropdown on /u has a scrollbar or two.
image (Vivaldi)
image (Edge)


Edit history numbering is misalligned:
image

This also happens if there is only one edit:
image

The edit history button also occasionally become unresponsive, but I am unable to find a pattern.


The replying to pop-up has the background misalligned:
The username is also mashed into the avatar:

The username is also mashed into the avatar on the replies dropdown:


If a deleted post has also been flagged, the avatars are a little crammed:

The avatar of the the user who deleted a post is crammed into the bottom of the post. I feel it should be centred in its area.


The action buttons on the /queued-posts page are also crammed into the bottom:


I feel the Staff highlight line could have extended to the bottom of the post. Or at least down the side of the post action menu.


And to keep this from just being problems, I want to mention that I really like how the “X time later” and admin action show up with this.

I also want to thank you for all the work you put into this theme. I use it every day and I love it (even if some of the changes take a little getting used to).


#165

54%20AM17%20AM21%20AM

bunch of things seem wonky. from buttons to layout to the admin screen being centered…


(Joe) #166

v0.75 is our please update

:sweat_smile: That’s a lot of breakage!

Ok here’s what I have so far:

Everything in the Admin panel should be back to normal:

There an invisible class added when there’s only one edit (guess) I will check further on this.
Capture999

Great catch. I was able to find the cause. (scrollbar area was on top)

And is now fixed:

Long story short:

Replied to:

Replies to a post

I agree with you on this:

I really like these posts! :heart:

You’re most welcome.

If something is not right, let me know. In most cases it would be something I missed :sweat_smile: and can then address, or I feel different, then I can help you achieve what you want in a child theme.

@8BIT I haven’t forgotten about you. Will continue with the fixes in the next update.


#167

When i install the theme, I don’t get all color schemes, might be a simple fix on my end, the settings screen is misaligned, as well as users page in admin

,

overall, I really think the theme is sweet, thanks for all your hardwork :smile:


(Joe) #168

Do you see Vincent Dark in there? There’s only one scheme now and the op is outdated :grin:

You can still customize the colors, see this for reference and let me know if you need help.

I could be wrong but I don’t think the admin panel is supported in mobile by Discourse. I will check and let you know :wine_glass:


(Joffrey Jaffeux) #169

Yes admin panel is not done with mobile as a focus, it could work. But we expect admin to work on desktop.


(Keyboardstaff) #170

Does anyone know how to add a keyboard shortcut button somewhere?

image


(Joe) #171

You can use something like this:

In the </head> section of a child component

<script type="text/discourse-plugin" version="0.8.18">
  api.decorateWidget('hamburger-menu:footerLinks', () => {
    return { action: 'showKeyboard', rawLabel: 'Keyboard Shortcuts' };
  })
</script>

More on that here:

Let me know if you need more help


(Keyboardstaff) #172
<script>Discourse._registerPluginCode('0.2', function (api) {

    api.decorateWidget('home-logo:after', function (helper) {
        var showExtraInfo = helper.attrs.minimized;
        if (!showExtraInfo) {
            return helper.h('ul.nav-link-container', [helper.h('li.hidden-for-mobile', [helper.h('a.nav-link', {
                href: 'https://ibbase.com/register',
                text: 'REGISTER',
                target: '_blank'
            })]), helper.h('li.hidden-for-mobile', [helper.h('a.nav-link', {
                href: '{action: 'showKeyboard', rawLabel: 'Keyboard Shortcuts'}',
                text: 'ABOUT',
                target: '_self'
            })]), helper.h('li', [helper.h('a.nav-link', {
                href: 'https://ibbase.com/',
                text: 'HOME',
                target: '_self'
            })])]);
        }
    });
});</script>

Thanks for the help!

But I want to do this, but do not show, do not know where did not do?


(Keyboardstaff) #174

Although these codes are displayed, they do not work


(Keyboardstaff) #175

I tried this, but the click is also invalid

<script type="text/discourse-plugin" version="0.8.18">
api.decorateWidget("home-logo:after", function(helper) {
	var showExtraInfo = helper.attrs.minimized;
	if (!showExtraInfo) {
		return helper.h("ul.nav-link-container", [
			helper.h("li.hidden-for-mobile", [
				helper.h("a.nav-link", {
					href: "https://ibbase.com/register",
					text: "REGISTER",
					target: "_blank"
				})
			]),
			helper.h("li.hidden-for-mobile", [
				helper.h("a.nav-link", {
				    action: 'showKeyboard',
				    rawLabel: 'Keyboard Shortcuts',
					text: "ABOUT",
					target: "_self"
				})
			]),
			helper.h("li", [
				helper.h("a.nav-link", {
					href: "https://ibbase.com/",
					text: "HOME",
					target: "_self"
				})
			])
		]);
	}
});
</script>

(Joe) #176

Sorry :laughing: I wasn’t paying enough attention there :wine_glass:

I can get links to work but not actions.

I will keep trying but I am not very good with helpers and you will probably get faster help if you create a support topic.


(Keyboardstaff) #177

Thank you for your help!

But I’m not good at English, my text is google translate. :joy:


(Anders Thengs Kristensen) #178

Just a few things this time:

Blurred text using [spoiler] tags is not very blurred:
image

There’s quite a lot of empty space between the title and the body of a topic. This is especially noticeable in uncategorised topics and in messages:

The vote button from the votes plugin isn’t centred with topics, leaving it floating in its normal position:


(Joe) #179

V 0.76 is out please update.

Sorry about the delay in this release. Things changed around in Discourse and I had a couple of new AMAZING things I needed to get used. :grin:

Fixes:

Funky buttons no more @8BIT, thank you for reporting

The of the bugs were also fixed in the previous version.

@nawthor

Thank you for reporting :ok_hand:

As far as the title goes, I wanted to strip the background out, but it seems it’s a bit too early for that. I restored the background for titles but let me know if I missed something

The reason you see a lot of empty space is that even when a topic has no categories / tags , the container that wraps around those things is still rendered.

I’ll keep looking for better ways to do this.

Spoiled text is now back to normal (again!) :sweat_smile:

The voting button is a little bit tricky. I will give it love in the next release.

Here’s a couple of new things:

Theme settings:

I’ve included 4 theme settings as a start, I plan to move all variables to setting as we go along. The settings are:

A setting to change the background (cc @cjk77)

Now all you need to do to change the background is add the url and tick the box below to turn off the gradient. This will only need to be done once and will carry over after theme updates thanks to @Osama’s work on theme settings

So if I do this:

then I can get this very easily:

Anything beyond that would still need to be done with CSS in a child theme, let me know I can help.

Rounded borders

are now back as an optional theme setting. I plan to support both rounded and straight borders so if you see a bug in either let me know.

Here’s a quick comparison:

Default:

Rounded borders:

button text case (cc @nawthor)

You can easily toggle the text case for buttons via a theme setting,

The default remains uppercase but if that’s not your thing you can reset it to Discourse default:

This applies to all buttons and here’s a comparison:

I will continue to move more of the variables to theme settings.

Thank you for all the feedback :heart_eyes:


(Anders Thengs Kristensen) #180

I told myself I would just have a quick look but it turned more extensive than I planned (I enjoy this so much)


The first thing I did was to turn on rounded borders to see what that looked like and if there were places I noted lacking them.

First a list of places there were no rounding and it stood out:

Linkback and “you flagged this”:

Staff highlight:

Then places I noted that feel like they should be rounded, but where it isn’t really a problem that they aren’t:

The revision history and user cards,

and subcategories if the list style is boxes or boxes with featured topics:

> quotes and oneboxes don’t have rounded corners in the composer preview:

(They do have them in the finished post though, so this is only in the composer)

And speaking of quotes and oneboxes, I really like the style on them.


The group avatar flair is misaligned on the /groups/(groupname) page:
image

There’s a typo in the settings:

Fairly certain that’s supposed to be “enable”, not enabel.


And speaking of the quote style got me thinking about something.

What if the quote colour on the side would change to red if the quoted post was staff highlighted?

It probably isn’t possible and should rather be directed at Discourse as a feature request, but I thought I’d mention it regardless.


Edit:
Notifications are square if rounded borders are enabled:
image

Edit2 (I promise not to make a habit of this):
With rounded borders, when you enter a topic the latest post will have the fade-in appear in the corners. The square corners of it look off with the rounded corners on the post.


(Joe) #181

v 0.77 is out please update.

This version is mostly bug fixes for rounded borders.

This is very cool, thank you so much :grin:

I looked at this and part of me thinks the link container should just have a lighter background no matter what because it’s additional information.

Here’s what that looks like now:

Let me know if this broke anything. Once all the background are uniform for this section I can go back and make the padding a little bit more consistent for everything that comes below the actual post / reply.

I want to take it one step at a time.

Staff highlight is now rounded as well, good catch:

You’re right in feeling they should and that’s actually what I want to do. I want uniform rounded borders all over, so if anything has sharp borders, just bring it up and I’ll fix it.

For now, user cards:

subcategory boxes ( these still look a bit off, will revisit)

oneboxes and quotes in the editor:

This should be fixed now:

Capture6

Great catch, all fixed now :sweat_smile:

I do not believe a general solution that applies to all communities is possible as of now. However, it’s possible on your community to highlight all quotes from members for the Team group because the group name is added as a class to to the quote.

For example, if you add this to a child theme:

aside.quote.group-Team .title, aside.quote.group-Team blockquote {
   border-left: 3px solid lighten(rgba(complement($theme-base), 0.65), 5%) $i;
}

Then all quotes that are from members of the group Team would also have the moderator highlight, you can change the color to anything you like.

Here’s a before and after:

I would love to include this in Vincent but I cannot because the group name is specific to your forum.

That’s fixed now as well.

:grin:

Capture9

Good catch, this is also fixed

This theme would not have gotten anywhere had it not been for all the amazing feedback. I want you to let me know if something is wrong and I want you to be very picky, I’d like for this theme to be polished at the end and the only way is to fix the stuff that’s broken. So please, I’m asking for this :grin:

You also don’t have to spend more then you have to on these amazing bug reports. If the screenshots clearly indicate what the problem is, I’m completely fine with a post that only has screenshots and no text. If I can’t find the problem I’ll ask for clarification.

This version also includes one additional setting and it’s highlight duration:

It accepts unitless values between 0.25 and 5.00 and it those translate into seconds, so 2.5 means 2.5 seconds and that’s how long the highlight would last.

Thank you for all the feedback :ok_hand:


#182

One of the most beautiful themes I’ve seen! You should do more themes. :rofl:

Can you help me with a few things if you are nice?

1). I want these buttons to look the same as „Reply” with the transparent background:

button

2). How can I align the top and bottom boxes to be the same?

3). I tried to add footer but I have a problem, in Google Chrome is fixed down but on Mozilla Firefox and Microsoft Edge the footer is above and is not fixed down.

.CSS

// Footer  -------------------------------------------------------------------

.Footer.Footer--global {
  background-color: rgba(19,20,24,0.9);
  color: #ccc;
  font-family: Helvetica, Arial, sans-serif;
  height: 115px;
  position: relative;
  width: 100%;
  z-index: 887;
}

.Footer.Footer--global .Footer-navigation-items {
  bottom: 45px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.Footer.Footer--global .Footer-navigation-items .Footer-navigation-item {
  display: inline-block;
  margin: 2px 8px;
}

.Footer.Footer--global .Footer-copyright {
  bottom: 15px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.Footer.Footer--global .FooterItem {
  font-size: 14px;
  text-decoration: none;
}

.Footer.Footer--global .FooterItem:link,
.Footer.Footer--global .FooterItem:visited,
.Footer.Footer--global .FooterItem:hover,
.Footer.Footer--global .FooterItem:active {
  color: #ccc;
}

.Footer.Footer--global .FooterItem:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .Footer.Footer--global {
    height: 150px;
  }
}

.HTML

<footer class="Footer Footer--global">
  <nav class="Footer-navigation">
    <ul class="Footer-navigation-items">
        <li class="Footer-navigation-item">
          <a href="https://test.com" class="FooterItem">About</a>
        </li>
</nav>
  <div class="Footer-copyright">
    © 2018 site.com
  </div>
</footer>

Thank you and sorry for my bad English. I wish you have much inspiration for future updates of this theme! :grin:


(Chris Klugewicz) #183

This looks just great! The only problem is that while I’ve updated to Vincent 0.77, I can’t find the theme settings shown above. Where are they located?