Child theme: Altitude Pro
Before:
After:
Here’s how:
Step 1
Edit Altitude Pro’s functions.php.
a) Change
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add support for 1-column footer widget area | |
| add_theme_support( 'genesis-footer-widgets', 1 ); |
to
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add support for 2-column footer widget areas | |
| add_theme_support( 'genesis-footer-widgets', 2 ); |
b) Change
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add support for structural wraps | |
| add_theme_support( 'genesis-structural-wraps', array( | |
| 'header', | |
| 'nav', | |
| 'subnav', | |
| 'footer-widgets', | |
| 'footer', | |
| ) ); |
to
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add support for structural wraps | |
| add_theme_support( 'genesis-structural-wraps', array( | |
| 'header', | |
| 'nav', | |
| 'subnav', | |
| // 'footer-widgets', | |
| 'footer', | |
| ) ); |
Step 2
Edit Altitude Pro’s style.css.
Replace the Footer Widgets section (line 1688 to line 1726 in the unmodified Altitude Pro’s stylesheet) with the following:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Footer Widgets | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .footer-widgets { | |
| /*background-color: #22a1c4;*/ | |
| clear: both; | |
| text-align: center; | |
| position: relative; | |
| z-index: 9; | |
| } | |
| /*.footer-widgets .wrap { | |
| padding-bottom: 100px; | |
| padding-top: 100px; | |
| }*/ | |
| .footer-widgets, | |
| .footer-widgets .wrap a, | |
| .footer-widgets .wrap a.button { | |
| color: #fff; | |
| } | |
| .footer-widgets a:hover { | |
| color: #000; | |
| } | |
| .footer-widgets li { | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .footer-widgets .widget { | |
| /*margin-bottom: 40px;*/ | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding-top: 100px; | |
| } | |
| .footer-widgets .widget:last-child { | |
| padding-bottom: 100px; | |
| } | |
| .footer-widgets p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .footer-widgets-1 { | |
| background-color: #22a1c4; | |
| } | |
| .footer-widgets-1 a { | |
| color: #fff; | |
| } | |
| .footer-widgets-2 { | |
| background-color: #23282d; | |
| } |
Step 3
At Appearance > Widgets populate Footer 2 widget area with your desired widget(s).
That is slicker than Owl Poo, got this one bookmarked for future reference. Thanks Sridhar
Quick work, Sridhar! I saw Adam and yourself having the conversation on Facebook about the footer in (what you found out was) Altitude Pro.
Maybe an hour later, a perfect tutorial comes out. I’m going to use this in 3 sites I have running on Altitude Pro.
Hi
This is great thanks – one small issue – using this CSS with the CSS for the altitude pro ACF Mulitple Hero Page Template causes both footers to now not be full width on page –
Using this Alititude ProCSS + the new Footer CSS causes both footers to no longer be full width – it only affects the page tempalte for ACF Pro
https://sridharkatakam.com/using-acf-pro-for-multiple-drag-n-drop-hero-text-image-and-image-text-sections-in-genesis/
The Single footer works fine with the ACF Pro CSS – only an issue when adding 2nd Footer
Working on a local dev site so no link
Not really sure of the issue but looking in Firebug – removing the site inner 1200px seems to make the footer work but then knocks the rest of the site out
.site-inner, .wrap {
float: none;
margin: 0px auto;
max-width: 1200px;
Would it be possible to get the CSS if adding a new footer and using ACF Pro Page CSS in Altitude Pro many thanks
Hi,
How do I put the footers into columns?
1) Do Step 1a above
2) In style.css add http://pastie.org/pastes/10649326/text
This was interesting. What if you just want to replace footer 1 with footer 2 on an inner page? That is a page that is not widgetized like the front page?