Davis Custom Header -- ABANDONED

Davis

Davis Custom Header -- ABANDONED (Feature added in beta 6)

Adds a header above the Flarum application that admins can input custom Html, CSS, and JS

Screenshots

Example Header
Example Image

Install

composer require davis/flarum-ext-customheader

Links

Github
Packagist

justshipit

I am not sure I am getting the idea of this extension @Davis - does this extension adds additional header or allows you to add custom JS/CSS/metatags into Flarum's <head> ?

Davis

justshipit it is meant to add a custom header but there are options to add JS and CSS code that you could use

choppra

Davis Can explain how to use this?

Edit: Nevermind! It just wasnt installing properly

choppra

This is a great extension. I can now easily add a site menu to the top of the flarum.

DaffyChuy

Possible to not have this header as sticky? I want it to hide after scrolling but it seemed like its just there always as a fixed nav.

Davis

DaffyChuy that's probably due to some of your CSS. Check and make sure your CSS doesn't include "position: fixed;".

DaffyChuy

Davis Don't have any absolute code in it. I even tried to only set it to the word test in html and nothing in css. It still sticks to the top

Davis

DaffyChuy which is it? Do you want it to hide after scrolling or always be visible?

DaffyChuy

Davis I want it to hide it after scrolling. So like at the top giving extra navigation.

Davis

DaffyChuy this is posible with JS. There's a box to input your custom JS in it. Let me know if you can't figure it out

audio_d

I have installed this header extension on the new beta (v0.1.0-beta.5).
It seems to be working well, although I have an issue. When you view a discussion, the icons (bars and chevron) appear as normal in the far left of the flarumHeader. When you roll over them to view the discussions panel that slides in from the left, this panel doesn't adjust to account for the new height including the custom header. The panel covers those icons and also the sticky icon (that appears when the panel is in view).
Effectively the discussion panel is too high on the page and need to be lowered by the height of the custom header. I looked through the existing documentation but couldn't see anyway how to do this. Can you help me, I would be happy to send you screenshots if that's useful at all.

Davis

audio_d I think I get the idea. This is probably a bug with my code and I'll try and check it out later today.

justshipit

Hello @Davis ! Small feature suggestion for this header:

Don't load/show the header if the user is signed in ?

Davis

justshipit really? That's an interesting request. Why's that?

jordanjay29

Davis Presumably so the header can contain guest-only information or ads that registered users aren't subjected to.

Davis

jordanjay29 I'm just curious of his situation.

justshipit

Davis Yes, exactly what jordanjay29 mentioned. On top of that some informations you want to display targeting non-members only ?

In dashboard it could be shown as checkmark " ☑ Don't load the header for signed in members"

csf

Huzzah. This is what I needed. As soon as I get my http to https redirection woes ironed out, this extension goes in.

csf

@Davis, I'll be trying this much anticipated plugin this weekend. I was just looking quickly at the settings (not trying anything yet) and have a few questions based on what I see there:

First, does this make use of the existing header HTML, here:

<header>
  <div id="header-navigation" class="Header-navigation"> 
      EXTENSION HTML GOES HERE 
  </div>
</header>

That seems like the logical way.

And if so, can we then simply add our markup with the assumption it will be inserted into that div?

Also, the first field reads Header Http. I'd suggest just Header HTML, assuming I understand that right.

Also, in the CSS field, does it have to be CSS rules or can we add an external link like this...

@import url(https://domain.tld/path/to/file.css);

Or like this...

<link rel="stylesheet" media="screen" href="https://domain.tld/path/to/file.css" />

Finally, about the Fixed height of header field... Wouldn't that just be handled in the CSS? For example, I've got that covered now in the Appearance overrides. Can I just leave this field blank and handle via other CSS routes?

Thanks in advance.

Davis

csf First, does this make use of the existing header HTML, here:

This is the way it inserts it:

<header>
    <div id="customHeader">
        {YOUR CUSTOM HTML}
    </div>
    <div id="flarumHeader">
        <div id="header-navigation" class="Header-navigation"> 
            {FLARUM HEADER}
        </div>
    </div>
</header>

csf Also, the first field reads Header Http. I'd suggest just Header HTML, assuming I understand that right.

Thanks for noticing: dav-is/flarum-ext-customheader108bf14

csf @import url(https://domain.tld/path/to/file.css);

I'm pretty sure that would work

csf Wouldn't that just be handled in the CSS?

Yes, and no. I had to adjust the CSS of the Flarum header as it is a fixed element so that value is used to adjust the Flarum margins and height. So make sure you set your CSS to match the number you put there.