Add new link on header beside search icon


(Anders Thengs Kristensen) #45

I’ve recently added this to our site, but I wanted it to disappear on mobile if there wasn’t enough space to display the icons on the same row as everything else.

As I couldn’t find anything here about that spesific scenario, I tried my hands at it and ended up with

@media (max-width: 350px){
    i.home-button-icon {
        display: none !important;
    }
}

which seems to do the trick.

Hope this can be helpful to someone.


#46

I did try this to add a link to our Teamspeak server using the application link ts3server://ts.rivven.de. But the link is not working, got redirect to the 404 page. I did add ts3server to allowed href schemes.

Is this not possible?


(Jose C Gomez) #47

Trying to use a font in the font-awesome list that is not available in the version that comes with Discourse. Adding the CDN Script to the header fixes that issue, but it breaks other fonts that Discourse uses.

Looks like the discourse ones use -o at the end of the class fa-xx-o and that doesn’t work with the FontAwesome CDN script, in develoepr mode I can modify the class from fa-xx-o to fa-xx and it works…
Anybody have any ideas how I can use the newer awesome font but not break the existing stuff?


(Jose C Gomez) #48

I was able to get around this via CSS by using SVG to re-create the logo I needed. For future reference here’s what I did.

Use the above plugin to add the button and link to my Patreon site

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#home-button.icon', {
            href:'https://www.patreon.com<MyPatreonURL>',
            title: 'Become a Patron!'
        }, helper.h('i.fab.fa-patreon.home-button-icon.d-icon')),
    ]);
});
</script>

Use CSS Kung-Fu to encode an SVG of the Patreon logo into the new button

<style>
.fa-patreon:before {
    content: url("data:image/svg+xml; utf8, %3Csvg%20width%3D%2732px%27%20height%3D%2732px%27%20viewBox%3D%270%200%20569%20546%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Ctitle%3EPatreon%20logo%3C%2Ftitle%3E%3Cg%3E%3Ccircle%20data-color%3D%271%27%20id%3D%27Oval%27%20cx%3D%27362.589996%27%20cy%3D%27204.589996%27%20r%3D%27204.589996%27%20fill%3D%27%23F96854%27%20%3E%3C%2Fcircle%3E%3Crect%20data-color%3D%272%27%20id%3D%27Rectangle%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%27%20height%3D%27545.799988%27%20fill%3D%27%23052D49%27%3E%3C%2Frect%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
</style>

The above CSS is just an encoded SVG like the one below

<svg width='32px' height='32px' viewBox='0 0 569 546' version='1.1' xmlns='http://www.w3.org/2000/svg'><title>Patreon logo</title><g><circle data-color='1' id='Oval' cx='362.589996' cy='204.589996' r='204.589996' fill='#F96854' ></circle><rect data-color='2' id='Rectangle' x='0' y='0' width='100' height='545.799988' fill='#052D49'></rect></g></svg>

(Jeff Atwood) #49

Why not simply use a very high resolution PNG? It would be far easier and it’ll compress down extremely well due to the limited palette and geometric shapes.


(Jose C Gomez) #50

@codinghorror it was more a challenge than anything else seeing if I could do it with an SVG since the font-awesome wasn’t working for me.
But yes I agree the PNG would have worked just fine.

Thanks!


(Hamza Ahmed) #51

Hi, Thanks for the tip. Can you please tell me how to print string beside icon. Thanks