# 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:** 1
**Showing post:** 327

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

---

_[View the full topic](https://meta.discourse.org/t/air-theme/197703)._