# Unread topics (Mobile version)

**URL:** https://meta.discourse.org/t/unread-topics-mobile-version/216653
**Category:** Development
**Created:** [February 1, 2022, 3:43am UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653 "2022-02-01T03:43:28Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [February 1, 2022, 3:43am UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653/1 "2022-02-01T03:43:28Z")

</div>

A couple of days ago this problem appeared in my forum, although I have already entered the topics, they seem unread to me, I had the same problem in the desktop version but I was able to solve it in the template, but honestly not in the mobile version I have been able to solve it, I hope someone can help me, this is the template I use:

```plaintext
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
    <td>
      {{~#unless expandPinned}}
      <div class='pull-left'>
        <a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a>
              </div>
              
      <div class='right'>
      {{else}}
      <div>
            {{/unless~}}
            

<div class='main-link'>
          {{raw "topic-status" topic=topic}}
          {{topic-link topic}}
          {{#if topic.featured_link}}
            {{topic-featured-link topic}}
          {{/if}}
          
          
{{#if hideCategory}}
   <div class='category'>
          <span class="author-name"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
        </div>
{{else}}
        
{{/if}}
                    {{#if topic.unseen}}
                      <span class="badge-notification new-topic"></span>
                      
             {{/if}}
          {{~#if expandPinned}}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if~}}
        </div>
                <div class='pull-right'>
          {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
        </div>
    
        <div class="topic-item-stats clearfix">
          {{#unless hideCategory}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/unless}}
    
          {{discourse-tags topic mode="list"}}
    
          <div class="pull-right">
            <div class='num activity last'>
            <span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
            </div>
          </div>
              <div class="clearfix"></div>
        </div>
      </div>
    </td>
</script>

```

 ![Mobile Topic](https://global.discourse-cdn.com/meta/original/3X/d/3/d331085ccd9f4e80619247e90cecec2f8dd2872d.jpeg)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [February 1, 2022, 10:57am UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653/2 "2022-02-01T10:57:10Z")

</div>

There are some changes in core template so you should compare with that.

If I see it correctly you change the profile avatar section with this `<a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a>` is the `/users/` path correct? This is going to the user profile instead of open user card. With the default user path it should be `/u/`.

The other change in your template is if category hidden show the username. Which is clearly visible on your screenshot. I changed that section like this.

**Remove this from your template:**

```plaintext
{{#if hideCategory}}
   <div class='category'>
          <span class="author-name"><a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
   </div>
{{else}}
        
{{/if}}

```

* * *

**And add this** to the default `{{#unless hideCategory}}` with `{{else}}`.

```plaintext
{{#unless hideCategory}}
{{~raw-plugin-outlet name="topic-list-before-category"}}
<div class='category'>
  {{category-link topic.category}}
</div>
{{else}}
<span class="author-name">
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
</span>
{{/unless}}

```

* * *

So I suggest to import the whole template and modify it what your needs like this.

```xml
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
<td class="topic-list-data">
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='pull-left'>
    <a href="/users/{{topic.creator.username}}">{{avatar topic.creator imageSize="50"}}</a>
  </div>
  <div class='right'>
    {{~raw-plugin-outlet name="topic-list-before-link"}}
    <div class='main-link'>
      {{~raw-plugin-outlet name="topic-list-before-status"}}
      {{~raw "topic-status" topic=topic~}}
      {{~topic-link topic class="raw-link raw-topic-link"}}
      {{~#if topic.featured_link~}}
      {{~topic-featured-link topic~}}
      {{~/if~}}
      {{~raw-plugin-outlet name="topic-list-after-title"}}
      {{~#if topic.unseen~}}
        <span class="topic-post-badges">&nbsp;<span class="badge-notification new-topic"></span></span>
      {{~/if~}}
      {{~#if expandPinned~}}
      {{~raw "list/topic-excerpt" topic=topic~}}
      {{~/if~}}
    </div>
    <div class='pull-right'>
      {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
    </div>
    <div class="topic-item-stats clearfix">
      {{#unless hideCategory}}
        {{~raw-plugin-outlet name="topic-list-before-category"}}
        <div class='category'>
          {{category-link topic.category}}
        </div>
        {{else}}
        <span class="author-name">
          <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
        </span>
      {{/unless}}
      {{discourse-tags topic mode="list"}}
      <div class="pull-right">
        <div class='num activity last'>
          <span class="age activity" title="{{topic.bumpedAtTitle}}"><a
              href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
          </span>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</td>
</script>

```

* * *

This is looking good to me in theme creator. Sorry if I missed something.

 ![Screenshot 2022-02-01 at 11.52.06](https://global.discourse-cdn.com/meta/original/3X/8/a/8a5c2bcd3a08c8c58562f6ff4103ef107f5a5147.png)  
 ![Screenshot 2022-02-01 at 12.05.28](https://global.discourse-cdn.com/meta/original/3X/3/2/32f9003e754bc7c8d5ca7482167e9827a2c07680.png)

Little CSS fix to make the title padding thinner so username can clickable.

```scss
.topic-list .main-link a.title {
  padding: 0.5em 0;
}

```

---

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [February 1, 2022, 7:08pm UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653/3 "2022-02-01T19:08:14Z")

</div>

Thank you very much, it’s solved now, it looks great. ❤

One more thing, is there any CSS to make the text font in the author’s name bigger and give it color?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [February 1, 2022, 7:18pm UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653/4 "2022-02-01T19:18:48Z")

</div>

I’m glad it solved. Sure you can change it. Like this ⏬  
Change size and color whatever you want.

```scss
.topic-list .topic-item-stats .author-name a {
  font-size: var(--font-up-1);
  color: red;
}

```

---

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [February 1, 2022, 7:30pm UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653/5 "2022-02-01T19:30:07Z")

</div>

Thank you very much again, it looks just as I wanted. ❤

![Jennifer Lopez Reaction GIF by NBC World Of Dance](https://global.discourse-cdn.com/meta/original/3X/5/4/541839b45cf02be826ad4a5e04489aaf42b4a5fd.webp)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [March 3, 2022, 7:30pm UTC](https://meta.discourse.org/t/unread-topics-mobile-version/216653/6 "2022-03-03T19:30:09Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.