Air Theme

[eiJil]

Well, actually this issue has existed for like 2 months.

[jordan-vidrine]

Oh wow, sorry about that! I’ll look into it when I get some free space.

Thanks!

[Moolli]

Hi, love the theme! One question, not sure if this is the right place to post… but is there a way to put the categories on the left and recent conversation on the right? Would appreciate any help since I am really not technical and have not found a way to change it. Thank you!

[1378434153 (Tom)]

Great theme! thanks a lot
Can I change the background to images?
I uploaded the picture, but it doesn’t fit

[jordan-vidrine]

You will want to add some custom css:

html .background-container {
    background-size: cover;
}

[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.