Footer customisations (CSS)

Resolved lensv
(@lensv)

5 years, 8 months ago
Hi!

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

https://ww.wp.xz.cn/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 5 years, 8 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)

Thread Starter lensv
(@lensv)

5 years, 8 months ago

Anyone with an idea here?

/LS
stilman davis
(@stilman-davis)

5 years, 8 months ago
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.
Thread Starter lensv
(@lensv)

5 years, 8 months ago
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 5 years, 8 months ago by lensv.
stilman davis
(@stilman-davis)

5 years, 8 months ago

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.

Thread Starter lensv
(@lensv)

5 years, 7 months ago

Someone else who can help me out? I’m kind of lost here 🙁

/LS
Anonymous User 14254218
(@anonymized-14254218)

5 years, 7 months ago
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 5 years, 7 months ago by Anonymous User 14254218.
- This reply was modified 5 years, 7 months ago by Anonymous User 14254218.
Thread Starter lensv
(@lensv)

5 years, 7 months ago

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

sjsjsj99
(@sjsjsj99)

5 years, 7 months ago

@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.

Anonymous User 14254218
(@anonymized-14254218)

5 years, 7 months ago

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 🙂

Thread Starter lensv
(@lensv)

5 years, 7 months ago

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)

5 years, 7 months ago
It uses:
```
<?php
echo date_i18n(
/* translators: Copyright date format, see https://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.
Thread Starter lensv
(@lensv)

5 years, 7 months ago

👍🏻

/LS

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

The topic ‘Footer customisations (CSS)’ is closed to new replies.