[Resolved] Full width SIDEBAR above content area

[Alan]

Hi All, Apologies in advance if there is a solution buried somewhere in the forums but I just cannot find it.

I am looking to create a “sidebar” area above the content area and it is to be full width.

In this sidebar I want to place a simple image but it is an image common to all pages. instead of adding the image to each page as i go i would like the image to be in this sidebar stretching across the width of the page.

Here is a link to a page with the map of the world manually inserted into content area. this map is to be in the sidebar. http://bitlabs.biz/

thanks in advance.

[Leo]

Hi Alan,

If I understand this correctly, you can try using the after header hook:
https://docs.generatepress.com/article/hooks-overview/
http://demo.generatepress.com/hook-locations/

Let me know 🙂

[Alan]

Hi Leo,

thanks for the reply, and I am trying this for the last
2 hours but I am really chasing my tail and it seems I
am digging a hole and its getting deeper.

I have the hooks plugin installed from GP-premium but
now I find myself trying to decypher how to use Hooks
and find a bit of code to insert the image.

Thanks again

[Alan]

so i have added this code >>

add_action( ‘your_hook_name’,’example_function_name’ );
function example_function_name() { ?>
Insert your hook contents in here.
<?php }

and this is what I have edited it to >>

add_action( ‘before_content_space’,’insert_into_before_content_space’ );
function insert_into_before_content_space() { ?>
Insert your hook contents in here.
<?php }

but everything after the header dissapears!

should there be something in the brackets after “insert_into_before_content_space”

so if I want to add the image into the “space before the content”
I am guessing I use this >>

add_action( ‘before_content_space’,’insert_into_before_content_space’ );
function insert_into_before_content_space() { ?>
$image_url=’http://bitlabs.biz/wp-content/uploads/2017/11/bitlabs_world_crop.jpg&#8217;;

<?php }

🙁

[Leo]

Shouldn’t use the code. The hook is included in the dashboard.

So head to Appearance > GP Hooks > After Header, then just add in the image like this:
<img src="http://URL-HERE">

[Alan]

perfect Leo, thanks that has worked a treat.

I now need to insert a text overlay on this image so
whatever slider i use a shortcode can be inserted under
the img src code?

[Leo]

Nope shortcode can go directly into hooks. No image tag needed.

[Alan]

ok thanks Leo !!

[Leo]

No problem!

[Alan]

Hi Leo,

another Q, I would like to add some padding below the image in the hook
I have tried adding some code but of course it doesnt work.
I need professional help with this small matter!

Regards, A

[Leo]

Try this in hook:

<div class="hook-image">
    <img src="http://URL-HERE">
</div>

Then use CSS to style it:

.hook-image {
    padding-bottom: 10px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Alan]

and again, perfect!, thanks leo.

I just changed it to add padding to a slider.

[Leo]

No problem!

[Alan]

and again more Q’s

i am struggling to make a slider in the above hook full width.
I tried some css in the child style sheet

Hook code

<?php if ( ! is_page( 35 ) ) : ?>

<huge_it_slider id="3">

<?php endif; ?>

<div class="hook-slider">
    <huge_it_slider id="3">

</div>

Style sheet

.hook-slider {
    padding-bottom: 0px;
   text-align: center;
width: 100%;
font-size: 35px;
}

any suggestions?

[Alan]

apologies, I kind have this sorted..

[Author]

Posts