Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Full width SIDEBAR above content area

Home Forums Support Full width SIDEBAR above content area

  • This topic has 18 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #417238
    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.

    GP Premium 1.4.3
    #417369
    Leo
    Staff
    Customer Support

    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 🙂

    #417412
    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

    #417428
    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 }

    🙁

    #417484
    Leo
    Staff
    Customer Support

    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">

    #417629
    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?

    #417864
    Leo
    Staff
    Customer Support

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

    #417871
    Alan

    ok thanks Leo !!

    #417893
    Leo
    Staff
    Customer Support
    #422959
    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

    #423254
    Leo
    Staff
    Customer Support

    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/

    #423300
    Alan

    and again, perfect!, thanks leo.

    I just changed it to add padding to a slider.

    #423309
    Leo
    Staff
    Customer Support
    #425022
    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?

    #425044
    Alan

    apologies, I kind have this sorted..

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.