Help with Design and Child Theme needed

Hi there,
Please have a look at this article. It will help you set up your child theme and avoid common mistakes that will eventually slow down your site.

• This reply was modified 7 years, 11 months ago by Fotis.
• This reply was modified 7 years, 11 months ago by Fotis.

Ideally, your child style.css should contain only the selectors and rules that you need to override.
Since you’ve made your changes on the original style.css file and I bet you now don’t know what was originally there and what you added/changed, I’d suggest the following:
Download a fresh copy of the original theme in your computer, and unzip the downloaded file.
Go to https://www.diffnow.com/ or any other diff tool, and paste the contents of the original file on the left, and your version on the right.
Once the tool runs, it will show you which lines are different, which lines were added, etc.
This should help you determine the differences from the original.

In fact, this technique can be applied in any type of file that you’ve modified e.g. PHP files.

Hope this helps.

Hi,

and thank you very much for your help!

@fotis: In this article, I’m missing the information how work with the changes I already made in my original CSS Style. When I copy the whole CSS into the child theme CSS it I think loading and comparing both will definitely take longer than just comparing the changes.

@anastis: Oh yes, this definitely helps, thank you! I haven’t tried it yet but that sounds like something I was looking for. I could also go trough the CSS and search for the color codes (e.g. I replaced all black graphics with mint, got rid of the yellowish mouseover etc.). So when I search for the color codes I find this color up to 20 times in my CSS… So this Diffnow-thing sounds like a plan.
Are there easier ways to change color instead of doing it in so many places in the CSS?

Just another thing that came up: In one of the child theme instructions I read I was told that some themes are using more than one CSS and therefore I’d need a different code for the functions.php to de-register and re-register CSS files in the parent theme. Is Olsen Light a theme of this kind?

Cheers
Kathrin

Let me briefly explain what the problem is with copying the whole CSS instead of adding only what you need.
Let’s say that Olsen had this rule:
a { color: #000; border-color: #ff0000; }
This displays your links as black text with a red border.

You wanted to change the link color to green, so you copied the whole rule in your child theme, and changed it like so:
a { color: #00ff00; border-color: #ff0000; }

Then, I (the developer) noticed that I made a mistake, and the border color should have been black as well, so I change it, and you later updated your theme.

Now, CSS works from top to bottom, so whatever comes later takes precedence. Because child themes’ CSS loads AFTER the parent theme’s, your rule will override mine, and you border will remain red, hence you won’t have benefited from my update and you’ll stay with the wrong color (unless you change it manually in your child theme).

As you can see, copying CSS can be both a blessing and a curse, that’s why the usual advice is to only copy as much as needed to achieve your goal, nothing more, nothing less.

Now, as far as the diff tool is concerned, if you remember all the changes you’ve made, that’s great, you probably don’t need it. If you don’t, it’s a great way to compare the two files and refresh your memory ??

Finally, you don’t need to deregister or register anything with Olsen Light.
The theme detects whether a child theme is active, and if it is, it automatically loads first Olsen’s style.css and then the child’s style.css file.
So, if you’ve added some code in your functions.php registering or deregistering these files, try commenting or removing it and your CSS should keep working.

@anastis: Thank you so much for your help, that’s amazing!

I’m aware of the main function of the main functions of a child theme (or at least I’ve got a good idea ?? ). What I am wondering is, if I just have too many alterations in the parent theme that I have to transfer to the child theme, that the child theme will take too long to override the parent theme while loading the page so that in the end a visitor might see bits and pieces of the parent theme for a brief moment – which I of course would like to avoid (no offence there ?? I love the Olsen theme for its great aesthetics re shapes etc. – it’s just that I’m planning a blog for kids apps and black doesn’t seem that appropriate for it ?? ).
I might have time to work on a proper child theme tomorrow and will see with how much css of the parent code I will end up. Yeah!

I see the general blessing and curse thing, though I don’t care much about the style. Safety updates bother me much more than a font color. Are there many updates per year? Because that would mean that with every theme update I will have to go through the original CSS and the child css to search for differences re safety changes.

Thanks for the help with the functions code. I also found an alternative for using functions.php without de-registering the style.css first.

Wish me luck!

The number of alterations inside your css file should have negligible performance issues, but then again, it really depends on what you are doing.
For the sake of the example, if the parent theme is loading a background image and you are loading another one, then, depending on your connection speed, you’ll probably see the parent’s image first and then the one you added. This however is caused because images take longer to load, and not because css is slow.

I can’t really suggest anything on the number of updates. We might discover issues and update twice a month, or everything might be fine and not update in a year…
That’s why it’s good to only override what you need ??

And as I said, you don’t need anything for your CSS to load. It’s taken care by Olsen.
No deregisters, no @import inside the css, nothing really ??

Oh, and good luck!

Hallo @anastis,

Thank you very much again for your support!
I’ve tried the whole thing and so far it wasn’t too bad, I think. I just did a preview of the child theme and the main changes (colours, underlining) seem to work.
What I don’t understand is, that e.g. my header/banner vanished and was replaced my the Olsen header. The footer is back, even though I deactivated it. And some changes I made in the top menu (order – with the help of a plugin, deactivating a few pages etc.) aren’t valid anymore. Also, the related posts (Jetpack function) don’t show up.

How can I solve these problems?

Kathrin

Most customizer options are specific to themes, so each theme has it’s own values for the same options.
Child themes, are considered different themes from their parents, so they get their own set of options. So you’ll really need to set those options again.

Having said that, you don’t lose your options when switching themes, you just can’t use them. You can test that’s actually true by enabling the parent theme, and you’ll see that all previously set options are still there.

Wow, it worked like magic – thank you so much for your amazing support, @anastis. I appreciate this very much!

There’s just one thing left: I tried to add a screenshot to the child theme so it would have a preview picture for the WordPress backend. The size is 600×450 and is named screenshot.png, it’s uploaded to the child theme folder (as was described in an instruction). But it won’t show in the WP backend. Anything I could have messed with?

Hmmm… it should pick it up automatically.
Perhaps you misspelled the filename?
Or could the image have some kind of problem?
You could try replacing it with the original Olsen’s screenshot, just to confirm that it works.

For some not apparent reason, Photoshop saved the file as .png but didn’t put a file ending behind it. Now it works!

Now that it is all solved, I’d like to thank you for your amazing support. That was very much appreciated! ??

You are welcome.

We wouldn’t mind if you left a review to show us some love ??

Of course, I did that already. Well deserved!