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.