CSS customization gone after upgrade

[juranadmin]

Hi,

I upgraded Cornerstone from version 1.3.3 installed to 3.2.5 and X from version 4.6.4 installed to 6.2.5 on a development server, and a lot of the CSS customizations are gone after the upgrade.

I can send links to both the current site that is on Cornerstone from version 1.3.3 and X version 4.6.4 and the development site that is upgraded Cornerstone to 3.2.5 and X to 6.2.5.

Thanks

[mldarshana]

Hi Matthew,

Thanks for writing in! First of all, try purging your server cache, if you’re using a caching plugin. Also make sure to disable CSS/JavaScript autominifications from your caching plugin.

If you’re using a service like CloudFlare CDN, make sure to clear CDN cache as well by login into their account.

Head over to X -> Settings area and clear style cache.

Finally, make sure to clear browser cache as well before testing your site.

Let us know how it goes.
Thanks!

[juranadmin]

Hi,

No caching on the dev server or CDN, I did disable Autoptimize plugin and cleared the style cache but still no change.

[ruenel]

Hey There,
​
​To assist you better with this issue, would you mind providing us the login credentials of the staging site so we can take a closer look and check your settings?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

[juranadmin]

Sure. Here you go.

[Prasant]

Hello @juranadmin,

Thanks for updating the thread.

Did you moved the CSS codes from Theme Options panel on main website to Style.css file on staging website? I see that on main website you have added the CSS on Theme Options panel and on staging website they are inside style.css file. Please make sure you have added all the CSS codes from main website to staging website. To take a more detailed view, please share login details of main website in secure note.

Thanks.

[juranadmin]

Hi,

Here is the login to the main website.

[rad]

Hi @juranadmin,

Before we continue, would you mind briefing us what customizations are missing? All I could see are fonts and the layout width (which from the original is 1595px and the staging has 1390px which of course, not part of customization since it’s configurable in Theme Options.

As for the font, you’ll have to reconfigure it too since the latest one has updated font system than the older one. Like the menu fonts and styling in Theme Options.

The rest all looks the same to me unless you can point out which customization are we expecting. And also, the news ticket in the header is a 3rd party plugin and the custom code

[data-x-icon], [class*="x-icon-"], .x-navbar .mobile .x-nav li>a, a, body {
    color: #24135f;
}

Is being overridden by this

a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .x-breadcrumb-wrap a:hover, .widget ul li a:hover, .widget ol li a:hover, .widget.widget_text ul li a, .widget.widget_text ol li a, .widget_nav_menu .current-menu-item > a, .x-accordion-heading .x-accordion-toggle:hover, .x-comment-author a:hover, .x-comment-time:hover, .x-recent-posts a:hover .h-recent-posts {
    color: rgb(255,143,28);
}

And that is generated by the theme based on the color set in Theme Options. Perhaps, you change it in the Theme Options too? Or you could edit your custom CSS and add !important. Example,

[data-x-icon], [class*="x-icon-"], .x-navbar .mobile .x-nav li>a, a, body {
    color: #24135f !important;
}

Thanks!

[juranadmin]

Thanks. This info about the layout width was helpful. I already started to go through and make some CSS changes to match the original site.

[Prasant]

You are most welcome.