Add new link on header beside search icon


(Daniela) #22

The same procedure I wrote in the previous post.

In your CSS Mobile add

i.home-button-icon {
    display: none;
}

Try it, if don’t work add !important

i.home-button-icon {
    display: none !important;
}

I cannot try it for now, my smartphone is :cross: but the new one is coming.


#23

You have a CSS stylesheet only for mobile version (by using the :iphone: icon) . You can add this on this stylesheet :

i.home-button-icon {
    display: none;
}

edit : damn, too slow


(Алексей Копаев) #24

Thank you) The second option is to help)


(Brahn) #25

I found a better way to add the icon. If you just want it to be the same style as the other icons there is no CSS required, just include the icon class in the helper a#home-button.icon

<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.google.com/',
            title: 'Google'
        }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon')),
    ]);
});
</script>

Then it works without CSS for both public and admin.


(Sebastian) #26

Yes the look is right, but the positioning is screwed up if I do that (and leave out CSS customization)


(Brahn) #27

I guess that must be related to having more than one icon yeah?


(Sebastian) #28

I guess :slight_smile: but isn’t that the whole point?


(Mittineague) #29

I can’t find it now and I never tried it, but I did see a post showing how to add multiple header links as an array instead of adding them individually.
Not that adding them that way would solve the issue for you, but it might.
What does the HTML for that <ul> look like?


(Sebastian) #30

Well right now I have

<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://forum.spaghetti-western.net/t/getting-started-in-the-swdb-forum-faq/8',
        title: 'Help'
    }, helper.h('i.fa.fa-question-circle.home-button-icon')),
    helper.h('a#home-button.icon', {
        href:'https://www.spaghetti-western.net/index.php/Donate',
        title: 'Donate'
    }, helper.h('i.fa.fa-paypal.home-button-icon')),
    helper.h('a#home-button.icon', {
        href:'https://www.spaghetti-western.net',
        title: 'SWDb'
    }, helper.h('i.fa.fa-book.home-button-icon'))
]);
});
</script>

But no CSS

/*
i.home-button-icon {
display: block;
padding: 4px 3px 3px 3px;
color: #999;
transition: all linear .15s;
}
i.home-button-icon:hover {
color: #222;
background-color: #e9e9e9;
}
*/

(Brahn) #31

Ok, so for two or more icons you need to modify it a little more to return an array of li helpers, something like this:

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return [
        helper.h('li', [
            helper.h('a#google-button.icon', {
                href: 'https://www.google.com/',
                title: 'Google'
            }, helper.h('i.fa.fa-google.google-button-icon')),
        ]),
        helper.h('li', [
            helper.h('a#fancy-button.icon', {
                href: 'https://www.fancy.com/',
                title: 'Fancy'
            }, helper.h('i.fa.fa-hand-spock-o.fancy-button-icon')),
        ])
    ];
});
</script>

Still no CSS needed :slight_smile:


(Stephen Gates) #33

I’ve followed the instructions but my icon is tiny…

52

</head> is…

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#home-button', {
            href:'https://theodi.org.au',
            title: 'go to the ODI Australian Network'
        }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon')),
    ]);
});
</script>

Desktop CSS is…

i.home-button-icon {
    color: #999999;
}

i.home-button-icon:hover {
    color: #ef3aab;
    background-color: #e9e9e9;
}

Any clues why the icon is so small?


(Joshua Rosenfeld) #34

Hey @Stephen_Gates, great question! It looks like the CSS classes have changed since the guide was written.

Here’s what you need now:

</head>:

<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://theodi.org.au',
                title: 'go to the ODI Australian Network'
            }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon.d-icon')),
        ])
    ];
});
</script>

Desktop CSS:

i.home-button-icon:hover {
    color: #ef3aab;
    background-color: #e9e9e9;
}

Here are the changes I made:

  1. Change a#home-button to a#home-button.icon.
  2. Add .d-icon to i.fa.fa-arrow-circle-up.home-button-icon
  3. Delete the first CSS rule, #1 solves this and ensures the icon the correct size for #2 to work.

(Stephen Gates) #37

Perfect! Works a treat :tada::grinning:


(Bas van Leeuwen) #38

I followed this thread a few days ago and turned it into a little plugin, might save someone some effort :slight_smile:
No CSS needed, it’s styled according to the other icons.


(Peter Toby) #39

This topic is great - thanks to everyone for contributing.

Sorry for the question - I’m just getting back into coding and would like to know how I can get the links to open in a new window when using this script:

<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://theodi.org.au',
                title: 'go to the ODI Australian Network'
            }, helper.h('i.fa.fa-arrow-circle-up.home-button-icon.d-icon')),
        ])
    ];
});
</script>

(cpradio) #40

Update

                href:'https://theodi.org.au',
                title: 'go to the ODI Australian Network'

to be

                href:'https://theodi.org.au',
                title: 'go to the ODI Australian Network',
                target: '_blank'

I think that should do it.


(Michael Friedrich) #41

Many thanks for all your hints and solutions :heart:

My requirement was to

  • provide a more prominent link to our achived forum
  • have the FAQ on top, to better highlight topic suggestions and guidelines

I‘ve solved this with two Font-Awesome-icons which are also available in the mobile layout. They also fit the general style next to the search and hamburger menu.

Put this into </head>:

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    return [
        helper.h('li', [
            helper.h('a#question-circle.icon', {
                href: '/faq',
                title: 'FAQ'
            }, helper.h('i.fa.fa-question-circle.question-circle-icon.d-icon')),
        ]),        
        helper.h('li', [
            helper.h('a#archive-button.icon', {
                href: '/woltlab/index.php?board-list/',
                target: '_blank',
                title: 'Archive'
            }, helper.h('i.fa.fa-archive.archive-button-icon.d-icon')),
        ])
    ];
});
</script>

Cheers,
Michael


(Sebastian) #42

since updating to 1.9, I suddenly am faced with this weird effect (so tiny!)

2924


(Michael Friedrich) #43

I had these as well, and then I’ve added .d-icon everywhere which solved it. Can you share your current snippet?


(Sebastian) #44

solves it for me as well, many thanks