Footer problems

Hi cloudontap

Thanks for giving Ultra a try. (I’ve got an update on the way soon with lots of little fixes and additions.)

Ultra isn’t using a sticky footer, rather, the background color of the site body matches the footer background color. This means, that on a page without much content, the footer will appear quite large. That’s not necessarily the problem here, but worth noting.

The footer widgets are the ones with top and bottom padding, vs the footer itself, I did this to help with edge cases, like when there are no widgets present. To edit, please use a plugin like Simple Custom CSS or if you make use of Jetpack, then activate Jetpack Custom CSS and insert:

Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/

/* Footer widget padding */
#colophon .widget {
  padding: 2.67857em 0 3.57143em;
}

Edit as required. You’re welcome to replace the em measurement with pixels.

Removing the copyright/bottom bar sounds like a good idea for a theme setting, for now, let’s hotfix with the following:

/* Hide the bottom bar */
.site-footer .bottom-bar { display: none; }

To restore your setup we ideally need to restore the edited files. All WordPress themes completely overwrite themselves when updating so any changes made via Appearance > Editor without using a child theme unfortunately aren’t upgrade safe.

One way to restore theme files would be to switch to another theme, delete Ultra and re-install it. Alternatively, if you let me know what’s been edited, I could send through the contents of those files.

For sure, glad to help out.

Switching to another theme, deleting Ultra and then re-installing won’t cause the loss of any site content or theme settings. I noticed a small change to the style.css file. Unfortunately any changes of that manner, any changes made via Appearance > Editor will be lost. I ran a quick diff on your stylesheet vs the 0.9.3 original. Below are the changes you’ve made:

/* Calendar Widget */
#wp-calendar th,#wp-calendar td {
    padding: 0!important
}

#wp-calendar thead th {
    padding-bottom: 0!important
}

/* Site Footer */
.site-footer .footer-main {
    background: #313539
}

To avoid losing those, insert the above into Simple Custom CSS or the Custom CSS plugin you prefer.

If you’ve made any modifications to theme files other than style.css and footer.php, please let me know. In that event we’d need to make use of a child theme.

Summary: You’re now good to re-install Ultra as long as style.css and footer.php were the only theme files edited.

Super, glad to hear you made progress.

All these questions are great feedback, thanks, I’m taking notes.

Can I make the gap between the phone number and copyright any smaller? Also, is there any way I can make the social icons bigger?

Is the above question regarding the top bar? Sorry, I’m not quite with you there. Do you mean the gap between your phone number and email address? Thanks.

Top Bar Menu

We could remove this by navigating to Appearance > Menus, creating a new menu and adding no pages or links to it, leave the menu contents blank and assign it to the Top Bar Menu location.

I’ll come up with a better way of handling this in the future!

Super, thanks.

Bottom Bar

/* Bottom Bar */
.site-footer .bottom-bar {
  background: #313539;
  padding: 0.89286em 5%;
}

Adjust the first padding value as required, that represents top and bottom. If you’d like to change top and bottom on their own, then blown that short hand would look as follows:

padding: 0.89286em 5% 0.89286em 5%;

top right bottom left

Social Links Menu

We can either edit the font size of the social icons globally, for top and bottom bars as follows:

/* Social Links Menus */

.social-links-menu ul li a:before {
  font-size: 1.0714rem;
}

Or we can make it specific to the bottom bar:

/* Bottom Bar Social Links Menu */

#colophon .social-links-menu ul li a:before {
  font-size: 1.0714rem;
}

The current font size in px would be 15. rem and em just help with keeping everything scaling nicely if users use browser zoom. A fair bit of effort for that one use case. You’re fine to swap the rem value out with a px value.

The above is un-tested. Let me know how it goes.

Hey 🙂

Bottom Bar and Footer

The gap between your footer widget and the text in the bottom bar is a combination of the bottom bar’s top padding and the footer widget’s bottom padding. If you’d like to have a another go please check the combination of the two. We’ve mentioned both selectors so need to re-insert them. They are:

/* Footer widget padding */
#colophon .widget {
  padding: 2.67857em 0 0 0;
}

/* Bottom Bar */
.site-footer .bottom-bar {
  background: #313539;
  padding: 0 5% 0.89286em 5%;
}

What I’ve done there is set footer widget padding bottom to zero and bottom bar top padding to zero. Try that and make adjustments from there.

Top Bar Menu

Mmm, not sure. Still not there on my side. When I inspect the code the menu is empty. We could hide it:

/* Hide Top Bar Menu */

.top-bar-navigation { display: none; }

Social Icons Menus

I unfortunately can’t replicate the problem. I’m using OS X, in Chrome, Firefox and Safari the size is holding. Let’s try adding !important to the property:

/* Bottom Bar Social Links Menu */

#colophon .social-links-menu ul li a:before {
  font-size: 1.0714rem !important;
}

All you need to do is locate the above rule in your Custom CSS and after px or rem or em, whatever you used but before the closing ; please add !important. Hopefully that’s clear in my example above. For another example of !important in use, please see: https://css-tricks.com/when-using-important-is-the-right-choice/.

Let me know how that all goes.

Super, glad to hear we’re making progress.

Definitely send through the little things, I’m keen to get those smoothed out. You’re quite right, the phone number should launch a call link. Let me look into that and come back to you when I have more.

Chat shortly.

I’ve added a tel: number to the phone link. Making this change on your site right now would require a child theme. The effort is no problem but I think I’m pretty close to getting this next update into the approval queue on WordPress.org. Looking at the queue length right now, if I submit in the next two days and assuming everything is accepted, the update should reach you in seven. Let me know if it’s more urgent than that and I’ll work this up for you now.

The number entered will need to be in the international format. If you’d like a different presentation number to the number being dialled then we might need to child theme the change anyway.

https://developers.google.com/web/fundamentals/device-access/click-to-call/click-to-call?hl=en/#use-the-international-dialing-format