“New footer” before footer (Generate Press 3.5.1)

  • Hello! I need help. I want new “footer” before original footer. I want that new “footer” height is 50px, max long-wide and I want to put there jpg-backgroud image.

    Help me.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

  • Hi there,

    in the free theme, you would need to use some PHP to hook in your own additional footer.
    Here is an example PHP Snippet to do that:

    add_action('generate_before_footer',function(){
        ?>
        <div class="before-footer">
            <div class="before-footer-inner">
                Your conent here
            </div>
        </div>
        <?php
    });

    Then you can use some CSS to add the background to the before-footer and set the spacing:

    .before-footer {
        background-image: url('your-image-url.jpg');
        background-size: cover;
        padding: 20px;
    }
    .before-footer-inner {
        max-width: 1100px;
        margin-inline: auto;
    }
    Thread Starter jhh78

    (@jhh78)

    Thank you. Could you help me more?

    1. Where and how I make PHP hook in my theme?I pu this code somewhere?
    2. Where I put this CSS-text in my theme?
    3. After these how I can use thisnew footer? Where I can “activate” it?
    ying

    (@yingscarlett)

    1. check this article for how to add PHP code: https://docs.generatepress.com/article/adding-php/
    2. check this article for how to add CSS: https://docs.generatepress.com/article/adding-css/
    3. once the PHP code is added and activated, it should show on front end.
    Thread Starter jhh78

    (@jhh78)

    Thanks! Your css is –>background-image: url(‘your-image-url.jpg’);

    Picture what I want is located –> https://sahkosipa.fi/sahkosipa2024/wp-content/uploads/2024/11/elektria_background-harmaa.jpg

    How I modify css? Now there is wrong picture. And another problem is that picture is scrolling. I wan that the picture must remain in place.

    ying

    (@yingscarlett)

    As simple as this ??

    background-image: url(‘https://sahkosipa.fi/sahkosipa2024/wp-content/uploads/2024/11/elektria_background-harmaa.jpg’);

    You want the background image to be fixed? Just so you know, it won’t work on mobile. I’ll give you CSS only for desktop.

    Add this CSS:

    @media(min-width: 1025px) { 
        .before-footer {
                background-attachment:fixed;
        }
    }
    • This reply was modified 3 months, 2 weeks ago by ying.
    Thread Starter jhh78

    (@jhh78)

    Hello! Picture is wrong before footer. Why? Picture not updated. Why? Here is my CSS. Check what is wrong

    Background-image: url is empty, stille there is a picture. Where this picture comes? I don’t understand.

    .inside-header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    }

    @media(max-width: 768px) {
    .inside-header {
    flex-direction: column-reverse;
    }
    }
    .wp-block-table table, .wp-block-table td, .wp-block-table th {
    border: 0;
    }
    .wp-block-image figcaption {
    font-size: 26px;
    text-align: center;
    }
    figcaption {
    padding-left: 0,5px;
    padding-right 0,5px;
    }
    .before-footer {
    background-image: url(“”);
    background-size: cover;
    padding: 30px;
    }
    .before-footer-inner {
    max-width: 1100px;
    margin-inline: auto;
    }
    @media(min-width: 1025px) {
    .before-footer {

    background-attachment:fixed;

    }

    }

    ying

    (@yingscarlett)

    The background image is what you set as background image of <body>.

    Since the .before-footer element does not have background color or image, it’s transparent, so you can see it through to see the background image of the body.

    Thread Starter jhh78

    (@jhh78)

    Hello again!

    https://sahkosipa.fi/. I want same exact same new footer after man-picture. What is correct css-code? Help me.

    Thread Starter jhh78

    (@jhh78)

    And the same footer (bar) as the bottom on all pages. I need help.

    ying

    (@yingscarlett)

    I’m not sure what you mean by new footer after main-picture, can you explain some more?

    To have 5 widgets in the footer, go to customizer > layout > footer, set footer widgets to 5.

    Then you can add different blocks to the 5 footer widget at appearance > widgets.

    Once it’s done, let me know, i can take a look then and provide CSS to make the widgets wrap to the next row.

    Thread Starter jhh78

    (@jhh78)

    Sorry, I try to explain. =) Look main page sahkosipa.fi.

    There is a blue bar at the bottom of the page, above it is a dark gray bar with circuit board patterns. I want the same dark gray bar also under the picture on the front page where the worker is doing electrical work.

    Thread Starter jhh78

    (@jhh78)

    And the same footer (bar) as the bottom on all pages. So, under the blue box on every page.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.