Air Theme

[jordan-vidrine]

The only way to do this would be to disable the component that customized the category page. You will want to go to https://discourse.jordanvidrine.com/admin/customize/themes, click on Components and find Modern Category + Group Boxes. Once on that page, scroll to the bottom and click on Disable

[1378434153 (Tom)]

Okay. But the theme can not to custom

[1378434153 (Tom)]

One more question, I need to show the number of views in the topic list, please tell me how to do that thank you very much

[Moolli]

Hi Jordan, thank you for your response! I really appreciate it!

[mati_h]

Hey @jordan-vidrine thanks for the great theme! I’m wondering if there’s a way to show categories and latest in the homepage? let us know.

[wendellverli (Wendell Fernandes)]

My theme is discourse.fotografos.online - for the life of me WHY IS THE TOP white? Where is my header!?? someone help! It’s a fresh install! what do I do to add an image there instead of solid blue?

[eddy2 (Eddy)]

@jordan-vidrine Is it possible to add a Views column? If so, where can I access this option? Thanks.

[jordan-vidrine]

Discourse Air Theme

I believe this should work: .full-width .contents .topic-list thead th.posts { width: 10%; } .full-width .contents .topic-list thead th.activity { width: 10%; order: 4; } th.num.views { width: 10%; order: 3; display: block; } .full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts { width: 10%; order: 2; } .topic-list .views { width: 10%; order: 3; } .full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age { width: 10%; order: 4; }

[eddy2 (Eddy)]

Thank you for the reply and for sending this info. I only wish I knew how to apply this to the theme!

[jordan-vidrine]

1. Go here admin/customize/themes
2. Click on components
3. Click Install
4. Click create new & give it a name
5. Click on the new component in the components list
6. Click Edit Html/css
7. Add the linked code above to the common css file.
8. Add this new component to the currently used theme

[eddy2 (Eddy)]

Thank you. I really appreciate your help.

[eddy2 (Eddy)]

I have not gotten the HTML/CSS to work with the current theme. However, I can see the “Views” section when previewing the new component. The theme also shows the new component as added.

Here is a short video: https://share.cleanshot.com/ekutkT

Please let me know if you see something I am doing wrong with the setup when time allows.

Thanks for all your help.

[Brady1 (Brady Anthony-Brumfield)]

where do I add this? this will fix the background image being cutoff like in the image, yes?

[jordan-vidrine]

You could go through the following and add the css there:

@jordan-vidrine

• Go here admin/customize/themes
• Click on components
• Click Install
• Click create new & give it a name
• Click on the new component in the components list
• Click Edit Html/css
• Add the linked code above to the common css file.
• Add this new component to the currently used theme

[UnitedFreedom (James)]

How to add the “View” column in the topics list.

I am in no way a developer, or programmer. I spent a few hours playing around with the CSS code using the Inspect Element feature in Google Chrome. I was able to get the view column to display correctly, and also did some re-sizing of every column to my preferred liking. You are more than welcome to adjust the width in the CSS code below. I have also added comments in the code so you can easily tell which code is for which column. For each column, there are 2 areas (Header, and row). These widths need to match.

I hope this helps all of you: @daming @bksubhuti @eddy2

@daming

I have a suggestion: maybe can add a data display of views to the main interface of the post. This gives users direct access to the most popular posts in the community.

@bksubhuti

How do I show views in the topic list (that column is missing) ?

@eddy2

Is it possible to add a Views column? If so, where can I access this option? Thanks.

Instructions

1. Create a new component.

@jordan-vidrine

• Go here admin/customize/themes
• Click on components
• Click Install
• Click create new & give it a name
• Click on the new component in the components list
• Add this new component to the currently used theme
• Click Edit Html/css
• Add the linked code above to the common css file.

2. Copy this CSS

Use this updated CSS below instead of the code provided by @jordan-vidrine above.

Option A) Add the Views column for only Desktop (Recommended)

• Add the CSS code into the Desktop tab.

Option B) Add the Views column for both Desktop & Mobile.

• Add the CSS code into the Common tab.

Option C) Add the Views column for only Mobile.

• Add the CSS code into the Mobile tab.

Note: If you chose Option B or C…

On mobile the 3 columns (Replies, Views, Activity) takes up to much room and is squished. If you need this for mobile, I suggest removing one of the 3 columns. You can do so by adding Display: none to both areas (Header, Rows) in the CSS code below for the column you want to hide.

/* [Topic] */

    /* Topic Header */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Topic Row */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Replies] */

    /* Replies Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Replies Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Views] */

    /* Views Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Views Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [Activity] */

    /* Activity Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Activity Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan-vidrine If you have any revisions to the CSS I wrote please let me know. I don’t fully know what I’m doing…but it works lol.

[UnitedFreedom (James)]

Here is my CSS changes to improve the Mobile View.

I absolutely love this theme, but noticed some little minor odd bits, so I also added the following CSS to make it look a little nicer in my perspective. I hope this helps someone else with the same preferences.

Here is the Original (Unedited)

Note the following in the picture above:

• The number 1 which represents the Replies is to far to the left.
• The topic bubble is slightly overlapping the blue background.
• There is no padding between all the content and the blue background.
• The blue background does not look nice in the category page. I love it on the home page though.

Here is the CSS code I added in the Mobile tab.

/* Add some padding to the Category, Sub-Category, Tags, searc, latest, new topic, and notification area*/
.list-controls {
    padding: 5px;
}

/* Adds some padding to the Topics area */
div#list-area {
    padding: 6px;
}

/* Aligns the Replies number more to the right */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
    float: right;
}

Updated (After adding the CSS)

If you too, prefer to remove the blue background, here is the code to only remove it from the category pages.

/* Removes the blue background for category only */
html .category .background-container {
    background: #fff;
    clip-path: none;
}

Here is what It looks like with all the changes.

[UnitedFreedom (James)]

Flagging Mobile Issue

On mobile, there is a Category dropdown. When clicked and either Latest, Unread, or Top is selected, you cant select Categories from the dropdown again.

1.Before

2.When the dropdown menu is clicked

3.After you click

4. Dropdown menu (missing Categories)

At this point, a user is unable to select the dropdown and choose Categories again.

Any advise on how to fix this issue?

Thanks

[jordan-vidrine]

@UnitedFreedom

Thanks a ton for posting these helpful instructions for those wanting the view column to be visible.

@UnitedFreedom

On mobile, there is a Category dropdown. When clicked and either Latest, Unread, or Top is selected, you cant select Categories from the dropdown again.

Do you have a link to you site? I am trying this on mine locally and am unable to reproduce.

[Heliosurge (Dan DeMontmorency)]

Thank for this complete polished full theme.

I am having an issue with featured topics component not showing the cards. I would like to also have the option to have it only show featured topics within specified categories. Which in theory it should or even in the variants based on the official one.

see pic below

I can if needed dm you a link to take a look. Both test topics have pics that are featured; though using custom tag pi-featured. Running test-passed

[jordan-vidrine]

@Heliosurge

I can if needed dm you a link to take a look.

Please send a link, Ill take a look