# Size topic avatar

**URL:** <https://meta.discourse.org/t/size-topic-avatar/80112>\
**Category:** Product Support\
**Created:** [February 8, 2018, 3:44pm UTC](https://meta.discourse.org/t/size-topic-avatar/80112 "2018-02-08T15:44:47Z")\
**Posts on this page:** 1\
**Showing post:** 14

<div class="post-metadata">

**Author:** ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)\
**Post date:** [February 12, 2018, 10:09pm UTC](https://meta.discourse.org/t/size-topic-avatar/80112/14 "2018-02-12T22:09:12Z")

</div>

Ok so I tried this and it worked quite nicely. Here is what I did:

1. created a theme and made it a component for my default theme

2. defined an enum setting in the component theme and gave it some values to choose from  

3. added this piece of code in Common \>\> \</head\>:

```html
<script type="text/discourse-plugin" version="0.4">
    api.changeWidgetSetting('post-avatar', 'size', Discourse.ThemeSettings.topic_avatars_size);
</script>

```

1. and this piece in Common \>\> CSS

```scss
.topic-avatar {
    width: #{$topic_avatars_size}px; /* from theme settings */
}

```

And I got this (80px avatars):

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/1/c17201c23fb57206aac410e09440c92ac5d862ed.jpg)

Changed the setting to 100px, reloaded the page and got 100px avatars:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/6/06f12abc2d6e6d1391a6b81c7aa3222b7742e0d9.jpg)

My PR for theme settings doesn’t have this - if you want this in I’ll push my changes after I polish my code a bit and write some tests.

---

_[View the full topic](https://meta.discourse.org/t/size-topic-avatar/80112)._