How to make the footer similar to Youtube-app footer?


#1

Have a look at the footer in Youtube-App

How to create such a footer?
When we click on an icon in the footer, the icon+text should change its color to red.
I’ve seen a very similar footer at Zegist.com (but its no more there, they recently changed it)


Discourse Tab Bar for Mobile
#2

that could be super cool.


#3

Why not just add it in the mobile theme?


#4

@MakaryGo
Yes it need to be added in the mobile theme.

I’m looking for some help with the code - from experts who are good with CSS.


#5

Well, that clarifies the scope of your question a bit :wink: Do you have any idea what would you like to have in this bottom menu?


#6

My plan is to add these links there in the footer (mobile footer)
https://site.com/my/summary
https://site.com/my/messages
https://site.com/my/activity/bookmarks
https://site.com/my/preferences/account


#7

Great! Now we only have to find matching icons for this. I’d suggest fontawesome.io, as it is already used on :discourse: interface.


#8

@MakaryGo
Finding icons is easy.

Adding the buttons and making it look exactly like the Youtube-app footer is something which I need help with.
When we click on an icon it should change the color of the icon+text to red.


#9

I’d be happy to explain it to you step by step, and later we can publish it on some Github as a theme component, what do you think? :slightly_smiling_face:


#10

@MakaryGo

Yes I’m ready. And lets publish it on Github and make it public for everyone to use if we succeed in doing this.

This is what I have so far.
It is adding the icons. But it doesn’t look like the Youtube-app footer.

<div id="mobile_custom_footer">
    <ul>
        <li><a href="http://site.com/"><i class="fa fa-users" aria-hidden="true"></i><br /></a></li>
        <li><a href="http://site.com/"><i class="fa fa-cog" aria-hidden="true"></i><br /></a></li>
        <li><a href="http://site.com/"><i class="fa fa-cog" aria-hidden="true"></i><br /></a></li>
        <li><a href="http://site.com/"><i class="fa fa-cog" aria-hidden="true"></i><br /></a></li>
    </ul>
</div>

#11

Pretty clever putting it into a list, I was about to suggest the same. But, of course, you could’ve use <nav> or even <footer> as well :slight_smile:
Now, let’s summarize what we actually want to achieve!

  • icons should be arranged horizontally
  • they should be evenly distributed
  • obviously, they should be a bit bigger
  • they should get red on :hover and :active (perhaps some smooth animation, hmm?)

What I don’t know yet is:

  • do you want them to be on the site footer when you scroll to the very bottom, or you’d like them glued to the screen bottom, regardless of scrolling (fixed) ?
  • do you wish to add them some solid background, or we’ll leave it transparent?

Edited:
Oh, and by the way, I totally forgot.
We obviously insert the above HTML into footer section on mobile only, in other words on http://your.discourse/admin/customize/themes/3/mobile/footer/edit


#12
  1. Yes, they need to be fixed at the bottom all the time
  2. How about black background (that’s what zegist.com had in there previously, and it was looking great)

EDIT:
Yes that is correct, we should be inserting it in the mobile footer section.


#13

You know, I’m afraid that it depends on colors of your current theme. You know, if you use default dark discourse theme, black would be awesome. But if by any chance you have some other colors dominating the theme, i. e. theme is really light & bright, it wouldn’t look good in most cases. And as we agreed to share our little endeavour with the world, we should act professional and make sure it is usable out of the box for most use cases.

Fortunately! Discourse uses SCSS variables for its color schemes (which you can create and edit at admin/customize/colors), and from description provided there we learn, that for backgrounds and accents it uses var called $tertiary - so we can just use this! Pretty neat, huh?

But wait a minute, before we start our styling magicks, we have to tidy up our html to resemble actual menu. You know, href the links, set the icon classes, and so on :wink: We can also add some attributes. General class on <li> or <a> elements would be pointless, as we are able to pinpoint this elements well enough using i. e.

