Davis Custom Header -- ABANDONED

csf

Davis Haven't got to mobile yet. I'm actually going to hide the global links in phones and leave the logo only so Flarum can stand on its own there.

csf

jordanjay29 Thanks. Already there.

csf

@Davis, since this is going into core, maybe you have the developers' ears for this...

But one thing that becomes immediately clear for site owners employing a global identity/nav bar is that the site name value that gets inserted into <title>...</title> and <h1 class="Header-title">...</h1> is no longer ideal for search engines. These two elements need controlled separately.

For example, consider discussion.csf.community... With our use of a global identity/nav bar, we relegate the <h1 class="Header-title"> value as "Main page", which it is under this architecture. But that's no longer appropriate for the title because it provides no useful information to search engines, or when sharing links in social media.

So the Forum Title value in Admin > Basics should output to the title element only, and not to that h1 location too.

Looking ahead with this, and I know it's beyond scope of this thread, nor do I know how devs have decided to handle core implementation of your extension, but...

One good way to handle the issue is for devs to merge @sijad's Links and Pages extensions into core too as a single Local pages feature managed in Admin > Dashboard, or wherever. Then a site owner could use that native functionality to manage the class="Header-title" and class="Header-primary" items together easily, but under a more logical semantic.

For example, changing this:

<div class="container">
  <h1 class="Header-title">...</h1>
  <div id="header-primary" class="Header-primary">
    <ul class="Header-controls">
      <li class="item-link1">...</li>
      <li class="item-link2">...</li>
      ...etc
    </ul>
  <div id="header-secondary" class="Header-secondary">
    <ul class="Header-controls">
      <li class="item-search">...</li>
      <li class="item-flags">...</li>
      ...etc
    </ul>
  </div>
  ...
</div>

To this:

<div class="container">
  <nav id="localNav">
    <ul class="local-nav">
      <li class="nav-item1 home">Main page</li>
      <li class="nav-item2">Rules</li>
      <li class="nav-item3">Groups</li>
      <li class="nav-item4">Help</li>
    </ul>
  </nav>
  <div id="access">
    <ul class="access-controls">
      <li class="item-search">...</li>
      <li class="item-flags">...</li>
      ...etc
    </ul>
  </div>
</div>

I changed some selector names as well to demonstrate how the current redundant patterns in selector names could be cleared up a little too. (A problem throughout the markup that makes working with CSS harder than it needs to be).

Davis

csf you be best off creating an issue on github about this.

Kiru

Hello,

Can you give me the code for do like the first screen ?

Thank's ?

WriterStat

I chose to do something else instead. How do I get rid of it and reset it back to initial Flarum forum banner settings?

I disabled it...but...it didn't go away. =)))

So how to get rid of it and have it work like original Flarum?

Thanks! And for the work on the extension. Much appreciated.

Davis

WriterStat just remove the extension with composer remove davis/flarum-ext-customheader

Davis

WriterStat Even though disabled. It's removed the regular banner that's normally under the initial Flarum menu screen and whenever you go to another forum area, it immediately, automatically scrolls down past that forum area banner, so that you can't see it, displays that way. =) Unless you scroll back up to the top. Which for a user may mean they think there isn't a banner explanation for that forum area.

Don't know what you mean by this. Screenshots please?

WriterStat

Will give it a roll, Thanks! Will this reset it back to original? Right now it's reacting like the base code has been modified and not reset back to it's disabled/original.

I'd rather not have to re-install from scratch =) and reset up all the stuff. If possible. Thanks again for the help.

As an aside, when using the extension, you can't actually remove the html code in the custom header settings html input box, or set it to blank. When you try it gives you an error and resets it back to what it was before. Would be helpful to be able to.

Cheers,

Much appreciated. And for the extension. best, -C

Davis

WriterStat Luckily, Flarum doesn't work like SMF or other forum systems work. It never physically edits files when installing extensions. It only loads the bootstrap.php based on if the extension is enabled or not. Secondly, if you don't want to use the extension just remove it. I don't understand why there would need to be a way to disable the extension while it's still enabled.

Davis

WriterStat think that's just something with flarum.

Davis

WriterStat I'd guess it's based on cookies and if you've viewed the tag before. Try testing with incognito mode.

WriterStat

Now that I could understand. =) Good catch. I'm going to try it in a totally different browser. To see.

WriterStat

With the extension removed and the cookies and cache cleaned, everything works again. =) I'm going to remove the entries in the forum here, because they just clutter and I think it may have been a hiccup that caused the missing and scrolled display.

Cheers, and thanks again -C

Jamos

Just installed this extension. It seems the original Flarum header is being put behind the customer header (instead of below it).

Custom header is the orange part.

Custom header HTML:

<div id="custom-header">
</div>

Custom header CSS:

#custom-header {
  height: 20px;
  background-color: orange;
}

Davis

Jamos the ID custom-header is being used. Change your HTML to something else

Jamos

Davis I thought that might've been the case, so I changed the ID to "jamies-header". Result is unchanged. Perhaps it's something to do with my version of Flarum? I'm using 0.1.0-beta.5.

Davis

Jamos just wait until the next beta release. It's been added to core.

Jamos

Davis Ok, that's good to hear!

csf

I know this extension has gone into core, and the situation will change again when the next Flarum release comes out, but let this be a segue into a question about that too.

Part A

First, we've updated CSF to the last build of this extension (0.1.0 beta3). As anticipated, we had to modify our presentation to account for the markup changes from beta2 to beta3. No big deal. However, we seem to have introduced a bug somewhere. The behavior seems to be associated with this element and/or one of the selectors (though not 100% sure):

<header id="header" class="App-header">

But we're not able to track it down.

We can reliably see the bug when opening the Administration side, then using the upper-right corner link to return to the front home-page (currently called "Main page" for us). The problem is an exaggerated gap that appears in the header, marked with orange here...

header bug 0.3.0 beta3

The gap goes away if you refresh the page. And the gap does not appear when just navigating around the front-side, at least not that we've found yet.

This would suggest there might be a conflict in the CSS rules somewhere, but, as mentioned, we haven't been able to spot the location. If anyone has the knack and time to investigate with browser tools, or whatever, we'd be grateful. Between the necessary override rules and the rules we have in the header extension's settings, it gets hard to focus on it sometimes.

Part B

This leads me to want to ask some questions about the next iteration of this functionality in core, and I'd expect maybe @Franz or @Toby has inside knowledge of it, but anyone can say if they know... What is the markup and selectors going to look like in the next release?

As Davis mentioned earlier in the thread, the current 0.1.0 b3 markup is:

<header id="header" class="App-header">
    <div id="extGlobalNav">
        (Custom Header HTML)
    </div>
    <div id="header-navigation" class="Header-navigation"></div>
    <div class="container"></div>
</header>

Will that section of markup remain the same?

And related to that is an issue raised a while back to bring attention to how Flarum handles site identity, thus identity users see in email notifications when a global identity bar is employed. This is a real problem for us, currently, because notifications people see from our system identify as "Main page", and that's far from ideal.

Franz admitted there that the issue is a tricky one to handle, considering not everyone may want to use a global identity bar like we do. But if the header code has been integrated in core, then obviously it needs a solution, perhaps along these lines, or some other.

Is there any clarity on that yet about what we can expect with regard to markup and identity handling in the next release?

Davis

csf they added it into the blade files which is something you cannot do inside an extension so it will hopefully work flawlessly. Not exactly sure of the markup but you'll see when beta6 is released as there are only 2 issues left in the milestone.

« Previous Page Next Page »