3 Replies Latest reply on Mar 30, 2016 10:40 AM by Jordan Dayton

    Responsive footer in Jive-x cloud - using HTML & CSS

    Jordan Dayton

      Hello community friends! Let me start by stating that I'm can tinker with HTML and CSS but am far from an expert!

       

      We are building our second Jive-x cloud community and are taking every measure possible to ensure mobile friendliness ;-) One big step we're taking is using PAGES in all places instead of OVERVIEW PAGES.

       

      So while our Pages respond wonderfully, our footer does not. I wanted to see if anyone can offer advice on creating a responsive custom footer. Has anyone done this with Jive-x cloud? Kim Nelson had a similar question over here Help creating a responsive footer  but didn't get any responses.

       

      We'd like to have our footer with 4 blocks where we can put buttons/images + links as a call to action. Here's a simple wireframe of what we'd like:

       

      Bridge Wire - Help Resources 3.pdf 2016-03-04 14-17-38.png

      I love what  Homeaway  has done in their footer but their footer is not responsive. (props to Laura Kelso Kristen Keys et al)

       

      I was recently looking at this Northwestern Mutual  site and I really love the way their boxes respond when you have smaller screens. Try it out! Grab the right side of your screen and shrink it! I love that!  Is this possible using only CSS and HTML or is Javascript needed?

       

      Anyone in the community willing to collaborate and help develop a snippet that could be used as a responsive footer? Remember that the constraints of a Jive-x cloud customer is that the header/footer can only leverage HTML and CSS (no javascript).

       

      I'm looking forward to any community direction on this!

       

      Cheers!

        • Re: Responsive footer in Jive-x cloud - using HTML & CSS
          Jordan Dayton

          I was hoping to get some insight from someone much more well versed in html/css, but in the meantime I figured out something that is sufficient so I thought I'd share. Just a reminder: We are on Jive-x Cloud.

           

          First I'll share a visual overview of what the footer looks like and how it functions. Then I'll share how to apply a custom responsive(ish) footer. then I'll attach the CSS and HTML files.

           

          I'd LOVE for any advice to clean it up or simplify it! Again, I'm no CSS ninja! As I inquired about this with some of my colleagues, some mentioned that flex-boxes might be a good route to go. I didn't have time to learn more about them or how they might work for my scenario.

           

          Here's what the footer looks like on a full-screen. I've designed all three icons to fade slightly when you hover over it with a mouse (to indicate that the icon is clickable). The text is also clickable.Welcome  Bridge Community 2016-03-30 10-03-08.png
          As you minimize the screen width, the item on the far-right wraps down to the next row. I'd love to have this centered between the other two boxes. Any advice?Welcome  Bridge Community 2016-03-30 09-59-56.png

          As you continue to minimize the screen width to see how this will appear on a mobile device, the second box wraps below the first and all three boxes are now in order. Yay!

           

          Notice that the boxes are not perfectly centered. I'd love for any advice to help clean up the code and fix this/other issues that you find!

          Welcome  Bridge Community 2016-03-30 10-00-07.png

           

          So I'm attaching the CSS and the HTML which can be added by following these steps:

           

          1. Visit the Themes editor in Jive.
          2. Click Advanced > Custom > Edit Now
          3. Click Custom Footer
          4. Paste the CSS and HTML in the respective boxes.
          5. You'll want to replace my icons by adding your own images (We use Icons8 and love it. Totally worth buying a license!)
          6. Click Apply and be sure to save/publish the theme if all looks good!

           

          In the html file I've created a simple thread "DOUBLE_CLICK_AND_ENTER_URL_HERE" that will allow anyone who uses this to easily replace the link destinations.

           

          NOTE: This jive community did not allow me to add an html file so I renamed the html file with an extension of ".txt" but it is actually html. All you will do is copy and paste it into the HTML box in Jive.