![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/17326f71f1287ae0389afad0004bd4bd-87a1c39.jpg)
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
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/17326f71f1287ae0389afad0004bd4bd-87a1c39.jpg)
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?
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/17326f71f1287ae0389afad0004bd4bd-87a1c39.jpg)
Done! the .uk-block was not needed.
/** footer example **/
.tm-footer-quote {
background-color: #f2f7ff;
border-top: 1px solid #3c86b2;
padding: 20px;
}