Ethos - 3 column footer

JB2012 · January 22, 2019, 2:32pm

Hi Guys,
Hope you can help me out?

url: https://jbfoto.co.uk (site is currently in maintenance mode, so I will provide credentials if you need to log in to look)

I have created a new child theme, and have created a new wp-footer.php file and placed it here (/jbfoto/wp-content/themes/x-child/framework/legacy/cranium/footers/views/ethos)… copy enclosed.

<?php // ============================================================================= // VIEWS/ETHOS/WP-FOOTER.PHP // ----------------------------------------------------------------------------- // Footer output for Ethos. // ============================================================================= ?> <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?> <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

<footer class="x-colophon bottom" role="contentinfo">
  <div class="x-container max width footer-distributed">

    <div class="x-column x-sm x-1-3 footer-left">
      
      <p>https://www.jbfoto.co.uk/wp-content/uploads/2018/10/JBfoto-Logo-2.png</p>

      <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
        <?php x_get_view( 'global', '_nav', 'footer' ); ?>
      <?php endif; ?>

      <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
        <div class="x-colophon-content">
          <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
        </div>
      <?php endif; ?>
    </div>

    <div class="x-column x-sm x-1-3 footer-center">
      <p>Add your contacts here</p>
    </div>

    <div class="x-column x-sm x-1-3 footer-right">

      <p>Add about company info here</p>

      <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
        <?php x_social_global(); ?>
      <?php endif; ?>
    </div>

  </div>
</footer>

<?php endif; ?> <?php x_get_view( 'global', '_footer' ); ?>

I have added the following css to the theme but I am not getting the required results.

}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
width: 40%;
}

/* The company logo */

.footer-distributed h3{
color: #ffffff;
font: normal 36px ‘Cookie’, cursive;
margin: 0;
}

.footer-distributed h3 span{
color: #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}

.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}

.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
width: 35%;
}

.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}

.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}

.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}

.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}

/* Footer Right */

.footer-distributed .footer-right{
width: 20%;
}

.footer-distributed .footer-company-about{
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}

.footer-distributed .footer-company-about span{
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}

.footer-distributed .footer-icons{
margin-top: 25px;
}

.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;

This is where I got the original css code.

https://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed-with-address-and-phones.html

Thanks guys, really hope you can help.

jade · January 22, 2019, 5:26pm

Hello Jason,

Would you mind providing the admin details of your site in a Secure Note so that we can check why the CSS on your site is not working?

Thank you.

JB2012 · January 25, 2019, 10:35pm

Hi Guys,
Secure note attached with info.

ruenel · January 25, 2019, 11:39pm

Hello Jason,

There is no secure note in one of your replies. You must have forgotten it.

Please have your code updated and use this:

<?php

// =============================================================================
// VIEWS/ETHOS/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Ethos.
// =============================================================================

?>

  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container">

        <div class="x-column x-sm x-1-3">
          
          <p>https://www.jbfoto.co.uk/wp-content/uploads/2018/10/JBfoto-Logo-2.png</p>

          <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
            <?php x_get_view( 'global', '_nav', 'footer' ); ?>
          <?php endif; ?>

          <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
            <div class="x-colophon-content">
              <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
            </div>
          <?php endif; ?>
        </div>

        <div class="x-column x-sm x-1-3">
          <p>Add your contacts here</p>
        </div>

        <div class="x-column x-sm x-1-3">

          <p>Add about company info here</p>

          <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
            <?php x_social_global(); ?>
          <?php endif; ?>
        </div>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

Please let us know how it goes.

JB2012 · January 29, 2019, 12:52pm

I’ve used the wp-footer and have included the credentials for you to log in.

Thanks.

thai · January 29, 2019, 1:08pm

Hi There,

Would you mind providing us with the login URL as welll?

I’ve tried with the following links but no luck:

https://jbfoto.co.uk/login
https://jbfoto.co.uk/wp-login.php
https://jbfoto.co.uk/wp-admin

Thank you.

JB2012 · January 29, 2019, 1:40pm

add the following /eos1ds

thai · January 29, 2019, 4:41pm

Hi There,

I was still unable to login to your WordPress dashboard.

Can you also temporarily turn it off?

Thank you.

JB2012 · January 29, 2019, 4:51pm

when you get to this screen just click send me a push, It will send the push to me and I will ok it.

friech · January 30, 2019, 1:27am

Hi Jason,

I am having trouble accessing your site at the moment, it is loading endlessly. Anyways, there is no need for a custom template to have a 3 column footer. Please remove your custom template (wp-footer.php) and navigate to X > Theme Options > Footer and set the Footer Widget Areas to 3.

Then navigate to Appearance > Widgets and you’ll see Footer 1, Footer 2, Footer 3 area in there, that is your footer columns. Add a Custom HTML widget on those areas and do your HTML coding in there.

An alternative approach is to create a Global Block that serve as your footer. This way you have a pseudo footer that is editable in Cornerstone (Global Block).

Footer Global Block

Cheers!

system · February 9, 2019, 1:27am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.