Docs

[TheNomadicDesigner]

Hi There!

I was hoping to get some advice on my footer layout & design. So far I’ve managed to figure things out by digging through the forum, but I can’t seem to find a “how to” example for this:

No.1
________________________________

Okay, my ultimate would be having a full-width Google map as a footer header, with the border styling I’ve put together as an example of what I need to achieve in the screenshot attached. Is this possible? And if so could you please point me in the right direction, or teach me how to?

Site Link: http://thenomadicdesigner.com/

No.2
________________________________

Is it possible to add another level of widget areas underneath the full width map?

No.3
________________________________

What would you suggest is the easiest way to use alternative social icons for the footer buttons? For example; using [x_icon type=”Facebook”] instead of [x_icon type=”facebook-square”] and so on…

_______________________
Heres my code so far for footer customisation:

.x-colophon.top  {background: #383b42 !important;}

.x-colophon.top .x-colophon-content {
    color: #000 !important;
}

.x-colophon.top .widget {
      text-shadow:none;
}
.x-colophon.top {
padding: 0%
}

.widget ul {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.widget ul li {
    border-bottom: 0 !important;
}

.widget ul li a {
    border-bottom: 0 !important;
    box-shadow: none;
    padding: 0.45em 0.75em;
}

.x-colophon.bottom {
padding: 0%;
  background-color: #ddd;
}

.x-colophon.bottom .x-social-global a {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 10px 10px;
  line-height: 25px;
  font-size: 15px;
  text-align: center;
  color: #5f6068;
  border-radius: 5px;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
  box-shadow: rgb(210, 210, 210) 1px 1px,
    rgb(210, 210, 210) 2px 2px,
    rgb(211, 211, 211) 3px 3px,
    rgb(211, 211, 211) 4px 4px,
    rgb(211, 211, 211) 5px 5px,
    rgb(212, 212, 212) 6px 6px,
    rgb(212, 212, 212) 7px 7px,
    rgb(212, 212, 212) 8px 8px,
    rgb(213, 213, 213) 9px 9px,
    rgb(213, 213, 213) 10px 10px,
    rgb(214, 214, 214) 11px 11px,
    rgb(214, 214, 214) 12px 12px,
    rgb(214, 214, 214) 13px 13px,
    rgb(215, 215, 215) 14px 14px,
    rgb(215, 215, 215) 15px 15px,
    rgb(215, 215, 215) 16px 16px,
    rgb(216, 216, 216) 17px 17px,
    rgb(216, 216, 216) 18px 18px,
    rgb(216, 216, 216) 19px 19px,
    rgb(217, 217, 217) 20px 20px,
    rgb(217, 217, 217) 21px 21px,
    rgb(218, 218, 218) 22px 22px,
    rgb(218, 218, 218) 23px 23px,
    rgb(218, 218, 218) 24px 24px,
    rgb(219, 219, 219) 25px 25px,
    rgb(219, 219, 219) 26px 26px,
    rgb(219, 219, 219) 27px 27px,
    rgb(220, 220, 220) 28px 28px,
    rgb(220, 220, 220) 29px 29px,
    rgb(221, 221, 221) 30px 30px;
   text-shadow: rgb(226, 226, 226) 1px 1px,
    rgb(227, 227, 227) 2px 2px,
    rgb(227, 227, 227) 3px 3px,
    rgb(228, 228, 228) 4px 4px,
    rgb(229, 229, 229) 5px 5px,
    rgb(229, 229, 229) 6px 6px,
    rgb(230, 230, 230) 7px 7px,
    rgb(230, 230, 230) 8px 8px,
    rgb(231, 231, 231) 9px 9px,
    rgb(232, 232, 232) 10px 10px,
    rgb(232, 232, 232) 11px 11px,
    rgb(233, 233, 233) 12px 12px,
    rgb(233, 233, 233) 13px 13px,
    rgb(234, 234, 234) 14px 14px,
    rgb(235, 235, 235) 15px 15px,
    rgb(235, 235, 235) 16px 16px,
    rgb(236, 236, 236) 17px 17px,
    rgb(236, 236, 236) 18px 18px,
    rgb(237, 237, 237) 19px 19px,
    rgb(238, 238, 238) 20px 20px;
	
}

Thank you for taking the time to deal with my issues! (x-theme for life)

Regards,
Tian

[Rue Nel]

Hello There,

Thanks for writing in!

1] Do you want something like this, http://prntscr.com/cno98x?
If that is the case, simply edit the page and find the section container of your map. Please make sure that your section doesn’t have any padding at all.

2] The footer widget areas can be up to 4 columns. You can increase the number of columns in the customizer, Appearance > Customize > Footer > Footer Widget Areas.

3] Since the child theme is set up, please add the following code in your child theme’s functions.php file

// No Square Social Output
// =============================================================================
function x_social_global() {

  $facebook    = x_get_option( 'x_social_facebook' );
  $twitter     = x_get_option( 'x_social_twitter' );
  $google_plus = x_get_option( 'x_social_googleplus' );
  $linkedin    = x_get_option( 'x_social_linkedin' );
  $xing        = x_get_option( 'x_social_xing' );
  $foursquare  = x_get_option( 'x_social_foursquare' );
  $youtube     = x_get_option( 'x_social_youtube' );
  $vimeo       = x_get_option( 'x_social_vimeo' );
  $instagram   = x_get_option( 'x_social_instagram' );
  $pinterest   = x_get_option( 'x_social_pinterest' );
  $dribbble    = x_get_option( 'x_social_dribbble' );
  $flickr      = x_get_option( 'x_social_flickr' );
  $github      = x_get_option( 'x_social_github' );
  $behance     = x_get_option( 'x_social_behance' );
  $tumblr      = x_get_option( 'x_social_tumblr' );
  $whatsapp    = x_get_option( 'x_social_whatsapp' );
  $soundcloud  = x_get_option( 'x_social_soundcloud' );
  $rss         = x_get_option( 'x_social_rss' );

  $output = '<div class="x-social-global">';

    if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-official" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
    if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss" data-x-icon="" aria-hidden="true"></i></a>'; endif;

  $output .= '</div>';

  echo $output;

}
// =============================================================================

Please copy the raw code here (http://pastebin.com/gxbw2fQY) to preserve the unicode html entities or data-x-icon values.

Please let us know if this works out for you.

[Author]

Posts