# Air Theme

**URL:** https://meta.discourse.org/t/air-theme/197703
**Category:** Theme
**Tags:** air-theme
**Created:** [July 20, 2021, 8:24pm UTC](https://meta.discourse.org/t/air-theme/197703 "2021-07-20T20:24:30Z")
**Posts on this page:** 20
**Page:** 7

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 11, 2022, 6:37pm UTC](https://meta.discourse.org/t/air-theme/197703/307 "2022-10-11T18:37:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![1378434153](https://avatars.discourse-cdn.com/v4/letter/1/b38774/32.png) [@1378434153](https://meta.discourse.org/u/1378434153)
#### Post date: [October 12, 2022, 1:55am UTC](https://meta.discourse.org/t/air-theme/197703/308 "2022-10-12T01:55:42Z")

</div>

Okay. But the theme can not to custom 😵

---

<div class="post-metadata">

### Author: ![1378434153](https://avatars.discourse-cdn.com/v4/letter/1/b38774/32.png) [@1378434153](https://meta.discourse.org/u/1378434153)
#### Post date: [October 12, 2022, 6:26am UTC](https://meta.discourse.org/t/air-theme/197703/309 "2022-10-12T06:26:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Moolli](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@Moolli](https://meta.discourse.org/u/Moolli)
#### Post date: [October 12, 2022, 4:44pm UTC](https://meta.discourse.org/t/air-theme/197703/313 "2022-10-12T16:44:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mati\_h](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mati_h/32/246473_2.png) [@mati\_h](https://meta.discourse.org/u/mati_h)
#### Post date: [October 12, 2022, 6:54pm UTC](https://meta.discourse.org/t/air-theme/197703/315 "2022-10-12T18:54:37Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [November 4, 2022, 5:35am UTC](https://meta.discourse.org/t/air-theme/197703/316 "2022-11-04T05:35:25Z")

</div>

My theme is [discourse.fotografos.online](https://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?

---

<div class="post-metadata">

### Author: ![eddy2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eddy2/32/280597_2.png) [@eddy2](https://meta.discourse.org/u/eddy2)
#### Post date: [November 5, 2022, 8:07am UTC](https://meta.discourse.org/t/air-theme/197703/317 "2022-11-05T08:07:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [November 7, 2022, 12:49pm UTC](https://meta.discourse.org/t/air-theme/197703/318 "2022-11-07T12:49:12Z")

</div>

> [@Air Theme](https://meta.discourse.org/t/discourse-air-theme/197703/80):
>
> 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; }

---

<div class="post-metadata">

### Author: ![eddy2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eddy2/32/280597_2.png) [@eddy2](https://meta.discourse.org/u/eddy2)
#### Post date: [November 24, 2022, 3:20am UTC](https://meta.discourse.org/t/air-theme/197703/321 "2022-11-24T03:20:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [December 2, 2022, 3:45pm UTC](https://meta.discourse.org/t/air-theme/197703/322 "2022-12-02T15:45:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![eddy2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eddy2/32/280597_2.png) [@eddy2](https://meta.discourse.org/u/eddy2)
#### Post date: [December 6, 2022, 5:28pm UTC](https://meta.discourse.org/t/air-theme/197703/323 "2022-12-06T17:28:30Z")

</div>

Thank you. I really appreciate your help.

---

<div class="post-metadata">

### Author: ![eddy2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eddy2/32/280597_2.png) [@eddy2](https://meta.discourse.org/u/eddy2)
#### Post date: [December 8, 2022, 6:42am UTC](https://meta.discourse.org/t/air-theme/197703/324 "2022-12-08T06:42:01Z")

</div>

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](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.

---

<div class="post-metadata">

### Author: ![Brady1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brady1/32/285218_2.png) [@Brady1](https://meta.discourse.org/u/Brady1)
#### Post date: [December 13, 2022, 2:37am UTC](https://meta.discourse.org/t/air-theme/197703/325 "2022-12-13T02:37:41Z")

</div>

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

 ![Screen Shot 2022-12-12 at 9.37.35 PM](https://global.discourse-cdn.com/meta/original/4X/f/1/e/f1e67dfc01f584c91f8e5a07e0111f870ed074b8.jpeg)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [December 13, 2022, 1:33pm UTC](https://meta.discourse.org/t/air-theme/197703/326 "2022-12-13T13:33:26Z")

</div>

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

---

<div class="post-metadata">

### Author: ![UnitedFreedom](https://avatars.discourse-cdn.com/v4/letter/u/ac91a4/32.png) [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)
#### Post date: [December 15, 2022, 2:58am UTC](https://meta.discourse.org/t/air-theme/197703/327 "2022-12-15T02:58:39Z")

</div>

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

```plaintext
/* [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.

---

<div class="post-metadata">

### Author: ![UnitedFreedom](https://avatars.discourse-cdn.com/v4/letter/u/ac91a4/32.png) [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)
#### Post date: [December 15, 2022, 6:01am UTC](https://meta.discourse.org/t/air-theme/197703/328 "2022-12-15T06:01:36Z")

</div>

### 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)

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/6/6/466a811652ba917f27d86c63b4616d8c8d79827c.png)

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

```plaintext
/* 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)

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/1/3/c13d51fcf4e9b343c83254bf159872168c813702.png)

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

```plaintext
/* 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.

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/c/5/5c58c73320e52aeb7ad479a095af714e4de7fd84.png)

---

<div class="post-metadata">

### Author: ![UnitedFreedom](https://avatars.discourse-cdn.com/v4/letter/u/ac91a4/32.png) [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)
#### Post date: [December 15, 2022, 6:36am UTC](https://meta.discourse.org/t/air-theme/197703/329 "2022-12-15T06:36:44Z")

</div>

### 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

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/4/d/74dd3789f15d0ac0b15cc48b2fc61837f746fe9a.png)

### 2.When the dropdown menu is clicked

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/c/61cd8fa5c0aa40daec62f8f38fe476789d64ae6f.png)

### 3.After you click

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/9/0/c90dd5326e8c901fa221bddcd041f4b89d7ace44.png)

### 4. Dropdown menu (missing Categories)

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/6/f/56f33eb671e50d51cf66064a70fe2fa3d1a0ef3b.png)

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

Any advise on how to fix this issue?

Thanks

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [December 15, 2022, 12:26pm UTC](https://meta.discourse.org/t/air-theme/197703/330 "2022-12-15T12:26:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 22, 2023, 10:56am UTC](https://meta.discourse.org/t/air-theme/197703/331 "2023-01-22T10:56:39Z")

</div>

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

 ![Screenshots_2023-01-22-06-28-09](https://global.discourse-cdn.com/meta/original/4X/b/7/0/b7086c079000f59a37e50740108755dcc1713d04.jpeg)

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

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [January 23, 2023, 12:57pm UTC](https://meta.discourse.org/t/air-theme/197703/332 "2023-01-23T12:57:37Z")

</div>

> [@Heliosurge](#):
>
> I can if needed dm you a link to take a look.

Please send a link, Ill take a look 👍

[Previous page](https://meta.discourse.org/t/air-theme/197703.md?page=6)

[Next page](https://meta.discourse.org/t/air-theme/197703.md?page=8)
