[Resolved] PHP Snippet Footer Width, Copyright Width – Floats to Flexbox

Home Forums Support [Resolved] PHP Snippet Footer Width, Copyright Width – Floats to Flexbox

Home Forums Support PHP Snippet Footer Width, Copyright Width – Floats to Flexbox

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1568580
    Rylan Urban

    Hello, I’m working on implementing flexbox, but there’s two-ish conflicts that I can’t figure out.
    Float Site | Flexbox Site

    1) PHP Footer Widths. I was once recommended by GP to use this footer width snippet. How can I covert the code so that it works with flexbox? Or maybe there’s an easier way now? Sample code:

    add_filter( 'generate_footer_widget_1_width', function() {
        return '45';
    } );
    add_filter( 'generate_footer_widget_1_tablet_width', function() {
        return '100';
    } );

    – You can see in the flexbox version, the footer widget widths are equal. The php doesn’t seem to apply.

    2) The copyright area seems to reverted from full width to content width. I’m not sure how to change that back to full?

    3) There is a third issue that I can’t nicely describe, and you won’t see it on the flexbox site. But I briefly changed the main site to flexbox and also noticed that all the menu items start on the left side of the page before ‘sliding’ to the middle on page loading. Any words of wisdom there? These three issues are likely it – so would be great to sort out!

    Thanks!

    #1568856
    Leo
    Staff
    Customer Support

    Hi there,

    1. This should help:
    https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area-%E2%80%93-flexbox

    2. That is built with Lightweight Grid Columns which really isn’t the best method now – it’s using float instead of flexbox.

    Can you try adding those three items as the footer bar widgets instead?
    https://docs.generatepress.com/article/footer-bar-widget-area/

    Then I can give you some CSS to make them in one line.

    3. That sounds like some sort of caching issue to me.

    #1569431
    Rylan Urban

    Thanks – check out the flexbox site now.
    1) Perfect
    2) Half way there:
    2a How can I add the copyright symbol to the menu?
    2b How can I remove the old copyright area?

    Thanks!

    #1569433
    Rylan Urban

    2b) I just hit spacebar and the text disappeared, then made the padding 0 to make it look like to wasn’t there. Visually it’s correct. But I’m not sure if that’s the best solution?

    #1569550
    Leo
    Staff
    Customer Support

    You are just trying to replicate the float left right?

    If so you can still use the default copyright field in the customizer for the copyright,

    Then add a Custom HTML widget as the first widget in the footer bar widget area for “License under….”

    Then add a Navigation menu widget as the second widget in the footer bar widget area for Privacy and Terms services.

    Then try this CSS:

    .footer-bar {
        display: flex;
        flex: 1;
    }
    .footer-bar .widget.widget_nav_menu {
        margin-left: auto;
    }
    .footer-bar .widget.widget_text {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }
    #1571029
    Rylan Urban

    Hey – the menu is already added as a widget. That’s what you’re looking at! But that’s ok. I think this is what I want. Only thing – how can I add the copyright symbol as text?

    #1571035
    Elvin
    Staff
    Customer Support

    Hi,

    Only thing – how can I add the copyright symbol as text?

    You can paste this © or type it in its respective label field by using the alt-code ALT+0169.

    #1572151
    Rylan Urban

    thanks!

    #1572162
    Leo
    Staff
    Customer Support

    Glad we could help 🙂

    #1577920
    Rylan Urban

    Hey last thing on this (see sitebox site above). I have two widgets in the footer bar: the lightweight social icons and the menu. Can I make these side-by-side? With the icons to the left, and the menu items centered in the rest of the space to the right? Is there a CSS for this, similar to https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area

    Thanks

    #1578020
    Leo
    Staff
    Customer Support

    Can you try setting the footer bar alignment to either left or right?
    https://docs.generatepress.com/article/footer-bar-widget-area/#footer-bar-alignment

    #1578029
    Rylan Urban

    Just set it to left. You should be able to see the two widgets are stacked to the edge of the screen. Hoping to have them on the same line, within a reasonable content area or centered. Thanks

    #1578097
    Leo
    Staff
    Customer Support

    Can you disable Autopimize so I can inspect the code better?

    #1578493
    Rylan Urban

    Yup – done!

    #1578906
    Leo
    Staff
    Customer Support

    Ok set the footer bar alignment back to center then add this CSS:

    .inside-site-info .footer-bar {
        display: flex;
    }
Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.