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

faq-material

(Donald) #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


(Alex Armstrong) #2

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

Which is workable but not altogether elegant.


#3

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


(David Taylor) #4

There are a couple of examples in #howto


(Donald) #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;
}

(Efuet A Andrew) #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: )


(Efuet A Andrew) #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.


(Efuet A Andrew) #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.


(Efuet A Andrew) #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.


(Efuet A Andrew) #14

Thanks very much :hugs:


(Efuet A Andrew) #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.


(Efuet A Andrew) #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.


(Evgeny) #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


(Efuet A Andrew) #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