Custom hamburger menu links

theme-component

#21

One more issue if you have a moment.

I’m trying out swapping the background and foreground colours to pop out my custom links. That’s working, but can’t seem to override the hover colour, any thoughts?

.custom-hamburger-link.welcome {
  font-weight: bold;
  color: $secondary;
  background-color: $tertiary;
}

.custom-hamburger-link.welcome:hover {
  background-color: $primary;
}

(Daniela) #22

Try

.widget-link.custom-hamburger-link.welcome:hover {
    background-color: $primary;
}

#23

That works, Daniela, thanks!


#24

So just to share … in order to make some items ‘pop’, I’ve come up with this. Line Height is a bit of a hack for long, two-or-more-word links, but it’s close.

.custom-hamburger-link.my-important-link {
  font-weight:bold;
  color: $secondary;
  background-color: $tertiary;
  line-height: 1.7;
  border: 1px solid $secondary; 
}

.widget-link.custom-hamburger-link.my-important-link :hover {
  background-color: $primary;
}

Replace my-important-link with your link text hyphenated. Repeat for each one.

Works best when you have an even number of menu items (a number which differs by user type!)


(James Hahn II) #25

To the future newbie Discourse developer like myself that finds this solution on Google and struggles to understand what’s going on here, I wrote this for you. I hope it’s helpful.

p.s. Any mistakes in phrasing or vocabulary are entirely my own. Again, I’m new around here.


Discourse allows you to customize Parent Themes by adding Child Themes, just like WordPress or any other theme-driven design environment. In Discourse, a Parent Theme is simply called “Theme” while a Child Theme is a “Theme Component”.

Custom hamburger menu links is a Theme Component. After the initial download, you can import it and deploy as a Theme or convert it to a Theme Component that modifies your default Theme.

In this tutorial, we will walk through downloading Custom hamburger menu links as a Theme, importing it into your site’s Theme directory, and converting it to a Theme Component that modifies your default Theme. We will then add a link to your user’s Profile page in the Hamburger menu.

Let’s get started.

  1. Copy the Custom hamburger menu links Repository link: https://github.com/hnb-ku/discourse-custom-hamburger-links
  2. Go to https://example.com/admin/customize/themes (replacing “example.com” with your Discourse install’s url).
  3. Click “Import”.
  4. Select “From the web”.
  5. Paste the Custom hamburger menu links into the blank field.
  6. Click “Import”.

Hamburger links component is now highlighted in Themes list on the left side of the screen. It’s tempting to begin following @Johani’s instructions to add custom links right away. However, at this stage, modifications made to the settings will not apply to your chosen Theme. Additionally, continuing with this as your site’s Theme means rebuilding all of your customizations from the beginning.

Let’s continue.

  1. Scroll down and click the red “Make component” button.
  2. You are now asked, “Are you sure you want to convert this Theme to component? It will be removed as a parent from all components.” Click “Yes”.
  3. Looking to the left, Hamburger links component has dropped from your Themes list to your Components list. Click your chosen default Theme from the Themes list.

Scrolling down, you now see a new heading labeled “Theme Components”. If this is your first component install, Hamburger links component will display in a dropdown menu.

  1. Click the checkbox next to “Theme includes other child themes”.
  2. Click the “+Add” button to the right of the dropdown menu where you see Hamburger links component.
  3. Click “Hamburger links component” in the Components list on the left side of your screen.
  4. Under “Theme Settings” delete “General Link,https://twitter.com,g” in the second field.
  5. Replace it with “Profile,/my/preferences/profile,g”.
  6. Click anywhere in the blank space on the page.
  7. Click the green check mark to save your changes.
  8. Refresh your screen.
  9. Click the Hamburger menu.
  10. Bask in the glory of your very own custom Hamburger menu link.

Congratulations! You just customized your Discourse Theme using a Theme Component for the first time! No small feat. Pour yourself a beer … or brew install a new package and pretend you did.

If you do not see the changes, be sure you have “Theme is enabled by default” selected on your chosen Theme’s Customize >> Themes page. Once you’re done drinking and see the changes, continue adding custom links per the instructions found here: Custom hamburger menu links

Hack on, my friend!


(Joshua Rosenfeld) #26

Nice guide @jameshahnii. Two suggestion. First, steps 1-7 currently import the theme to your site, but does not link it to GitHub. Thus, if @Johani updates the theme in the future you will need to manually obtain the changes. It would be easier if this theme component was imported from GitHub, as then you’d simply click “update theme” to obtain the latest changes, while keeping your customizations. Second, step 3 is wrong, the link should include admin, not username.

The new steps would then be:

  1. Copy the theme’s Repository link : https://github.com/hnb-ku/discourse-custom-hamburger-links
  2. Go to https://example.com/admin/customize/themes (replacing “example.com” with your Discourse install’s url).
  3. Click “Import”.
  4. Select “From the web”
  5. Paste the link you copied into the field
  6. Click “Import”

Sadly this is one step less…so your later steps need to be renumbered, sorry!


(James Hahn II) #27

Very nice @jomaxro! Revisions reflected above.

Thank you!


(Joe) #28

Thank you for the excellent write-up!

We are in the middle of some very large changes to the Discourse theme system. As a result, you’ve run into some transitory issues that will not occur once the changes are finalised.

Themes and theme components are being split apart. Theme authors now need to declare whether something is a theme or theme component upfront. I had not updated this component - or our documentation for themes - since I’m waiting on the changes to settle.

I’ve now started with this theme component. Starting from today, if you download the component, it will automatically show up on the components list and you would not need to convert it.

Rest assured, there will be an announcement topic, as well as revisions to all our documentation for themes once the changes are final.


(Wolftune) #29

I tried adding this but wasn’t sure what links to have yet. It seems that having the component but having no links specified makes Discourse no longer render pages at all!

This (and also the Header submenus component too) should be ideally fixed to be safe to have installed even if zero items are specified.


(jrgong) #30

Great plugin! Started using it today to point users to resources for beginners etc.

Any chance we will see icons like in the header submenus theme component? that would make the links really distinctive from the default ones!