Copyright bar

[lizonbc]

Jason,

I apologize for all of my questions. My client has now changed his mind and wants the contact info and the copyright on the same line. Great. I granted that. However, it’s in the greenish footer bar above the grey copyright bar. And he wants to delete the grey copyright bar. Can we do that?

http://www.ataitec.net

Liz

Topic

[Jason Bobich]

The copyright bar must be there. So try putting it all in the bottom grey copyright bar, but then change the background color of that copyright bar to the color you want. And then once empty, the section that normally holds the footer columns should disappear, I believe.

[lizonbc]

But is it possible to put two columns on the copyright bar, to look like I’ve done it on the footer bar?

http://www.ataitec.net

[Jason Bobich]

You could use the “Template Sync” feature — Under the Templates section of your WordPress admin, create a template that has your columns element and setup to be your footer only. Then in your theme options footer section, check the box that says “Template Sync” and select the template you created that makes up your footer.

[lizonbc]

Thanks, Jason.

I’ll give this a shot.

And another question:

Is it also possible to change the footer from being the default primary font to the same font as the main menu? I tried to code it with html, but it didn’t work. It seems the only way I can do this is to make the primary font the Google Muli. But I really liked the Raleway for the primary font. My client just wants the footer to have the same font as the Menu bar.

[lizonbc]

A couple of glitches:

1) When I tested it to see if I’d lose the footer bar if I put the content into the footer copyright area, I lost the footer bar, but I also lost the highlighting of the links. And the forced dark color is not as dark as the forced dark color was on the footer bar. So, it’s really difficult to see.

2) So then I tried the template sync. The background color changed but the content does not show.

[Jason Bobich]

To answer your original question, if you just want to hide the copyright bar with CSS, that’s a really easy thing you can do, too.

.footer-sub-content {
  display: none;
}

Is it also possible to change the footer from being the default primary font to the same font as the main menu?

.site-footer {
  font-family: 'Raleway';
}

[lizonbc]

That worked. Thank you.

[lizonbc]

Hi Jason,

I have another glitch now. Removing the copyright bar helped. BUT now my client wants to reduce the size of the footer bar. He wants it to be the size of the copyright bar. So, ideally it would be great if the template sync would work, but it didn’t. Any ideas why it would not work? OR is there a way to make the footer bar narrower?

Liz

[Jason Bobich]

The reason your footer is tall and weird is something I think with how you’re adding the <strong> tags incorrectly.

So, let’s do an experiment. Completely remove all <strong> tags from your footer. What does the footer height look like now?

After confirming this was the issue, we can talk about how to properly make the text bold.

[lizonbc]

It didn’t make any difference.

[Jason Bobich]

I’m in Chrome browser and it actually did make a significant difference.

But if that doesn’t work for you, can you setup the footer sync like I originally suggested, and give me a chance to look at what you’re saying is a glitch? About the content not showing?

[lizonbc]

OK. I just set it up again. No content is showing, AND it is still not as narrow as the copyright bar should be.

[Jason Bobich]

Ok, yes it is a glitch. Adding this to your child theme style.css will fix:

.element-content {
  opacity: 1 !important;
}

(I will have this fixed in the next theme update, now that I see exactly what’s happening)

---

So now you have more control over that section through the layout builder. Do the following three things.

1. Remove the background color from the content elements, themselves, because you already have it on the surrounding section. By adding the background to the content elements, you’re just adding more spacing for around the content elements for no reason. After doing this you’ll notice the footer is already shorter.

2. Next, go into the section display options (where you set the background color for the section, that little picture icon), and further down the options, check the box to configure custom padding for the section. There you can set exactly how much padding you want above and below the copyright text.

3. Finally, if you’re getting bugged by the extra 20px below your copyright text, it’s because all unordered lists have 20px of bottom margin (an unordered list is what’s generated when you use the %icon_name% blah blah). Adding the following to your child theme style.css will eliminate that:

#custom-bottom .list-inline {
  margin-bottom: 0;
}

Is any of the above unclear? Or are you not understanding any of the steps?

[lizonbc]

Hi Jason,

I believe I understood everything. But here are my problems. First of all, the CSS for the glitch did nothing. As you can see, I still cannot see the content from the template.

As far as the other instructions:

1. There was no color within the elements, only in the section.

2. The padding did the trick.

3. I didn’t bother with this because the padding worked.

So, in summary, I fixed the height of the copyright bar but still can’t seem to get my content to show.

[Jason Bobich]

First of all, the CSS for the glitch did nothing. As you can see, I still cannot see the content from the template.

Tested in Chrome, Firefox, and Safari — All working from where I’m sitting. As always after changing a CSS file, try clearing your browser cache.

1. There was no color within the elements, only in the section.

Yup, there is, and you’ve set it to the tan color on both content elements. See screenshot.

This is important because it’s adding 60px of total height to your copyright area in addition to whatever you set in the section padding.

[Author]

Replies