WebCMS Posted January 15 Author Share Posted January 15 3 hours ago, Jim M said: When you create a Child theme, the Parent theme's CSS files will now be in the child. This means that if you make any modifications to the Child's theme CSS files, you could be removing the parent theme's CSS. You may wish to create a CSS file called "parent" in your Parent theme and "child" in your Child theme. You can then use CSS as you are wanting to here. In the example above, the white color is in my parent theme CSS file and the black color is in my child theme CSS file. I am able to use cascading just fine 😉 Hi Jim, I'm not understanding this 😐 Creating a child theme is just a regular theme and assigning the Parent1 theme as its parent (that's what I understood so far). Now Lavender2 is listed as Parent1's child under Themes: I'm not dealing with any CSS "files" as my hosting is on IC cloud (maybe the custom CSS gets written to disk files after editing in the editor for caching and performance). I'm not modifying any templates. For themes, there is a Theme > CSS > custom.css editor where we can type our custom CSS. It is commented on the top of the editor - * This file is for your custom CSS. * This file is not modified or overwritten during upgrades. For testing purposes, I added most of the CSS in Parent1 theme's custom.css and added some minor overrides in Lavender2 theme's custom.css (all other themes have full CSS in their custom.css with no parent and their custom.css approach works fine). The issue is when I assign one theme as the parent of another theme to consolidate all the custom CSS into Parent theme's custom.css - it doesn't render Parent1 theme's custom.css (renders only the child theme's custom.css). As far as I know, custom CSS should get marked up at the end of all other CSS in the <head> like so - <link href="parent.css" rel="stylesheet"> <link href="child.css" rel="stylesheet"> Since child.css was marked up at the end, whatever is defined in it should take precedence and override the same CSS if it exists in the parent.css that was marked up before. Am I correct in using the custom.css and this approach? Your documentation on themes does not cover on how to use parent-child custom CSS and I'm lost. Please advise... Link to comment Share on other sites More sharing options...
Jim M Posted January 15 Share Posted January 15 11 minutes ago, WebCMS said: The "file" is what you are seeing there in your screenshot. "custom.css" is the custom.css file. These are all "virtual" files as it really is just stored in a database but I used the word "file" to simply relate it to a regular instance most people are familiar with. Both themes you named these as "custom.css" (or used the default provided CSS file). This is why your CSS is overwriting as it is intended. You would want to create a new CSS file (scroll down to the bottom -> click new -> CSS File). Then name it something you'd recognize when in the child theme, I suggested "parent" to be in the parent theme and "child" to be in the child so you understand. 11 minutes ago, WebCMS said: As far as I know, custom CSS should get marked up at the end of all other CSS in the <head> like so - <link href="parent.css" rel="stylesheet"> <link href="child.css" rel="stylesheet"> There is no need to include the CSS. Theme's CSS are automatically included on all pages. Gill 1 Link to comment Share on other sites More sharing options...
Recommended Posts