Hi again!
I'd like to replicate some pieces of the getbeans home. The divs: tm-hero, tm-accreditations, tm-pre-footer
How do you make these? I don't know how to position them (for instance: the div tm-pre-footer is positioned exactly above the footer) nor to make the background full width (edit: already know that). Can you explain to me, please?
Thanks in advance. Sami
Hey Sami,
It is important to understand that you can easily add anything pretty much anywhere on the page using Beans HTML hooks. I would strongly suggest to learn how Beans HTML hooks work as once you do, sky is the limit. Here is quite a detailed answer about it which should help you understand it.
So for example, here is Beans footer note:
add_action( 'beans_footer_before_markup', 'example_beans_site_footer_quote' );
function example_beans_site_footer_quote() {
?>
<div class="tm-footer-quote uk-block">
<div class="uk-container uk-container-center">
<p class="uk-text-center uk-margin-bottom-remove">“If you haven't found the magic in Beans, you haven't looked far enough!”</p>
</div>
</div>
<?php
}Note that the id you look at your footer in dev mode, you will see beans_footer markup id. So as explained in the link posted above, if you want to add something before, you can use the action called beans_footer_before_markup. So to add a section after the header, the hook you would use would be beans_header_after_markup.
Hope that makes sense,
Thierry,
I understood the hooks. Now I have three extra widget areas in my test site, http://www.tupodes.pt/ter-um-site/ I picked up your example widget. I want to style it, roughly the some way you did in your site. So, by analogy, I did this in child theme's CSS, without success so far:
/** footer example **/
.tm-footer-quote .uk-block {
background-color: #f2f7ff;
border-top: 1px solid #3c86b2;
padding: 20px;
}What am I missing here?
Done! the .uk-block was not needed.
/** footer example **/
.tm-footer-quote {
background-color: #f2f7ff;
border-top: 1px solid #3c86b2;
padding: 20px;
}