Footer Code

Hi Guys,

I’m trying to get my footer to look like this…

and i’ve been using the enclosed CSS to try and acheive it. However, nothing works?
What am I doing wrong?

.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;

padding: 55px 50px;
margin-top: 80px;

}

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

font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;

margin-right: 3px;
margin-bottom: 5px;

}

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

Hi,

Sorry for the late response. My url is www.rjgc.co.uk
I just had to delete and reinstall the whole site so I’m starting from scratch.
So if I get the footer done now it won’t change anything else…

Thanks @paul.r

Regards
Jason

Hey Jason,

Thanks for providing the url of your site. I have inspected it and you are using Ethos stack. Your css code will not work because it will only be applied to elements that bears the class names which at the moment does not exist on the page. It may work if you will modify the footer first to have the structure that you wanted.

Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?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>add your logo here</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' ); ?>

3] Save the file named as wp-footer.php
4] Upload this file to your server in the child theme’s folder wp-contents/themes/x-child/framework/legacy/cranium/footers/views/ethos/. You will have to create the folder names because this path does not exist yet in the child theme.

Now, these steps will only provide you a three columns for your footer with the structure ready for your css. It is not finish yet and only serve as a guide or starting point for your modifications. You will have to add the logo, contact information and the about company info. If only you have sent out the url of the example footer, I might be able to furnish the whole structure.

Hope this helps. Please let us know how it goes.

1 Like

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