Strange Footer Behaviour

[skyhawkmedia]

He there,

I’ve just been changing my header (using the Pro header builder). Finally got it to where I wanted only to discover it has changed the background colour of my Footer?!

Header (navbar) and the footer have always been the same dark colour up to this point and that’s been fine. But I’ve switched the navbar to a light colour. This appears to have changed the footer also. I’ve tried changing the header to another colour but it hasn’t changed the footer, so this could be coincidence - but it has definitely only stopped working since I’ve been working on the header.

Looking at the footer in the Footer builder, it is fine. But viewing the site live, there is no background colour. No matter what I do I cannot get it to be the colour I select. I thought there may be some hidden CSS that I’ve added (or removed) but I can’t seem to uncover it.

Any advice?
Thanks
Steve

[basanta]

Hi There,

Can you please send us your website details so that we can have a look.
Before sending the details please check if this is due to any plugin conflict or custom CSS or JS.
Please disable all third-party plugins and remove any custom CSS or JS in your site. If that doesn’t help we will happy to look on to it.

Please provide following information:
Set it as Secure Note

• Link to your site
• WordPress Admin username / password

All the best!

Thanks

[skyhawkmedia]

Thanks. Secure note attached.
Note that if there is a CSS glitch I can’t spot it. But to reiterate, the site was working perfectly well up to this morning when I started changing headers.
Thanks
Steve

[christian]

Hey Steve,

Going to wp-admin redirects to the 404 page. What’s your login URL?

[skyhawkmedia]

Woops, apologies. I’ve updated the first note.

[thai]

Hi There,

It might the caching issue. Please try the following steps:

1. Purge all the cache of W3 Total Cache and disable this plugin.

2. Go to X > Settings and click on the Clear Style Cache button.

3. If you’re using a CDN(ex: CloudFlare), please clear the CDN’s cache and disable optimization services. For the CloudFlare you also need to follow the steps below besides the developer mode:
   https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/1

4. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

[skyhawkmedia]

Well, all the above steps are complete and the issue remains.

I know disabling plugins is the stock support answer, but really? This site has been working for months with these plugins and has only broken now because I’ve updated a header. It is clearly not plugins. However, I have gone through the motions (even though this is a production site) and disabled all plugins. It of course made no difference. They are now enabled again.

I have examined the footer element in the browser and there is no background-color css styling attribute. I’ve tried adding this to the css for the footer but it too does not appear in the page source. I’ll see if adding it elsewhere makes any difference.

[mldarshana]

Hi There,

You’re getting that background color from what is assigned to the body color.

body {
    font-style: normal;
    font-weight: 300;
    color: hsl(0,0%,30%);
    background-color: #f3f3f3;
}

Can you try adding the following CSS rule into your Theme Options > Global CSS area to override that.

footer.x-colophon {
    background-color: red;
}

Thanks!

[skyhawkmedia]

Yep, that’s what I was suggesting and it worked.

It seems that any styling of the footer using the Footer builder is not coming through (including the custom CSS on the Footer Builder).

When IN the footer builder, if I click on the footer in the selector at the bottom of the screen, the upper part of the screen shows the home page (and of course the footer). This also is not showing any styling. However, when I hit the EDIT button, the page then DOES show the styling.

I can see that I have resized the graphics on some SOCIAL elements in this footer. These two are showing correctly when in “edit” mode, and not in “livel” mode.

I’d like to understand why this is not working because I don’t want to have to go through and style all of this using manual CSS.

Thanks
Steve

[skyhawkmedia]

OK well I have found the issue…and, well, it’s my mistake but I’m not sure if it could also be considered a bug.

Initially while styling my navbar header, I took some CSS (from a post here on Apex) so that I could style a gradient colour. This was added to CSS in the header builder. However, I then decided that I didn’t like it so I commented it out. Like this.

/* .hm5 .x-dropdown, .headcol { background: #c32755; /* Old browsers */ background: -moz-linear-gradient(left, #c32755 0%, #414c90 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #c32755 0%,#414c90 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #c32755 0%,#414c90 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c32755', endColorstr='#414c90',GradientType=1 ); /* IE6-9 */ } */

Note that, although I commented it out using /* … / syntax, there are also similar comments on the ends of the lines. Consequently, the code wasn’t commented out like I might have expected leaving the result like this: -

background: -moz-linear-gradient(left, #c32755 0%, #414c90 100%); / FF3.6-15 /
background: -webkit-linear-gradient(left, #c32755 0%,#414c90 100%); / Chrome10-25,Safari5.1-6 /
background: linear-gradient(to right, #c32755 0%,#414c90 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#c32755’, endColorstr=’#414c90’,GradientType=1 ); / IE6-9 */
}
*/

So this is CSS in the header, with no CSS selector. Counter-intuitively, this results in no footer styling occurring at all.

If I remove this block, the footer is back to normal.

Thanks
Steve

p.s. Sorry, I can’t figure out how to post code snippets properly in Apex.

[Alaa]

Hi Steve,

Thanks for the update, I’m glade you managed to get this one sorted out!

Since CSS does not have a nestable comment syntax, I’m sure you will find this solution helpful. Also, I always test my CSS code snippets with this tool before using them.

P.S. you can use this tool to wrap your code snippets here on the forums.

Thanks.