# Recommendations on layouts? A way to preview changes?

**URL:** https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513
**Category:** Community Building
**Created:** [December 19, 2019, 3:20pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513 "2019-12-19T15:20:55Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Heather\_Phillips](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_phillips/32/151426_2.png) [@Heather\_Phillips](https://meta.discourse.org/u/Heather_Phillips)
#### Post date: [December 19, 2019, 3:20pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/1 "2019-12-19T15:20:55Z")

</div>

I really love [https://discuss.codecademy.com/](https://discuss.codecademy.com/)

Our site is at [https://community.tillerhq.com/](https://community.tillerhq.com/)

We build product and experience loosely using Jobs to Be Done (as progress) model.

I think Code Academy gets at this. What is the member trying to do when they reach the site to ultimately improve their current situation? We’re also trying to achieve this and simplify.

I’d love to experiment with a format more like what’s on the Code Academy site, but don’t want to be disruptive to our members by experimenting on the live site. Is there a way to “preview” changes that affect layout?

I’ve also noticed that some minor formatting/aesthetic changes cause some issues with the TOC plugin we’re using I believe mostly due to latency (it takes a minute to catch up and reload properly after changes?) so we haven’t done much fine tuning as we rely on that feature heavily for our docs.

Also, if anyone has feedback on our site’s layout/organization that’d also be awesome. It’s helpful to get fresh eyes!

Thanks for a great product @sam @codinghorror 🙂 🎅 🎄

---

<div class="post-metadata">

### Author: ![osioke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osioke/32/238946_2.png) [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [December 19, 2019, 5:39pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/2 "2019-12-19T17:39:27Z")

</div>

Hey Heather 😃 👋

> [@Heather\_Phillips](#):
>
> Is there a way to “preview” changes that affect layout?

Yup there is! You can use the [customize section](https://community.tillerhq.com/admin/customize/themes) in your community admin settings to make and preview changes. See this beautiful guide that explains how it all works:

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

Seeing as you are interested in Codecademy’s theme, I figured I should also share this:

> [@Do you know what theme this is?](https://meta.discourse.org/t/do-you-know-what-theme-this-is/134483/2):
>
> They’re both custom themes built specifically for those sites. Codecademy does appear to use one freely available component in addition to their base theme, [Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241). There are some general similarities to [Material Design Theme - #214](https://meta.discourse.org/t/material-design-stock-theme/47142/214), but their theme is a bit more simplified.

> [@Heather\_Phillips](#):
>
> Thanks for a great product @sam @codinghorror 🙂 🎅 🎄

🤗

---

<div class="post-metadata">

### Author: ![Heather\_Phillips](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_phillips/32/151426_2.png) [@Heather\_Phillips](https://meta.discourse.org/u/Heather_Phillips)
#### Post date: [May 15, 2020, 2:55pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/4 "2020-05-15T14:55:19Z")

</div>

Picking this back up after we’ve made some changes.

First observation, it’s not possible to preview a different layout for categories as far as I can tell. We wanted to change the way the categories appeared from using Boxes with Featured Topics to Categories with Featured Topics. Updating this setting changed the live site. Just sharing here for others benefit.

 ![Screen Shot 2020-05-15 at 10.50.15 AM](https://global.discourse-cdn.com/meta/original/3X/6/4/641c8e3a80e6b64acfdbbb08d2d6134d9982db27.png)

New question, if possible, how can we edit the color of these links and text? We find it visually confusing on what’s a link and what’s not and there are so many links here. We’d like to customize the color of certain links to help people focus on what they actually need or may want to click on to further explore.

 ![Screen Shot 2020-05-15 at 10.53.14 AM](https://global.discourse-cdn.com/meta/original/3X/5/c/5c0a0cf1a91916d380fc3fe1770bd85e9c53315d.png)

---

<div class="post-metadata">

### Author: ![HAWK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hawk/32/86627_2.png) [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [May 18, 2020, 12:26am UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/5 "2020-05-18T00:26:01Z")

</div>

> [@Heather\_Phillips](#):
>
> how can we edit the color of these links and text?

Yes. You can change the colour/appearance of anything by going to the Customise tab of your Admin dashboard and either editing the CSS of your current theme or adding a theme component with the changes.

You can use your Chrome inspector to find the right CSS class to target.

---

<div class="post-metadata">

### Author: ![Heather\_Phillips](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_phillips/32/151426_2.png) [@Heather\_Phillips](https://meta.discourse.org/u/Heather_Phillips)
#### Post date: [May 19, 2020, 4:31pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/6 "2020-05-19T16:31:36Z")

</div>

Thank you! Any way to remove these unread and new counts from the subcategories? Got the color adjusted, but just think they clutter the view and would like to hide them. I didn’t find this in settings. We are just using the Light theme.

 ![Screen Shot 2020-05-19 at 12.30.06 PM](https://global.discourse-cdn.com/meta/original/3X/e/6/e6c91333b4f3e092e0b3f48947cae90fa5d82821.png)

---

<div class="post-metadata">

### Author: ![osioke](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osioke/32/238946_2.png) [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [May 19, 2020, 4:59pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/7 "2020-05-19T16:59:25Z")

</div>

Same suggestion Hawk shared above. Using your browser inspector, find the CSS class to target and use a theme component to make the changes.

---

<div class="post-metadata">

### Author: ![Heather\_Phillips](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_phillips/32/151426_2.png) [@Heather\_Phillips](https://meta.discourse.org/u/Heather_Phillips)
#### Post date: [June 19, 2020, 2:23pm UTC](https://meta.discourse.org/t/recommendations-on-layouts-a-way-to-preview-changes/136513/8 "2020-06-19T14:23:19Z")

</div>

Just wanted to close the loop here in case anyone else is curious about how to get a look similar to [discuss.codeacademy.com](http://discuss.codeacademy.com) with a custom home page banner. We ended up using this guide from @awesomerobot to get a banner that only shows on the home page. Not as fancy as theirs, but gets the job done!

> [@Add custom content that only appears on your homepage](https://meta.discourse.org/t/how-to-add-custom-content-that-only-appears-on-your-homepage/131415):
>
> A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

And then used the Category Banners

> [@Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241):
>
> discourse2Summary Category Banners uses existing category details to create banners for your category pages (for tags check out [Discourse Tag Banners](https://meta.discourse.org/t/discourse-tag-banners/124240)).eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-banners)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-category-banners](https://github.com/discourse/discourse-category-banners)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Category Banners uses existing category details to cr…

The CSS tweaks were helpful for the color scheme of unread counts, etc.

Thanks all!
