- 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
2 Likes
Thank you. I really appreciate your help.
1 Like
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.
1 Like
You could go through the following and add the css there:
1 Like
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
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)
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.
/* 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)
If you too, prefer to remove the blue background, here is the code to only remove it from the category pages.
/* 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.
4 Likes
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
2.When the dropdown menu is clicked
3.After you click
4. Dropdown menu (missing Categories)
At this point, a user is unable to select the dropdown and choose Categories again.
Any advise on how to fix this issue?
Thanks
2 Likes
Thanks a ton for posting these helpful instructions for those wanting the view column to be visible.
Do you have a link to you site? I am trying this on mine locally and am unable to reproduce.
2 Likes
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
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
Please send a link, Ill take a look 
2 Likes
Just cross posting this here. Thought Chat plugin had a conflict issue with Discourse Search Banner. But after trying a preview of just the Banner. Ir seems to be an issue related to Air Theme background.
See in Link below.
Just wondering if you have had a chance to evaluate the Chat plugin issue? as described above? My apologies as imagine your quite busy. I thought it was a conflict with Search Banner but it seems to be the Air Theme background. The chat plugin seems to be creating a white central column that overlays over the blue background.
Hi,
Found an issue when Discourse chat plugin activated the Banner of Discourse Search Banner blanks.
Running Test-passed
using Air theme. When Chat plugin disabled it displays no issues. After chat enabled as above.
EDiT: Was mistaken. Re confirmed it is actually a conflict/issue with Air theme background see blue is cut out/off. See posts below with chat off Blue background is displayed properly with Discourse search banner overlayed properly in white on blue.
Hi Heliosurge, I’m not quite sure to understand the issue (I do see an empty area on your screenshot though)
Can you share the exact steps we need to do to experience the issue so we can reproduce it ourselves? 
1 Like
It was very simple. The Air Theme had the Discourse Search Banner installed as part if the complete theme.
As stated running Test-Passed.
Once the Chat Plugin is enabled the Wrlcome banner if the Discourse Search Banner no longer displays the Welcome message.
Turn Chat plugin off. The Welcome banner is displayed.
Chat plugin Disabled
You can see in this ss the Chat plugin icon is gone from the header. You can also see tge other effects that the chat plugin is sermingly doing to the background creating a white empty rectangle ignoring the blue background.
Now looking at it might it be interfering with Air Thene’s blue wallpaper? as text is white in the banner. So I might be on the wrong track with the Discourse Search banner. It might be a conflict with part of the Air theme… ??
Confirmed. my apologies it seems ti be a conflict with Air theme background. Jist tried a preview of just Discourse Search Banner with Chat plugin.
see below
Sorry for the incorrect duiagnosis… 
Taking a further look in the Air Theme the blue part of the background is blocked in that center column when scrolling the blue is just on the outer edges. When chat disabled the blue part of the background connects from left to right through the center.
vs
Just giving this a bump. It seems to be actually the Air Theme background having a central white column. see pics above.
Just wondering if the team has been able to reproduce as have isolated to the Air Theme background and not an issue with search banner.
Hello Dan,
It seems your Search Banner plugin outlet is on the default above-main-container? I think you need to change this to place the Search Banner out from the #main-outlet 
However the theme has a chat custom style when enabled on the #main-outlet which I think only need to be active on chat pages.
This is adding the background with !important to the #main-outlet which override the theme background transparency on #main-outlet etc…
I think this is would be better with restrict this to .has-full-page-chat so only appears on chat pages?
With above-main-container setting
With below-site-header setting
3 Likes
