Docs

[powrider686]

Hello,
On my site bloom-media.hk, I’d like to change the color of the background to rgb(186, 40, 46) and the font color to white. I’d also like to add some spacing between the menu items, so that they take up the entire screen and add the site’s main logo to the left hand side of the footer area, next to the menu.

I’d like to make the footer content area background rgb(186, 40, 46), and the font white down there as well.

How might I achieve that? Thank you for the help!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

footer.x-colophon.bottom {
    background-color: rgb(186, 40, 46);
}
.x-colophon.bottom .x-nav li a, .x-colophon-content p, .x-colophon.bottom .x-colophon-content a{
    color: #fff;
}

Please copy wp-footer.php from framework/views/icon and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ICON/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Icon.
// =============================================================================

?>

  <?php x_get_view( 'global', '_header', 'widget-areas' ); ?>
  <?php x_get_view( 'global', '_footer', 'scroll-top' ); ?>
  <?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">

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

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>
        <div class="x-section man pan">
              <div class="x-column x-1-2 x-sm">
      <a href="http://bloom-media.hk/" class="x-brand img" title="The Authoritative Publishing Source">
  <img src="//bloom-media.hk/wp-content/uploads/2017/03/Bloom-on-white-524x136.png" alt="The Authoritative Publishing Source"></a>
      </div>
      <div class="x-column x-1-2 x-sm">

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

        
      </div>
      </div>
    </footer>

  <?php endif; ?>

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

Hope that helps.

[powrider686]

Ok, that was a good first step. I need a bit of help refining it though.

I switched the position of the copyright to below the menu. I also changed the logo and menu to 1/3 + 2/3, but I can’t get it to work with 1/4 + 3/4. Can you help me get that changed? Also if it would be possible to center the logo in the 1/4 column that would be sweet.

Now I’d like to have the bottom when the copyright is be rgb(186, 40, 46), and the text white. I’m not quite sure what I am missing in the css, but I can’t get it to change the colors. I must be overlooking one of the previous colors but can’t nail it down.

Here’s what I have in the customerizer:

.x-colophon.bottom .x-nav li a {
color: #000000;
margin: 0 1.5em;
}

.x-colophon.bottom .x-nav li a:hover {
color: #ba282e;
}

.x-colophon.bottom {
color: #ba282e;
padding: 10px 0px;
}

.x-colophon.bottom a {
color: #000000;
}

.x-colophon.bottom .x-colophon-content a:hover {
color: #ba282e;
}
.x-colophon.bottom .x-social-global a {
color: #ba282e;
}
h1, .h1 { font-family: HelveticaNeue-CondensedBlack; }
h2, .h2 { font-family: HelveticaNeue-CondensedBlack; }
h3, .h3 { font-family: “Open Sans Condensed”; }
h4, .h4 { font-family: “Open Sans Condensed”; }
h5, .h5 { font-family: HelveticaNeue-CondensedBlack; }
h6, .h6 { font-family: “Open Sans”; }

.x-navbar {
background-color: rgb(186, 40, 46); border: none;
}
.x-navbar .sub-menu {
background-color: rgb(186, 40, 46); /* background color */
}
.x-navbar .sub-menu a {
color: #ffffff; /* text color */
}
@font-face {
font-family: ‘HelveticaNeue-CondensedBlack’;
src: url(‘http://bloom-media.hk/fonts/webfont.ttf’) format(‘truetype’),
font-weight: normal;
font-style: normal;
}
.paragraph
{font-family: “Open Sans Condensed”; font-weight: 200;}
.services
{font-family: Open Sans; font-weight: 600;}
.x-btn-navbar.collapsed {
color: #ffffff;
}
.x-btn-navbar.collapsed:hover {
color: #ffffff;
}
.x-btn-navbar {
color: #ffffff;
}
.x-btn-navbar:hover {
color: #ffffff;
}
.x-colophon.bottom .x-nav li a {
color: rgb(186, 40, 46);
}
.x-colophon-content {
color: #ffffff
background-color: rgb(186, 40, 46);
}

Thank you!

[powrider686]

One more question, the two columns with the logo and menu aren’t the same height. How could I get the menu to center vertically so that is vertically centered with the logo?

Thank you!!

[Rue Nel]

Hello There,

Thanks for updating in!

1] To change the width of the columns, you’ll have to use like this:

<div class="x-column x-1-4 x-sm">
      // some contents here
</div>

<div class="x-column x-3-4 x-sm">
      // some contents here
</div>

2] To center the logo at the footer, you can make use of this code:

.x-colophon.bottom .x-brand {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

3] To change the background color and text color of the copyright, please update your code and make use of this code:

.x-colophon.bottom .x-colophon-content {
  color: #ffffff;
  background-color: rgb(186, 40, 46);
  margin: 10px auto 0;
  padding: 10px 0 2px;
}

4] To vertically align both the logo and menu at your footer, you can make use of this code:

.x-colophon.bottom .x-brand {
     margin-top: 0;
}

.x-colophon.bottom .x-nav {
    margin-top: 15px;
}

We would loved to know if this has work for you. Thank you.

[powrider686]

Ok great. That all worked. Thank you!

One more question: I’ve changed the contact form button color on the homepage using this css – https://community.theme.co/forums/topic/change-colour-of-submit-button-in-contact-form-7/, but I’d like to target the form on this page – http://bloom-media.hk/contact-us/ so the button is red on hover. How could I achieve that?

I’ve tried this css:
input.wpcf7-form-control.wpcf7-submit:hover {
border-color: white;
color: white;
}
input.wpcf7-f349-o1.wpcf7-submit:hover {
border-color: #ba282e;
color: #ba282e;
}
But I can’t seem to get it to work for the Contact Form 2 – Contact Us

Thanks for the help!

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.page-id-30  input.wpcf7-form-control.wpcf7-submit:hover {
color: red;
border-color: red;
}

Hope it helps

Joao

[Author]

Posts