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

[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!

[Leo]

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.

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

[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!

[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?

[Leo]

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%);
}

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

[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?

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[Rylan Urban]

thanks!

[Leo]

Glad we could help 🙂

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

[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

[Leo]

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

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

[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

[Leo]

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

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

[Rylan Urban]

Yup – done!

[Leo]

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

.inside-site-info .footer-bar {
    display: flex;
}

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

[Author]

Posts