Community Forums › Forums › Archived Forums › General Discussion › How can I add a bottom section, that stays fixed, just like I see on SP Demos.
- This topic has 15 replies, 5 voices, and was last updated 11 years, 1 month ago by
garymgordon.
-
AuthorPosts
-
December 31, 2013 at 12:36 pm #82353
garymgordon
MemberHow can I add a bottom section, that stays fixed, just like I see on the StudioPress demo pages .. such as on:
http://my.studiopress.com/themes/genesis/#demo-fullI want to be able to create a website, and have a fixed area on the bottom of the entire site, just like this.
Is it possible? What is needed to recreate this effect.
Thanks,
Gary
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 1:51 am #82447nutsandbolts
MemberHi Gary,
Are you talking about the blue bar across the bottom of all the demos? You can recreate that effect pretty easily with a little PHP and CSS - here's an example from a client site I did (though obviously you'd want to alter it to fit your use case).
First, you would need to add a function to call your area after the footer:
add_action('genesis_after_footer', 'buy_now_button_fixed', 10); function buy_now_button_fixed() { <div id="fixed-footer"> Whatever you want to show in the area would go here - I used a widget area but you could use HTML. </div><!-- end #fixed-footer --> <?php } }
Then you'd want to add CSS to style the div:
#fixed-footer { position: fixed; // keeps the area glued in place bottom: 0; // displays at the very bottom of the screen width: 100%; // keeps the bar the width of the screen }
Of course you might want to add other rules for background color, box shadow, etc. depending on how you want it to look.
You'd also need to put a margin-bottom on
.site-footer
the same height as the fixed area to allow room for the area to display.I hope that gives you an idea of what you'd need to do - I definitely wouldn't recommend copying any of the above into your theme unless it makes sense and you know how to change it to fit your needs. As always, any time you alter your child theme's files, make sure you have access to the files via FTP and/or your host's file manager in case something goes wrong.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 1, 2014 at 6:28 am #82462Sridhar Katakam
ParticipantJanuary 1, 2014 at 8:29 am #82477Sabine
MemberIs the provided code for HTML5 as well? I'm a little bit confused about the # in the style.css;-)
January 1, 2014 at 10:31 am #82492Tom88
MemberSabine
The # is the ID selector in CSS,
In the CSS #fixed-footer { }
In the HTML <div id="fixed-footer"> this works in HTML5 & below.Reference: CSS Id and Class Selectors - http://www.w3schools.com/css/css_id_class.asp
January 1, 2014 at 11:25 am #82497garymgordon
MemberThanks all. 🙂 This is perfect.
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 12:12 pm #82504garymgordon
Membernutsandbolts,
I tried placing your php code, and the site then wouldn't display.
Question.
You provided the php of
add_action('genesis_after_footer', 'buy_now_button_fixed', 10);
function buy_now_button_fixed() {
<div id="fixed-footer">
Whatever you want to show in the area would go here - I used a widget area but you could use HTML.
</div><!-- end #fixed-footer -->
<?php
}
}1. I see you havea reopening of the php tag, but in your code, I don't see a closing of the php tag. So, why is it reopening (without a prior closing)? Can you explain why?
2. I also see two closing brackets " } " at the end, but I only see one opening " { " bracket in your php code. Can you explain why there's two closing brackets at the end, but only one interior opening bracket?
Just not sure why the current code breaks my site. Can you confirm the code you provided?
Thanks,
Gary
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 12:14 pm #82506nutsandbolts
MemberThat's why I provided the disclaimer that you shouldn't copy and paste my code - I was providing an example with my client's specifics removed, not something that would work without being altered. I was just trying to show you a very basic example of how it would work.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 1, 2014 at 12:19 pm #82510garymgordon
Membernutsandbolts,
I understand, but can you explain "what parts" (specifically) of the php code you provided will need to be changed, how and why, so I can make the required modifications?
Gary
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 12:20 pm #82511nutsandbolts
MemberWhat are you planning to put on your footer bar? Once I know that, I can try to walk you through what you'll need to make it show up correctly.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 1, 2014 at 12:38 pm #82516garymgordon
Membernutsandbolts,
I got it working. 😉
Just changed it to:
add_action('genesis_after_footer', 'buy_now_button_fixed', 10);
function buy_now_button_fixed() { ?>
<div id="fixed-footer">
Whatever you want to show in the area would go here - I used a widget area but you could use HTML.
</div><?php
}QUESTION: What is the reason for the number 10 being passed into the function?
I see if I remove the " , 10 " from the add_action('genesis_after_footer', 'buy_now_button_fixed', 10);
that everything still works fine. But I was curious why you had this. Is there something that the 10 does or did in your case?
And just a comment, the lines in your CSS similar to " // keeps the area glued in place " (that you displayed to indicate a comment in the CSS, was breaking the CSS) So I removed these and now all is good.
Gary
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 12:41 pm #82518nutsandbolts
MemberThe "10" was used in that particular case to prioritize something else in the footer so the fixed bar would display last.
Sorry about the CSS comments - those aren't present on the site, but I put them in to give you an idea of what each rule would do.
Since it's working, I'm going to mark this topic as resolved, but feel free to open a new one if needed. 🙂
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 1, 2014 at 12:43 pm #82520garymgordon
MemberYes. Thanks! All good.
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 1:03 pm #82527garymgordon
MemberSridhar Katakam
Since you are also familiar with Builder (from iThemes) can you answer this.
Since I am using:
Just changed it to:
add_action(‘genesis_after_footer’, ‘buy_now_button_fixed’, 10);
function buy_now_button_fixed() { ?>
<div id=”fixed-footer”>
Whatever you want to show in the area would go here – I used a widget area but you could use HTML.
</div><?php
}with the Genesis theme, ...
what changes would I need to make to simply target the appropriate function (similar to genesis_after_footer) in Builder.
Is this possible? If so, can you explain what change I'd need to make for use with Builder themes?
Thanks,
Gary
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing ServicesJanuary 1, 2014 at 6:52 pm #82583Sridhar Katakam
ParticipantI think "builder_finish" is the equivalent hook. You might want to post in iThemes Builder support forum for further clarification on this.
January 1, 2014 at 7:05 pm #82585garymgordon
MemberSridhar,
Thanks!!
Gary
Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.