Switching from X to Pro - Change the CSS in Child Theme

Support
#1

Hi so i had already opened a thread about this (here below) and I have switched my 2 remaining websites from X to Pro. One of them is live and doesn’t seem to have issues so far but it’s a website I barely use.

The other one is my main website www.keepcalmandtravel.com and I’m worried to break something. So I tested the Pro on a staged website and it was ok.

My only issue is with the directions the guide gives in regards to change the Child theme CSS (I’m using integrity light Child Theme, I haven’t uploaded the Pro on my main site yet)

I don’t know how to do what what you say (change the CSS in the child theme). I honestly wouldn’t know where to look and how to make the change.

Can you please help me in the transition?
Thanks

#2

Hello Clelia Mattana,

Thanks for writing in!

Please be advised that Integrity Light Child Theme is a legacy child theme. You may use the Pro Child theme instead. You can get it in your Dashboard (https://theme.co/apex/child-themes).

If you want to keep your current child theme to make sure that all your CSS will work, simply upload Pro theme into your staging site and do not activate it. Then go to Appearance > Theme Editor or simply edit your integrity Light Child theme style.css and replace the Template: x to Template: pro. This line changed should instruct your child theme that the new parent theme will be Pro theme. Still keeping all your setting, custom css and any other modifications that you may have added in the Integrity Light Child theme.

Kindly let us know how it goes.

#3

Thanks for your reply, my IT skills are zero so I want to make sure I am editing the right CSS can you please give me a screenshot of where I can edit the CSS for the child theme? I know it might be seem basic for some but to me, I have no idea!

Thanks a lot

#4

Hey Clelia,

Here’s a screenshot of the Theme Editor. For more details, you can read this article: https://www.wpbeginner.com/glossary/theme-editor/

Hope that helps.

#5

Ok I think I have a few questions because it’s getting pretty confusing in here. This is the situation now:

  1. I converted all my licenses to Pro for all my websites, including the one in question here: www.keepcalmandtravel.com

  2. I created a staging website to test a few things and in there I uploaded Pro Theme (not the child theme, only Pro. Not sure what it will happen if I upload the Pro child Theme, will I lose all my CSS from my integrity light x Theme?)

  3. You ask me to change the CSS on my Child theme, but BEFORE uploading PRO. Which is impossible now because on my staging website I had already uploaded. So ON THE STAGING WEBSITE I have this:

NO PRO CHILD THEME BECAUSE I DON’T KNOW WHAT WOULD HAPPEN TO MY CSS

  1. On my live website I haven’t uploaded Pro Yet and in the Theme editor, this is what I see (THEY SAY I HAVE 6 ERRORS TO FIX BEFORE CHANGING ANYTHING… NO IDEA HOW TO DO THAT)

MY QUESTIONS:

  1. How do I proceed? I want to test everything on the stage website first but I’ve already uploaded Pro so I can’t do as you said

  2. Is there any way you could help me by checking my dashboard and make this change for me on the real website? I’m very worried that not knowing what I’m doing Im going to break the site.

  3. If I use the Pro Child theme will I lose my CSS from the Integrity light child theme from X?

It’s all very confusing to me. If you could reply to each question clearly and in a simple way where possible, it would be great.

This is my full time job and I can’t afford any mistake or breaking my website.

Thanks

#6

Hey Clelia,

Thanks for the details. Here are my answers to your questions.

  1. In your staging site, edit the X Child Theme. Specifically, you need to edit this line Template: x. Change x to pro.

  1. Regretfully, child theme configuration is not a part of our theme support. I know it’s easy for us but if all customers request this, it would not be sustainable for us. Also, it would be best to do this yourself for your learning. Don’t be afraid as you have your staging site to test.

  2. No. Your X child theme would still be there unless you delete it. You can access the code of your X Child Theme via the Theme Editor.

#7

Thanks

So this is what I actually did:

  1. STAGING WEBSITE: I uploaded the Pro Child theme and everything went well, site didn’t broke

  2. I checked the CSS of my (still) X Child Theme against the CSS of the new Pro Child Theme on the staging site (via the customizer/global CSS) and they were identical. So I took for granted that switching from X Child Theme to Pro Child Theme would copy all the CSS.

  3. LIVE SITE: I uploaded both Pro and Pro Child Theme, the site looks fine so far and now in both Staged and live site the Theme CSS look like this:

So In theory I did everything right. My question is: DOES THIS LOOK CORRECT? I don’t want to have my site broken at the next update of Pro.

AH LAST IMPORTANT QUESTION: I’m trying to improve the speed on my website and on the various tools it always appears:

…stacks/integrity-light.css(www.keepcalmandtravel.com)
28 KB
1,380 ms
…site/integrity-light.css(www.keepcalmandtravel.com)
3 KB
330 ms
…pro-child/style.css(www.keepcalmandtravel.com)

At this point given that I have switched to pro and it’s not reversible, can I delete the X theme and X Child Theme in case it helps with the speed errors?

Thanks

#8

Hi Clelia,

Yup, that’s it great job :tada:

Moving/changing of child theme only gets complicated when you heavily customize it :slight_smile: but in your case, it seems you only concern about the CSS ( style.css) so yeah that can be done by a copy and paste.

I have a couple of advice for next time you make an update or test something on staging. It seems you quickly applied the update on live site, please test a little bit more next time. And when working on a child theme, please use an FTP (if possible), the Appearance > Theme Editor is not really recommended because one mistake can lock you on your site, whilst if you use FTP you can easily undo that mistake. And always remember to clear all your caching plugins/features after an update.

The X and x child theme are now deactivated, these have nothing to do with your site now, yes you can remove these now (but for safety measure, keep it maybe for a month) these idle themes has nothing to do with your site speed.

To improve your site performance, please use caching, CDN, and image optimizers.

Customizations - Performance

Those files you show above are theme files and are optimize so it should not affect your site speed, can you clarify on a separate thread what is the issue of those files?

Happy holidays,
Cheers!

#9

Thanks
A few things:
1)the suggestion to edit the theme CSS files came from one fo your theme members, I was super afraid to touch it and I didn’t.

  1. I didn’t have to copy any CSS, as I said, testing on staging website I opened the global CSS (Pro Child Theme in there) and then I opened the global CSS on my live site (still on X). I went line by line to make sure and they were exactly the same, so I assumed that when you upoload the Pro Child Theme it inherits all the global CSS.

  2. As I said before, my IT skill are zero so I don’t even know what it means to use FTP etc for these things. What I did was simply upload Pro and Pro Child theme and everything was like it was before apparently. Now I have to see on the next update.

  3. The lines I showed you come from Google site speed analysis and among other things are suggestions from Google, which says: "
    Eliminate render-blocking resources"

  4. I hired a guy to help me with the site speed, can i tell him to go ahead now? I was waiting for your confirmation about moving to Pro and even if you said it was ok you also told me to wait a bit and check things (what thing exactly? so far the site looks ok)

