Air Theme

Theme
,
327

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

Instructions

1. Create a new component.

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.

6 Likes