Why isn't there an obvious link from meta.discourse.org to discourse.org in the header?

site feedback
1

Is there a good reason not to have one? It seems like a link back to the main website would be simpler/better than forcing users to go up to the address bar and edit the url.

The reason I ask is because I want to link back to my main website from my discourse forum, and I’m wondering if there’s any good reason this shouldn’t be done.

Also, I know that the header HTML can be edited, but where can I find the default HTML to edit? I want to add a link either in the nav menu or in the section above it.

Thanks

2

Slightly OT – but I’d be interested in seeing how other Discoursi handle this issue as well. We do this:

AMICAL_Connect.png2300×286 68.8 KB

Which is workable but not altogether elegant.

3

I do this. Happy to share my code if anyone wants it.

4 Likes
4

There are a couple of examples in #howto

https://meta.discourse.org/t/custom-nav-header-like-discourse-org/21053

4 Likes
5

That is the best looking discourse implementation I’ve yet seen, and I’d love to see your code, thank you.

6

Thanks. :slight_smile:

I’m about to run out the door so I’m doing this in a rush – I’ll check back in the morning in case you have questions.

Put this in the </head> section and customise to suit:

<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://www.feverbee.com/register', 
                        text:'REGISTER',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://www.feverbee.com/resources', 
                        text:'RESOURCES',
                        target:'_self'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://ondemand.feverbee.com/', 
                        text:'TRAINING',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/consultancy', 
                        text:'CONSULTANCY',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/about-us', 
                        text:'ABOUT',
                        target:'_blank'
                    })
                ]),
                helper.h('li', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com', 
                        text:'HOME',
                        target:'_self'
                    })
                ])
            ]);
        }
});
</script>

Then put this in your custom CSS:
*caveat: I haven’t revisited these media queries for many upgrades so some may no longer be necessary and it’s almost def not best practice!

/*header stripe, shadow*/
.d-header {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
padding-bottom: 3px;
border-bottom: 2px solid #f3a633;
}


.badge-wrapper.box span.badge-category {
    padding: 0 6px 2px;
}

// header links

.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

@media screen and (max-width: 940px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 667px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container {
        display: none;
    }
}
    
.nav-link-container {
  display: inline;
  position: absolute;
  right: 140px;
}
.nav-link-container  li { 
  display: inline-block;
  float:right;
}
.nav-link-container  a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-align: center;
  font-family: 'Montserrat'; 
  line-height: 48px;
  min-width: 90px;
  font-size: 15px;
  padding: 0 1em;
}
8 Likes
7

Thanks @HAWK, am actually benchmarking from what you did at https://experts.feverbee.com/ to customise our new community still under construction.
I don’t mind if you passby http://community.world-like-home.com (it’s in french though :blush: )

2 Likes
8

After adding the header with links, I wanted to add a banner. I guess am just supposed to add the code to the existing CSS ? I did that using the code provided here

But there seems to be no effect, any idea why?

Thanks

9

You have to create a banner post for those styles to be applied to. I can’t see one on your forum.

2 Likes
10

I thought the image was going to show up irrespective of if I added a banner topic or not.
I just added the banner topic, but the background image I defined in the CSS is simply being ignored!
Here is the banner image code :slightly_smiling_face:
/> / banner

#banner {
border-radius: 0;
box-shadow: none;
background: url(“http://community.world-like-home.com/uploads/default/optimized/1X/b6c6b89e0a7ff4b8ffd6cfc97bd7d8fb8c39774c_1_690x251.jpg”) no-repeat;
padding: 20px;
max-height: inherit;
background-size: cover;
background-color: rgba(255, 255, 255, .6);
background-blend-mode: color;
}

Am guessing there’s something am not doing right ?

11

Nope, that’s not how CSS works I’m afraid!

So that is working – it’s just that you are linking to an image for the background that is 404ing.

1 Like
12

Thanks very much @HAWK, what is the image supposed to be please :thinking:?

Sorry too much questions

13

It’s all good. I can’t answer that one though – you need to find the correct link to the image.

1 Like
14

Thanks very much :hugs:

1 Like
15

Sorry @HAWK lot’s of questions…

I successfully made the background image to appear (I don’t even know exactly how I guess there was something wrong with the code), but I can’t see how to make it fill the whole width of the screen. I have tried with width 100%, but its not helping…

Am also curious to know how you managed to add the search bar on top of the banner? :wink:

Thanks very much…

16

What size is the image?

That’s a very different prospect. What you are creating is something that will end up like the banner here. The FeverBee homepage isn’t a pinned banner, it’s much more complicated customised CSS.

17

ok I see, I guess that’s why I can’t easily make the image fill the width like what you have at FeverBee.

The image should be 977 KB

Thanks

18

You should be able to… did you look at the uxmastery example? I have the image filling the banner there. Sorry, I should have said what dimensions are the image.

19

I sketched one of the methods. In widget insert any html code.
Might come in handy.
CSS connected. Done in 5 minutes. But it seems to work.
https://github.com/Toxu-ru/banner-test

1 Like
20

Yeah, but I was not talking about the image filling the banner, rather filling the width of my screen. But thanks, I will have to leave it like that for now, I will come back to it sometime later!

Thanks

1 Like