i guys, i have some problem with a custom footer, and i need help with this from you expert

here the codepen i've created:

here the issue, this pen appear totally aligned different in flarum (exept for the color, i'm working on it so can be different in color), and i have issue with the right bar of flarum


i try everything, with the help of phenomlab...but i'm bad

  • [deleted] replied to this.

  • Justoverclock Just this:

                @media (min-width: 700px) {
            .DiscussionPage-nav, .DiscussionPage-nav>ul {
                position: sticky;
                top: 80px;
            }
            .App {overflow-x: visible;}
            }
           
           .Post::before, .Post::after {content:none;}

      • [deleted]

      • Post #2

      Justoverclock as I mentioned on metabullet and discord, the issue here is that the footer height is bleeding into the scrubber bar. The only ways to prevent this would be to make the footer smaller in terms of height, or to create an extension to handle this. However, an extension seems somewhat overkill in my view

          I don't think there's anything you can do about it, that's the downside of fixing the scrubber to the window, I'm hoping to replace the fixed positioning with sticky instead, but it'll be a little challenging to do.

          [deleted] The only ways to prevent this would be to make the footer smaller in terms of height

          That wouldn't work either, it might look fine on his screen, but not necessarily on smaller screens, like mine, I can tell it wouldn't fit at all.

              • [deleted]

              • Post #4

              SychO I have a footer running on my forum which is much smaller than this one and it works fine. As a proof of concept, I worked on this yesterday. It's perfectly feasible to replace the footer with a much smaller one designed to use the mobile viewport CSS classes.

                  [deleted] well yes if you go for a different footer design than the one shown above, a design that uses less than 50px of height, then it should work even on smaller screens, because that's the scrubber's limit.

                      • [deleted]

                      • Post #6

                      SychO exactly.

                        Because, I just don't have time and I haven't seen any Normal, simple footers for flarum, as to plug and play type of thing without extension.

                        Grabbed it from Mr. @[deleted] and modified it a little to work with day and night mode.

                        <div id="footer">
<div id="floatleft">
© 2020-<script>document.write(new Date().getFullYear())</script> Flarum.com
</div>
</a><div id="floatright">
       <a  href="terms-of-service">Terms</a>
       <a href="privacy-policy">Policies</a>
</div>
</div>

                        Css:

                        #footer {
background: @body-bg;
color: @text-color;
position: fixed;
bottom: 0;
line-height: 2.4;
height: 30px;
width: 100%;
box-shadow: 0 1px 10px 0 rgba(151,158,181,0.28) !important;
}

#floatleft {
    float: left;
    padding-left: 10px;
}
#floatright { 
float: right;
padding-right: 10px;
}

                        You can also use style from welcome message, which will look nice in day and night mode

                        #footer {
background: @hero-bg;
  color: @hero-color;

                          anyway, its strange that we have "custom footer" in admin dashboard, but we can't put simple css and html. i think this should be classified as issue

                          or not?

                            Just gotta figure out a way for footer to be on top of DiscussionPage-nav and not behind it.

                            What if you use a picture as a background? I will monkey with it, and see what I can come up with.

                            Have you tried adding z-index : 1;

                              Try this:

                              .contact-area {
    border-bottom: 1px solid #353C46;
    position: relative;
    z-index : 1;
}

                              • [deleted]

                              • Post #11

                              Anonymous43 Just gotta figure out a way for footer to be on top of DiscussionPage-nav and not behind it.

                              You can use CSS position for that (fixed) or use z-index as you indicated.

                                • [deleted]

                                • Post #12

                                Justoverclock the custom footer will take CSS if you insert it between style tags. Same applies to html which should work without issue as it does on metabullet

                                    • [deleted]

                                    • Post #16

                                    Justoverclock yes, but you could also include it in your custom CSS and that will also work.

                                      Custom html goes to custom html
                                      custom css goes to custom css (without <style>)