FKB Pro - Social theme

Hello @Don, Excellent theme and thank you so much. Is there theme settings to use FKB Pro theme on ONLY selected categories? When you click All categories, I can see List View (default discourse view). For example, Category A shows a list view (default discourse view), Category B shows FKB Pro theme view.

2. I use Discourse offical, Calendar Event plugin. I can create post with events and after created, plugin adds below screen into the post. Could you show event screen in the list page, so users can interact and click on Going, interested, not going buttons?
   
   

Hello @Nihat_Demir

Thank for the kind words

Sorry for the late reply. Unfortunately this is not possible with this theme.
I think you can use this Topic List Previews Theme Component instead of this theme to change the view per category.

I think this one possible with a plugin but not this theme.

How did you make embeds appear in posts in home topics?

Thanks for creating! Been playing around - looks really cool.
It seems there are a few accessibility issues though. Not big ones, mostly around the tags, photo and the contrast colors for var(–primary-med-or-secondary-med).

Any thoughts on this?

Thank you @Don

hello @Don
Thank you very much for your beautiful theme

How to keep and scroll comment form?
After opening the topic, How to setup this comment form Keep and Scroll on discourse, even when user is not logged in? Thanks everyone

Great theme!

Is there a way to only use one part of this theme, in particular, how posts are displayed in the “Latest” view? E.g.

Hello, I have one more request from you. I want to hide the places I marked in the picture, how can I hide them on both mobile and desktop computers.

I struggled a bit, I couldn’t do it, I would be very grateful if you could help me, thank you very much in advance.

using english translation, i think those are the category breadcrumb dropdown and category nav filter.

try this in common css of a component.

.category-breadcrumb {
    display: none;
}    

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

It’s ok, now it’s as I wanted, thank you very much, I’m glad you’re here

I want to hide the categories from the side navigation menu, how can I hide it?

I have hidden all of them from the administration panel, but still the categories are visible. I want to hide the categories from the side navigation menu. I would appreciate your help, thanks in advance.

See also attached image:
This is the result from the up-scaling as seen on the dashboard.
The original one looks like this.

Is there a way to prevent this ugly up-scaling?

Thanks

=====

Welcome, Will!

The issue lays here:

<div class="topic-image" style="background: url(https://forum.cyberbrein.nl/uploads/default/original/1X/aef8c5e27bb1320fd8da2319220c5193e56e2323.jpeg);background-position: center;background-repeat: no-repeat;background-size: cover;"></div>

Remove background-size: cover;, or add:

.topic-image {
    background-size: auto !important;
}

in your theme or a new component if you can’t edit the component that creates these thumbnails.

edit: it seems your use this theme: FKB Pro - Social theme
I’ll move your topic in the dedicated topic.

Thank you for the welcome and suggestion @Canapin.
And yes - this is the right theme.

As I’m a real newbie here:
I have no idea where to make this change.
Could you point me in the right direction?

Thank you - Will

Unless the author (Hi Don!) thinks it’s a welcome addition to change this, here’s what you can do:

1. In your admin panel, go to Customize → Themes → Components.
   Click the Install button at the bottom of the list.

2. Click + Create new, choose a name (like “Custom CSS”, “Theme tweaks”, anything that you’d like and is descriptive enough), and click Create.
   

   

3. Include the theme component in the FKB Pro theme:
   

4. Click Edit CSS/HTML, go to the CSS tab. Write:

   .topic-image {
       background-size: auto !important;
   }
   

   Click Save.

That should fix your issue.

Thank you - working as expected.

This is based on an override.
How about removing this background-size?
How would I do that?

I tried setting it to none.
But that just brings back the thing I was trying to remove.
If setting it to auto still increases the image - just in a different way.

The auto value is the default value, which is equivalent to having no specific background-size rule.

Ah - ok - thank you for this jumpstart in customizing themes.

Hello

Thanks for bringing this up! I’ve made an update on topic image (thumbnail) section.

With this update I replace background with <img> and optionally a backdrop image can be added to this. The backdrop can handle the small image (which not cover this section) empty area. It works like a hacky dominant color background with the default settings.

I have added some new settings. With this setting you can choose the:

1. Topic image section height (default: 300px)

2. Image fit

• cover (default)
• contain
• scale-down
• none

3. Backdrop image (default: disable)

4. Backdrop image blur

5. Backdrop image brightness

This is how it looks:

Default (image fit cover, no backdrop)

Image fit contain

Image fit contain with backdrop

Difference between image fit (cover, contain, scale-down and none)

small image

larger image

Difference between blur and brightness values
blur
50px, 25px, 10px

brightness
0.65, 0.55, 0.45

Edit: Forget to add the image fit none option.

Hello, I would like to point out some errors.

The following sensitivity issue appears on the users, groups and topics page (with a few posts).

desktop view only

Users

Groups

