# How to create this theme in Site Customization?

**URL:** <https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943>\
**Category:** UX\
**Created:** [2015年九月5日 14:16 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943 "2015-09-05T14:16:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![surjithctly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/surjithctly/32/116652_2.png) [@surjithctly](https://meta.discourse.org/u/surjithctly)\
**Post date:** [2015年九月5日 14:16 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/1 "2015-09-05T14:16:54Z")

</div>

I have created this style for Envato Forums. it’s just manipulating the DOM.

Here is how it looks like :

[IMAGE LINK](https://discourse-cdn.global.ssl.fastly.net/envato/uploads/default/original/2X/0/0fbcecd5022e0d7fffa58366df1e1235d816e368.png) (new users can’t put images)

> Actual Code to Install : [Envato : Old Forum Style for New Forums · GitHub](https://gist.github.com/surjithctly/74fdf9bcfed292d77096)

I’m new to Discourse. I’d love to know how this can be integrated in “Site Customization”

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015年九月5日 22:40 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/2 "2015-09-05T22:40:38Z")

</div>

Link is broken, do you have a local discourse install or one where you are an admin ?

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [2015年九月5日 23:05 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/3 "2015-09-05T23:05:27Z")

</div>

This is his image:

[https://discourse-cdn.global.ssl.fastly.net/envato/uploads/default/original/2X/0/0fbcecd5022e0d7fffa58366df1e1235d816e368.png](https://discourse-cdn.global.ssl.fastly.net/envato/uploads/default/original/2X/0/0fbcecd5022e0d7fffa58366df1e1235d816e368.png)

edit: d’oh

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015年九月5日 23:11 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/4 "2015-09-05T23:11:29Z")

</div>

Sorry, I mean the gist link is broken.

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015年九月6日 00:09 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/5 "2015-09-06T00:09:09Z")

</div>

You might get some ideas for how to include a thumbnail image from this post: [Reddit Style picture thumbnail on the left - #37 by rewphus](https://meta.discourse.org/t/reddit-style-picture-thumbnail-on-the-left/13089/37)

---

<div class="post-metadata">

**Author:** ![surjithctly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/surjithctly/32/116652_2.png) [@surjithctly](https://meta.discourse.org/u/surjithctly)\
**Post date:** [2015年九月7日 06:30 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/6 "2015-09-07T06:30:46Z")

</div>

Sorry, here is the actual link to the CSS & JS Code

Oops.. cant post more than two link 🙂 please see the original post for the updated link 👍

---

<div class="post-metadata">

**Author:** ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)\
**Post date:** [2015年九月7日 07:15 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/7 "2015-09-07T07:15:41Z")

</div>

```plaintext
observeDOM( document.getElementById('main-outlet') ,function(){
     setTimeout(function(){
            $('.topic-list-item').not('.old-forum-loaded').each(function() {
             showAvatars( $(this) );
             hideCustomTags( $(this) );
             });
        },1000)
});

```

You should be hooking into Ember to do these 😄 That’ll let you filter out the tags before they even go into the DOM.

---

<div class="post-metadata">

**Author:** ![surjithctly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/surjithctly/32/116652_2.png) [@surjithctly](https://meta.discourse.org/u/surjithctly)\
**Post date:** [2015年九月7日 07:27 UTC](https://meta.discourse.org/t/how-to-create-this-theme-in-site-customization/32943/8 "2015-09-07T07:27:34Z")

</div>

I wish I could. but I’m new to the Ember thing 😛