#mobile_custom_footer li{}
#mobile_custom_footer li a{}

But what could use, in my opinion, would be some custom id's, so that if needed we could select each and every one of items. How do you feel, dear @nixie, about naming them by function? I. e. foot_summary and so on? Show us the HTML, and I’ll start cooking some awesome animation for you :wink:


#14

@MakaryGo
Yes, I agree with you there, lets make it transparent (and not use any solid background color) - so that anyone can use as it is without much modifications.

How can we get started?

These are the 4 links I’d like to place there
https://site.com/my/summary
https://site.com/my/messages
https://site.com/my/activity/bookmarks
https://site.com/my/preferences/account

And if there is space for a 5th icon, then lets allocate it for HOME.

And lets use Font-Awesome icons, there is one already for each of these (Profile, Inbox, Bookmarks, Settings, Home)


#15

Well, actually if we use variable, it won’t be transparent, it will just have the same color as page background! I imagine that having a transparent pane levitating over text with some solid icons partially covering it up would be a disaster! :disappointed_relieved: See for yourself:
6593b0c6-45fa-4cad-be3c-1355583cf6f2

So, do you have this HTML list markup? You know, I won’t be able to do everything by myself :wink:


#16

In the meantime, as you’re cooking the markup, I’d like to share with you one extremely useful gizmo for playing with styling - it’s called inspect element. I’m using Vivaldi personally, but this function is build into every modern browser. Basically right-click on anything that you want to tweak, and select from menu ‘Inspect’ (or Inspector, or Inspect Element. You get the idea) et voila! You’re ready to change the world some styles. And the best part is - you see the edits you make on real time, instantly. Unfortunately they don’t stay with you for long, and will disappear on site reload; but in Single Page Application (like :discourse: itself) you can often walk through screens without page reload. Really, really clever, if you’d ask me.
You know, every now and then when I get some new CSS-ish idea, I’m so absorbed by tweaking styles in Inspector, that I forget to actually do some work :wink:


#17

@MakaryGo
I have the code to make the icons stay the bottom (without letting anything else come on top of it)
I will share the code in some time.


#18

Wasn’t that hard, right? Now we only have to do some color-magic :wink:


(Bhanu Sharma) #19
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

Making lives slightly more easy


#20

@MakaryGo

Code is ready. :balloon::balloon::balloon:

Screenshot of the footer (mobile)

This code needs to be pasted in CSS (mobile)

image

/* Just for Custom Footer Start */
#mobile_custom_footer {
    width: 100%;
    padding: 4px 0px 0px;
    background-color: #000;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    font-size: 12px !important;
    border-top: 1px solid #ccc;
}
#mobile_custom_footer ul {
        text-align: center;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#mobile_custom_footer ul li {
    text-align: center;
    list-style: none;
    margin: 0px;
    padding: 4px 5% 6px;    display: inline-block;
}
#mobile_custom_footer .fa-6 {
    font-size: 30px;
    color: #808080;
}
#mobile_custom_footer .fa-6:active { color:red; }
#main {
    position: relative;
    margin-bottom: 30px;
}
/* Just for Custom Footer END */

This code needs to be pasted under “</body”

<div id="mobile_custom_footer">
    <ul>
        <li><a href="http://site.com"><i class="fa fa-home fa-6" aria-hidden="true"></i></a></li>
        <li><a href="http://site.com/my/summary"><i class="fa fa-cog fa-6" aria-hidden="true"></i></a></li>
        <li><a href="http://site.com/my/messages"><i class="fa fa-inbox fa-6" aria-hidden="true"></i></a></li>
        <li><a href="http://site.com/my/activity/bookmarks"><i class="fa fa-bookmark fa-6" aria-hidden="true"></i></a></li>
        <li><a href="http://site.com/my/preferences/account"><i class="fa fa-user fa-6" aria-hidden="true"></i></a></li>
    </ul>
</div>

Post Formatting Options