Hi,
Something strange happens with my Global Custom CSS for the Top Footer layout. All CSS works perfect when viewing the page from the Theme Options page within Cornerstone but when opening the page with a browser the CSS-code has no effect. Clearing the cache makes no difference and yes, I have saved the CSS 
Can you check and give me some advice? You’ll find a link in the secure note.
Best regards, Hans.
Hey @TIS123.
Please also try to clear your browser cache and see if it fixes the issue. If you are still not able to see any changes, There might be some issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.
To verify that, please copy all the codes that are in the Global CSS and paste it here.
It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.
Hope this helps.
Hi Jade,
Thanks for checking! The browser cache was cleared several times but this makes no difference. I have picked the CSS code from posts from this forum, these are my global settings:
/* Top footer colors */
footer.x-colophon.top {
background: #097BB7;
color: white;
}
/* Top footer widget text */
.x-colophon.top .widget_text {
text-shadow: none;
}
/* Top footer widget links */
.x-colophon.top .widget a,
.x-colophon.top .widget ul li a,
.x-colophon.bottom ul li a {
color: #ffffff;
text-decoration: underline;
}
/* Top footer widget links hover */
.x-colophon.top .widget a:hover,
.x-colophon.top .widget ul li a:hover,
.x-colophon.bottom ul li a:hover {
color: #dddddd;
text-decoration: underline;
}
/* Bottom Footer */
footer.x-colophon.bottom {
padding: 20px;
color: #000000;
background-color: #ddd;
}
Any further advice?
Kind regards, Hans.
Hey Hans,
I tried to check the CSS you are currently using and it should be the right CSS but for some reason it is not taking effect even if there are no CSS errors.
Have you tried to clear your site’s cache or try testing for a plugin conflict? You can do this by deactivating all third party plugins, and seeing 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.
If you already have and it still does not work, please provide us with the admin access to your site in a Secure Note:
Hi Jade,
The browsercache was cleared. I’ve deactived all plugins except the ones from Theme X and this makes no difference. In the secure note you’ll find the admin login info.
Thanks so far!
Hans.
Hi Hans,
Thank you for the credentials, but would you mind to elaborate the issue?
Your footer looks have the same styling to me, regardless if I view it on Cornerstone or Front-end (see screenshots below)
And besides the Theme Options > CSS and Page > CSS, do you remember putting a custom CSS anywhere else? In a plugin or Element CSS?
Hi,
It’s a one page site of which the Content CSS file is empty and the Global CSS file contains the code as shown above. So it’s driving me a bit crazy and I never had this issues with my other +/- 10 licenses of Theme-X. May I ask you solve this by suggesting the right CSS-code for the top footer:
Thanks in advance!
Best regards, Hans.
Hi Hans,
It’s not because of CSS, it’s due to the broken content added before it. Any broken content added will affect the structure under it and that includes the footer.
It works okay within the builder since the content preview are isolated from each other
I checked and there are many broken HTML elements, please deactivate your site’s under construction page and test your page here https://validator.w3.org. This other related thread would help,
https://theme.co/apex/forum/t/glitch-in-cornerstone-column-width/54003,
https://theme.co/apex/forum/t/very-strange-error-in-pro/52579/8,
Examples
<p><strong>Nijmegen en omgeving</strong></p>
<p>In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. [cp_modal id="cp_id_2f484"]Klik hier voor een kaartje van het gebied waar wij werken.[/cp_modal]</strong></p>
There is one missing <strong> to pair the last </strong>. Should be like this
<p><strong>Nijmegen en omgeving</strong></p>
<p><strong>In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. [cp_modal id="cp_id_2f484"]Klik hier voor een kaartje van het gebied waar wij werken.[/cp_modal]</strong></p>
Another sample is this
<p>Hiernaast nog enkele voorbeelden van de ruime keus aan elementen die het thema biedt. Voor elk soort content is doorgaans een passend element beschikbaar.
<br /><br />
Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor.
It has opening <p> but no </p>, so it should be like this
<p>Hiernaast nog enkele voorbeelden van de ruime keus aan elementen die het thema biedt. Voor elk soort content is doorgaans een passend element beschikbaar.
<br /><br />
Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor.
</p>
Please fix them first 
Thanks!
Hi Rad,
Again thanks for all your help and support! I’ve checked all p’s, /p’s and other mistakes I didn’t pay attention. Besides I changed my Global CSS to, only, next code:
footer.x-colophon.top {
background-color: #ff0000 !important;
color: #ffffff;
}
to minimize errors but unfortunately these steps did not solve the problem. Checking via https://validator.w3.org2 shows many errors and warnings, most of them are CSS, theme and plugin related. Parts I did not edit.
Hope you can check again and help!
Best regards, Hans.
Hi Hans,
There are still something in your content that is causing the issue.
To support this, I created a test page with no content, and the css works without issues,
Try to remove any special characters in your content like ’ and see if that works.
I have saved your homepage as a template called My Home, that will serve as backup of your homepage.
Thanks
Thanks all for helping. Because I cannot find what is the cause of the problem I will rebuild the site.
If you need anything else, feel free to create another ticket.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.