# Homepage Toggle

**URL:** https://meta.discourse.org/t/homepage-toggle/265617
**Category:** Theme component
**Tags:** desktop, broken
**Created:** [May 20, 2023, 3:00am UTC](https://meta.discourse.org/t/homepage-toggle/265617 "2023-05-20T03:00:43Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Joseph\_Hansen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joseph_hansen/32/280051_2.png) [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [May 20, 2023, 3:00am UTC](https://meta.discourse.org/t/homepage-toggle/265617/1 "2023-05-20T03:00:43Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | A theme component that toggles between two homepages. |
| 🛠 | **Repository** | [GitHub - josephclaytonhansen/discourse-homepage-toggle · GitHub](https://github.com/josephclaytonhansen/discourse-homepage-toggle) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New 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

**This Discourse theme component adds a toggleable homepage in the header, allowing users to jump between two pages that can be set in the theme component settings.**

- It uses the primary and tertiary colors from your theme automatically.
- You can set the icons (and URLs) for each side of the toggle in the theme component settings.

  

[https://i.gyazo.com/144a99c1989eb34ca813bb6549d99055.mp4](https://i.gyazo.com/144a99c1989eb34ca813bb6549d99055.mp4)

This was created for an art forum to toggle between an art-focused homepage gallery and a more traditional forum view. The default icons (a gallery and a list) reflect this by default but they are customizable.

Tested on Firefox, Chrome, Safari, and Edge- no issues found. For desktop only- future updates may include a mobile version as well

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 20, 2023, 3:07am UTC](https://meta.discourse.org/t/homepage-toggle/265617/2 "2023-05-20T03:07:40Z")

</div>

nicely done. i like this. 👏

---

<div class="post-metadata">

### Author: ![frold](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frold/32/82547_2.png) [@frold](https://meta.discourse.org/u/frold)
#### Post date: [May 20, 2023, 6:39am UTC](https://meta.discourse.org/t/homepage-toggle/265617/3 "2023-05-20T06:39:14Z")

</div>

> [@Joseph\_Hansen](#):
>
> Install this theme component

When using that function I get this error

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/6/5/b6553a5869588b7b71bee691d9a2a37a92b7322f.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/1/d/f1d7dd6139f921278b9f81e97bd297c1bd2ec2b7.png)

It works when using the url manually

---

<div class="post-metadata">

### Author: ![twofoursixeight](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/twofoursixeight/32/574822_2.png) [@twofoursixeight](https://meta.discourse.org/u/twofoursixeight)
#### Post date: [May 20, 2023, 6:43am UTC](https://meta.discourse.org/t/homepage-toggle/265617/5 "2023-05-20T06:43:10Z")

</div>

Seems like a useful component for those that want an art/picture focused home.

However: The gallery view in #Customization > Theme can also be used for a similar purpose.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [May 20, 2023, 6:50am UTC](https://meta.discourse.org/t/homepage-toggle/265617/6 "2023-05-20T06:50:30Z")

</div>

And FYI for every beginner: icons (`list` or `grip-vertical`etc.) must be added on admin setting `svg icon subset`.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [May 20, 2023, 6:54am UTC](https://meta.discourse.org/t/homepage-toggle/265617/7 "2023-05-20T06:54:09Z")

</div>

It looks like to be desktop-only, right?

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 20, 2023, 7:18am UTC](https://meta.discourse.org/t/homepage-toggle/265617/8 "2023-05-20T07:18:21Z")

</div>

> [@Joseph\_Hansen](#):
>
> For desktop only- future updates may include a mobile version as well

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [May 20, 2023, 7:40am UTC](https://meta.discourse.org/t/homepage-toggle/265617/9 "2023-05-20T07:40:21Z")

</div>

I missed that last sentence totally 🤦‍♂️

I think there is a tag for such situations, like #desktop

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [October 30, 2024, 3:08pm UTC](https://meta.discourse.org/t/homepage-toggle/265617/11 "2024-10-30T15:08:07Z")

</div>

This appears to be broken… what would it take to repair it?

 ![The image shows a screenshot of a coding environment with a text editor and console displaying error messages. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/5/8/4/58434dd700c55d57133e99ab120c4f57e7ac8bf8.jpeg)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 30, 2024, 3:47pm UTC](https://meta.discourse.org/t/homepage-toggle/265617/12 "2024-10-30T15:47:21Z")

</div>

the decorateWidget is deprecated (edit: in the header)

> [@Widgets, the Widget API and their roadmap?](https://meta.discourse.org/t/widgets-the-widget-api-and-their-roadmap/292624/2):
>
> Yup, the widget API’s days are numbered. We are already working to reduce their usage in core. Right now we are actively working on converting the header. We already took care of the search and user-menu dropdowns, and are now moving on to the rest of the header. Current plan is for this change to be behind a feature flag, so that we can introduce deprecations and start the migration process for the (many!) themes and plugins which are currently using decorateWidget(). @isaac has an early draf…

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [October 30, 2024, 3:49pm UTC](https://meta.discourse.org/t/homepage-toggle/265617/13 "2024-10-30T15:49:47Z")

</div>

Specifically: modifying the header using decorateWidget was deprecated, and is now impossible. More details here:

> [@Upcoming Header Changes - Preparing Themes and Plugins](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544):
>
> We’ve recently [been working](https://github.com/discourse/discourse/commit/21f23cc032) on updating Discourse’s header from the legacy ‘widget’ rendering system to modern Glimmer components. This change is now available in Discourse core behind the glimmer header mode site setting. timer_clock Approximate Timeline (very rough estimates - subject to change in either direction) Q1 2024: white_check_mark core implementation finished & enabled on Meta white_check_mark upgrade advice published; console deprecation messages enabled …

(decorateWidget itself still exists for now, and is still a supported way to customize some parts of the Discourse UI)

I’ll mark this theme-component #broken for now