Thanks

#10

Hey Clelia,

Here are the answers to your concerns:

This applies if you have custom CSS added in your child theme (X Child Theme in your case). Since you said the X and Pro child themes are identical when you checked, that means you don’t have custom CSS in those files so this can be skipped as what you did.

The Global CSS is stored in the database and it will be used by X, Pro, and their child themes. That’s why nothing happened to your site.

Not a problem. You don’t have to know FTP unless you start customizing PHP templates.

This one requires custom development to solve. Almost all themes will receive that warning from Google because this requires splitting the styles and this varies per website so passing this warning by Google should be done by a developer that can work closely with you.

I’m not sure what thing my colleagues said you need to wait but if nothing is broken, you can tell your developer to proceed with optimization. Please just note that website optimization can break your site. In case that happens, it should be your web developer that will fix the issues.

Hope that helps.

#11

Thanks

The only “concern” I have is that I actually added CSS customization later on to fix a few issues, nothing big and also the ones I added where picked up my the Pro Child Theme. I mean is not a concern, as long as at the next update I don’t lose them!

My web developer knows and he will first try on the staged website, that’s why I wanted to recreate the exact conditions on the staged website (uploading Pro Etc) so that he knows when the site brokes and fix it.

Thanks

#12

Hey Clelia

CSS in the Global CSS or Theme Options > CSS is safe from updates. Whether you’ll use X or Pro parent or X or Pro child theme, the Global CSS will be used.

You’re all good now.

#13

Thanks for confirming!

#14

You’re very welcome, Clelia.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.