Support » Theme: Twenty Twenty » Footer customisations (CSS)

  • Resolved lensv

    (@lensv)


    Hi!

    I need to get rid of some empty areas in a footer (). I’ve already got some help in the following thread…

    http://wp101.net/support/topic/custom-css-263/

    I was advised though to write here for further support. Grateful for any help I can get šŸ™‚

    /LS

    • This topic was modified 2 months ago by James Huff. Reason: link moved to proper field

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

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

    (@lensv)

    Anyone with an idea here?

    /LS

    stilman davis

    (@stilman-davis)

    Add your custom css via dashboard>appearance>customise>additional CSS

    .footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
        margin-top: 1rem;
    }

    and

    .footer-widgets-outer-wrapper {
        padding: 1rem 0;
    }

    This could give you the result you want. As you were advised elsewhere, use the Inspector to see the results and tweak them.

    lensv

    (@lensv)

    Thanks Stilman!

    The first one don’t seem to do very much, but “.footer-widgets-outer-wrapper” does make some progress šŸ™‚

    Maybe it would be more effective if the two images to the right were aligned to the top (now they look kind of centralised). I can’t find out how to do that though. Could you help me with that too?

    /LS

    • This reply was modified 2 months ago by lensv.
    stilman davis

    (@stilman-davis)

    This is a flex item:

    wp-block-columns are-vertically-aligned-top

    You need to deal with this item. There seems to be some top margin or padding involved. At the moment I cannot do anything for you, but I hope this helps.

    lensv

    (@lensv)

    Someone else who can help me out? I’m kind of lost here šŸ™

    /LS

    hmm, kinda hacky but maybe this helps:

    
    @media (min-width: 700px) {
       .footer-widgets-wrapper {
          align-items:center;
       }
       .footer-widgets-wrapper * {
          margin-top: 0!important;
          margin-bottom: 0!important;
       }
       .footer-widgets.column-two .wp-block-columns {
          align-items: center;
       }
       .footer-widgets.column-two .wp-block-columns > .wp-block-column {
          align-self: unset;
       }
    }
    

    I wrapped this in a media query because it forces 0 bottom and top margins on all elements in the footer which looks really bad on mobile.

    I would also remove the previous mentioned rule set regarding the padding.

    You can keep the reduced padding if you want to but from a design point of view it looks kinda squished then.

    It seems though that you are using the html text widget for the two images on the side.
    removing the classes are-vertically-aligned-top and is-vertically-aligned-top will allow you to omit the align-self:unset declaration of the css above.

    Your full current custom css could then look like this:

    
    .singular .entry-header {
       display: none;
    }
    .entry-content h1, .entry-content h2, .entry-content h3 {
       padding: 0;
       margin: 0;
    }
    
    @media (min-width: 700px) {
       .footer-widgets-wrapper {
          align-items:center;
       }
       .footer-widgets-wrapper * {
          margin-top: 0!important;
          margin-bottom: 0!important;
       }
       .footer-widgets.column-two .wp-block-columns {
          align-items: center;
       }
    }
    
    • This reply was modified 1 month, 4 weeks ago by raQai.
    • This reply was modified 1 month, 4 weeks ago by raQai.

    Thanks a lot raQai!

    It seems like just adding your first code does the trick! Looks OK now, at least if you ask me šŸ˜‰

    One more thing… Whats the best way to remove or edit the lowest part of the footer (the one with “Driven by WordPress” etc.)?

    /LS

    @lensv You could try the plugin “Options for Twenty Twenty.” There’s a free version and premium that have footer (driven by WordPress issue) & other customizations.

    the “best” way depends on your goals and skills.
    for me it would be creating a child theme. for others a bit of css is sufficient. then again some ppl prefer plugins for every bit of change.

    so yea, it depends. name your goals and others may help you šŸ™‚

    Thanks, both of you!

    One final question… This copyright thing in the footer, will the year (2020) be updated automatically or must this be done manually? If so, how?

    /LS

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    It uses:

    <?php
    echo date_i18n(
    /* translators: Copyright date format, see http://www.php.net/date */
    _x( 'Y', 'copyright date format', 'twentytwenty' )
    );
    ?>

    So, it will always be the current year as reported by PHP, which will be getting it from your server’s clock.

    šŸ‘šŸ»

    /LS

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