fix footer error

Justoverclock

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]

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

SychO

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]

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.

SychO

[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]

SychO exactly.

pupsik

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;

[deleted]

pupsik great to see this being used as a solution

Justoverclock

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?

[deleted]

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

pupsik

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;

[deleted]

pupsik 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.

pupsik

Try this:

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

Justoverclock

[deleted] so i need to put css into html as <style>?

pupsik

[deleted] That's for @Justoverclock who had a problem.

If I understood his issue correctly.

[deleted]

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

pupsik

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

ctml

I believe what you're looking for can be done with CSS.

https://discuss.flarum.org/d/26130-css-problem-with-discussionpage-nav

I am already using this to fix the scrubber overflowing my custom footer, the height of the footer does not matter.

Justoverclock

ctml https://discuss.flarum.org/d/26130-css-problem-with-discussionpage-nav

I am already using this to fix the scrubber overflowing my custom footer, the height of the footer does not matter.

I try this solutions, but I think this need to be fixed, a lot of user that want Flarum are not coder 😅

JohnP

ctml I believe what you're looking for can be done with CSS.

https://discuss.flarum.org/d/26130-css-problem-with-discussionpage-nav

This is the solution I'm using and it works really well for us. Examples in action: talk.ekodiena.com

ctml

Justoverclock I agree, but does the css fix your issue?

Justoverclock

ctml i need to try tomorrow