0
Answered

Is it possible to add a HTML header? E.g., a JS navigation menu.

mrlawrencelam 3 years ago updated by eric 3 years ago 4

I would like to add a simple JS navigation menu on top so that my users can quickly navigate to other sections of my website. Is it possible? I tried to edit include.html but not successful.

Answer

Answer
Answered

FileRun updates don't usually replace files which don't need replacing. Most certainly they do not alter files which do not belong by default to FileRun (except for the rare cases where an entire folder might be replaced by an update).

The "customizables/include.html" file never gets overwritten.


Changing FileRun's code to include a header area is a complex task which requires advanced understanding of JavaScript and experience with FileRun's code.

My suggestion is that you load FileRun through a frame/iframe inside a custom HTML page of yours where you can add anything you want around the FileRun user interface. It's easier and future proof.

It is possible but since updates replace all files (even if they haven't been changed) you will need to keep a backup of your customizations and remember to re-add them after any FileRun updates.



You were in the right spot (as far as I know, maybe there's a better place for custom code?) - I was able to edit include.html and add a custom CSS menu. You should link to external CSS/JS files, I just did inline styles real quick as an example.


My CSS absolutely positions the navigation to be on the same top bar.





<style>
    .custom-navigation {
        position: absolute;
        top: 1.25em;
        left: 37em;
    }
    
    .custom-navigation ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .custom-navigation ul li {
          display: inline-block;
    }
    
    .custom-navigation ul li a {
        display: block;
        padding: 0.5em 1em;
    }
</style>

<nav class="custom-navigation">
    <ul>
        <li><a href="#">Custom Link</a></li>
        <li><a href="#">Custom Link</a></li>
        <li><a href="#">Custom Link</a></li>
        <li><a href="#">Custom Link</a></li>
    </ul>
</nav>

<!-- {$page} -->

I tried out your codes and it worked perfectly. But since you said updates would wipe out the file, I will keep-in-view this.

Answer
Answered

FileRun updates don't usually replace files which don't need replacing. Most certainly they do not alter files which do not belong by default to FileRun (except for the rare cases where an entire folder might be replaced by an update).

The "customizables/include.html" file never gets overwritten.


Changing FileRun's code to include a header area is a complex task which requires advanced understanding of JavaScript and experience with FileRun's code.

My suggestion is that you load FileRun through a frame/iframe inside a custom HTML page of yours where you can add anything you want around the FileRun user interface. It's easier and future proof.

Sorry mrlawrencelam, I misunderstood this part in the docs:


As software updates are replacing FileRun's files regardless of the fact that they have been customized..."


http://docs.filerun.com/custom_css#custom_css_code