Just what is it that’s about to be broken, anyway? Maybe there’s an existing supported theme component that will do the job.
If it just the banner at the top that links to the main site?
1 Like
Is there a replacement for:
api.changeWidgetSetting("header-notifications", "avatarSize", "large");
This gives me the deprecation warning that leads here:
The header-notifications widget has been deprecated and changeWidgetSetting is no longer a supported override.
5 Likes
I am also on the same boat.
Trying to change logo URL the proper way, but the following is not achievable anymore:
api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");
What is the replacement API call for this?
1 Like
We are working on creating a clean solution for this, but it’s not quite ready yet. Keep an eye on this topic for updates.
2 Likes
Hi @david - can a clean solution be ready by Friday June 7? If not, could you provide an estimate?
Sorry for rush, we are starting closed Beta on June 17 and need to know if this will be implemented before the testing or not.
I don’t have an exact date, but it’s likely to be in the next 1-2 weeks. It won’t be ready by tomorrow.
If you need something working for tomorrow, then I’d recommend using the old API, which will automatically switch your site to use the legacy header implementation.
2 Likes
@kana.tatsuta the new API is merged.
I added a section on the OP with examples of how to customize the logo URL.
2 Likes
We’ve enabled the admin notice for new deploys on instances using incompatible plugins or themes.
2 Likes
I’m not sure how to update my code. I’ve tried a few things, but every time the images show from the light theme instead of my dark theme and what’s been directly uploaded for these images in the component. Any suggestions on what this should be refactored to?
<script type="text/discourse-plugin" version="0.8.25">
api.reopenWidget("home-logo", {
logoUrl() {
return (
settings.Alternative_logo_url || ""
);
},
mobileLogoUrl() {
return (
settings.Alternative_mobile_logo_url || ""
);
},
smallLogoUrl() {
return (
settings.Alternative_small_logo_url || ""
);
}
});
</script>
Try using a connector in the home-logo-contents plugin outlet. Your code would be translated to something like:
// javascripts/discourse/initializers/customize-logo.gjs
import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: `logo-customizations`,
initialize(container) {
withPluginApi("1.29.0", (api) => {
renderHomeLogo(api);
});
},
};
function renderHomeLogo(api) {
const logoSmallUrl = settings.Alternative_small_logo_url || "";
const logoUrl = settings.Alternative_logo_url || "";
const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";
api.renderInOutlet("home-logo-contents", <template>
<HomeLogoContents
@logoSmallUrl={{logoSmallUrl}}
@logoUrl={{logoUrl}}
@minimized={{@outletArgs.minimized}}
@mobileLogoUrl={{mobileLogoUrl}}
@showMobileLogo={{@outletArgs.showMobileLogo}}
@title={{@outletArgs.title}}
/>
</template>);
}
3 Likes
For reopenWidget (sidebar-toggle), could you help me to understand how to replace the following code? I didn’t find instruction in this guide
// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for desktopView) */
import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";
function sidebarToggle(api) {
const applicationController = api.container.lookup("controller:application");
api.reopenWidget("sidebar-toggle", {
html(attrs) {
if (this.site.desktopView == true && attrs.showSidebar == false) {
applicationController.set("showSidebar", true);
}
},
});
}
export default {
name: "desktop-open-sidebar-always",
initialize() {
withPluginApi("0.10.1", sidebarToggle);
},
};
Hey folks 
,
Would anyone be able to help me out with the changes I need for this, please?
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
helper.h('a#graduation-cap.icon', {
href:'https://example.com/',
title: 'Learning Center'
}, iconNode('graduation-cap')),
]);
});
</script>
I believe I need to convert it to use api.headerIcons.add(“foo”, FooIcon, { before: “search” }) but i’m not 100% sure how to do that 
Any help here would be very much appreciated 
Hey @angelinekwan,
Here’s our recommendation:
1. Remove your existing javascripts/discourse/api-initializers/desktop-open-sidebar-always.js file
2. Create a new file: javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js and add the following code:
import { withPluginApi } from "discourse/lib/plugin-api";
const PLUGIN_NAME = "desktop-open-sidebar-always";
export default {
name: PLUGIN_NAME,
initialize() {
withPluginApi("1.34.0", (api) => {
api.modifyClass("controller:application", {
pluginId: PLUGIN_NAME,
calculateShowSidebar() {
if (this.site.desktopView && this.canDisplaySidebar) {
return true;
}
return this._super(...arguments);
},
});
});
},
};
Add the following to common/common.scss
html.desktop-view {
.header-sidebar-toggle {
display: none;
}
}
4 Likes
HI @Danny_Dainton,
Take a look at the Custom Header Links (icons) theme-component. I believe it does what you need.
If you can’t use the theme-component, api.headerIcons.add will do the trick. 
- Create a new initializer file. It needs to have the extension
.gjs - The following code should do what you want:
// javascripts/discourse/initializers/custom-header-icons.gjs
import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";
export default apiInitializer("1.34.0", (api) => {
api.headerIcons.add(
"custom-header-home",
<template>
<li>
<a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
{{dIcon "graduation-cap"}}
</a>
</li>
</template>,
{ before: "search" }
);
});
4 Likes
Thank you, Sir!
Ah that makes a little more sense to me now after seeing it in front of me.
I very much appreciate your response!! 
1 Like
Appreciate some assistance with migrating this piece of code I can’t figure out how to migrate:
api.reopenWidget("user-dropdown", {
html(attrs) {
return h(
"a.icon",
{title: I18n.t("custom.string.title")},
[iconNode("bell"), this.attach("header-notifications", attrs)],
);
},
});
The goal of this change originally is to keep the user-dropdown menu as is, but replace the profile image with an icon (bell)
The easiest way to get the effect that you want is to add the icon using the existing PluginOutlet and simply hide the user avatar image using CSS.
On a .gjs file:
// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs
import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";
export default {
name: "user-dropdown-bell-icon",
initialize(container) {
withPluginApi("1.34.0", (api) => {
api.renderInOutlet("user-dropdown-notifications__before", <template>
{{dIcon "bell"}}
</template>);
});
},
};
Add the following CSS:
.header-dropdown-toggle.user-menu-panel img {
display: none;
}
You get:
2 Likes