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.

Hey Andrew,

Thanks for making such a great theme!

Thank you so much for the quick and thorough answer with great tips!

I used your suggestions and fixed the footer height problem.

If I switch to another theme, delete Ultra, and re-install it, would I lose all of my site information?

Thanks!

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.

It worked! http://ccd.336.myftpupload.com/

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?

Also, I just reactivated the top bar — I want to use it, but not if the main navigation menu will have to be repeated on it. Is there any way to make the top bar menu go away?

Thanks again!

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!

Thanks, fixed the top bar too!

The questions about the gap/social media icons are referring to the space between the footer and the bottom bar.

Thanks

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 Andrew,

Using your suggestion, I couldn’t seem to make any difference in the height of the bottom bar. There was very little, if any, space deleted between the phone number and copyright at the bottom — but that’s fine. I think I want to leave it as it is now, anyways.

I successfully made the social media buttons bigger, but, for some reason, it doesn’t seem to be “sticking” anywhere but a regular Google Chrome window — when I open Firefox or Chrome Incognito and try to view it, the social media icons shrink to their original size. The menu that was in the top bar (that we hid) also came back. Any idea why?

Thanks! I’ll definitely be leaving a great review for the template!

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.

Hey!

It appears to have worked! Awesome. I didn’t try the spacing thing again — I think we are going to be adding some logos to the other side, above the social media icons.

One last nit-picky thing: I am noticing that the phone number on the top bar isn’t responsive on my phone — it doesn’t launch the phone
call menu, or whatever you call it (hah). It would be awesome if there was some way to make this possible, so our clients could contact us as easily as possible. Maybe a good idea for an update, if it isn’t possible through added coding?

Thank you so much for all of your help!

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.

Thanks! Looking forward to it. 🙂

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

Hey Andrew,

Thanks. I just changed the number so that it is international. It would be cool if the change could be made sooner than in a week — however, it is no emergency, so if it will be an annoying undertaking in the meantime, no worries. Thanks again for all of your help.

No problem at all. I’ll work it up for you over the course of the evening. Chat in a little bit.