It works perfectly on other pages as in the image below.

As I understand it, the cause of the problem is the category, title, content, etc. It happens on pages with little content.

Thanks for the report @vifyirusti I’ve fixed it, please update the theme

We thank you. You are so fast.

I want to report one more bug.

The “Category” name of the posts under Latest, New and Top is not in the right place. (with Topic Ratings Plugin)

Kind regards @Don

Yeah I see, unfortunately I can’t test it now with the Topic Ratings Plugin but I think I know what is happening here.

The Topic Ratings Plugin use this code for the link-top-line element.

It is shrinking the link-top-line in FKB Pro theme and this is why the category badge placed above the user datas because that is the width of the element byline which contains the category badge and user datas so this is depends on how width is this element.

Thank you, I’ve merged a fix. Please update the theme.

joke? You are really fast. Thank you very much.

Hey just letting you know this is broken. Its at the bottom of any message.

Hey @carltheobesecat, thanks for the report I’ve fixed it.

Lovely theme. Seems to have issues with the Kanban plugin forcing the right box out of the page borders

Seeing a similar sizing issue with this component:

Hello @Drew-ART

Thanks for the report… I’ve merged a fix and made some styling change in Kanban Board to suits more to the theme.

Working great, thank you @Don

Another suggestion i have, if you are seeking feedback, is that the viewport for project management tools like Kanban and Calendar can get quite squeezed.

That could be solved if the user profile module on the right had a minimize button, so users could hide it when they want more space.

Hi,

@Don

It seems that the Slick Image Gallery and Masonry Image Gallery (theme-component) is not working. Can you help me?

@Don
Hi,

Is it not possible to position the “original fkb right panel” in the upper left corner of the page when using “Right Sidebar Blocks”? I think it would be a great feature, especially if it could be limited to desktop only. This would allow for a more rich left side on desktop.

Setting “Right Sidebar Blocks” will cause the Admin page to crash.

Thanks for the report I’ve fixed it via: FIX: Target Right Sidebar Blocks more specific · VaperinaDEV/fkb-pro-theme@42a7df4 · GitHub

It works perfectly! Thank you!

I checked the Slick Image Gallery and Masonry Image Gallery theme components. Works fine for me.

Note that there should be an empty line below <div data-...> line.

Like this it should work. I placed two images in <div>.

Slick Image Gallery

Masonry Image Gallery

I have confirmed that it is working. Thank you!

Is there a compatibility issue with the Discourse Docs (Documentation Management) plugin?

At the Docs

Only Topic List : The title, category name, and tags should be displayed as expected.

However, the body of the document is also displayed, and the tags are displayed in three lines, which causes the layout to collapse.

Thanks for the report I’ve merged a fix: UX: Fixes some docs compatibility issue by VaperinaDEV · Pull Request #30 · VaperinaDEV/fkb-pro-theme · GitHub

@Don

I sincerely thank you for your quick support. It works perfectly! Have a nice day!

Hello

Update

1. Set up custom FKB Panel footer links
2. Added a button to hide the right side FKB Panel

1. Custom FKB Panel footer links

By default it was hardcoded

Now, this section can be easily change with a setting
The items used before are preloads in this settings by default.

2. Button to hide the right side FKB Panel

Great idea, thanks
I’ve added a button to the page bottom to hide the FKB Panel. It saves the state in localStorage and keeps the actual state after reload the page too on the device.

That’s so cool! Great job!

This theme looks like the start of what my users scream at me to have. They asked me to have a theme where you could scroll through and in a glance see what has happened since they visited the page.

However, I am wondering how this works for the latests posts on a topic. Would they still have to click on each topic to see what happened or can they see all the posts they have not checked yet since last time they visited?

Hello @Jonathan_Poyer, Yeah you need to click the topic to see the replies. But you can use theRight Sidebar Blocks theme component where you can set latest posts section. This theme is compatible with it since FKB Pro - Social theme - #102 by Don.

Or you can check the A reddit-ish theme for Discourse. This theme contains a latest posts block by default. Sorry, it is not contains the latest post but recent (latest) topics you see…

@LoveMCJ you can check easily where are the connectors with Plugin outlet locations theme component

A see a small conflict with the Blog Post Styling component.

The text begins a little too close to the left edge. I’ll turn that component off with the FKP Pro theme for now, just thought you’d like to know.

I’ve set that by default when you go to All Categories, it displays just subcategories and on Desktop works great. On mobile instead, it displays the parent category in a different way too. I’m using FKB Pro theme. How can i display just subcategories on mobile?

Hey @Skeleton Thanks for the report, I’ve fixed it via UX: Hide parent-category on category page · VaperinaDEV/fkb-pro-theme@e627d53 · GitHub and UX: Fix subcategory border on category page · VaperinaDEV/fkb-pro-theme@c64784b · GitHub.
Please update the FKB Pro - Social theme.