Hello,
I am wondering what’s the difference in using Child, Custom CSS and Additional CSS as they’re available in creating a Child from a Parent theme (php files), using Custom CSS with SiteOrigin plugin and the general WordPress version of Additional CSS.
I’m trying to find which method would be better for myself, as I want to adjust SiteOrigin North theme internally, but would like the changes to stay as it is when updating the parent theme (hence I am using the child theme).
But when I want to modify something particular like a text on the website using SiteOrigin’s Custom CSS, although it works, I tried moving that code into style.css child theme but it doesn’t reflect the changes (I must be doing something wrong here?).
Examples: Modifying the button size, modifying the header, footer, etc.
Is Additional CSS and Custom CSS the same thing? Where in the php files reflect those changes?
I’ve seen tutorials using child theme to make changes within style.css (like turning a text into pink through php file) but it’s not working for me (I’m changing more than the text too, such as I am adding a SiteOrigin button on a page but not onto the customize theme thing).
Unless the SiteOrigin widgets don’t work when you move them into style.css child theme?
Much appreciated!
Hi, thanks for reaching out.
All of the methods described are update safe.
Custom CSS, Additional CSS, and child theme style.css all enqueue at different places in the document head. If you’re working a lot with Custom CSS, it’ll be helpful to inspect your changes using the browser developer tool. You’ll then be able to see when rules aren’t taking effect due to the cascade https://stackoverflow.com/questions/2406884/in-css-what-is-the-difference-between-cascading-and-inheritance. You can usually resolve cascading issues by increasing the specificity of a rule https://www.w3schools.com/css/css_specificity.asp or using
!important.Additional CSS is the core WP field. It’s outputted into the document head in an inline style tag. Custom CSS is the location for SiteOrigin CSS. Styles are located in a stylesheet in the uploads folder, that file is enqueued in the document head.
If a rule isn’t taking effect you’ll need to troubleshoot the problem by inspecting the HTML tags using your browser developer tool, see which CSS rules are taking effect and adjust your rule accordingly. See my third paragraph above about the cascade and specificity.
Hi, thank you for replying!
By browser developer tool do you mean like Firefox Developer Edition or perhaps Google inspect element/page/frame source? I have been recommended in the past using Firefox Developer tool when I used to use Dreamweaver in helping a company to fix some links and images on their website, just basic CSS nothing more advanced.
Let’s say I decided to fully make the changes within the child theme style.css, and edit under “=Theme customization starts here” by moving the Custom CSS (SiteOrigin) and from Additional CSS (WP) to there, there won’t be any problems once I’ve troubleshoot the problem after inspecting the HTML tags?
Is it also fine to duplicate a php from the parents theme and copy it into the child’s theme? When loading the style, it won’t duplicate the style and rather choose to load the child theme primarily over parents theme?
Thank you, I’m learning a lot.
Hi, yes, Google Inspect Element will open the developer tool/extension available in all browsers.
If you moved all of your rules to your child theme you’d need to check each rule to make sure it’s still functional as it’ll be in a new location in the document head.
I can’t say with copying PHP into the child theme without investigating which PHP. In most cases, if the function is wrapped in a check to see if it exists then you can re-use the entire function in a child theme https://www.php.net/manual/en/function.function-exists.php.
OK, so I tested out some CSS codes. I have moved footer code into the child footer php file which works correctly.
I’ll have a look around and troubleshoot how it can recognise the codes within css.style php whiles using the Google inspect element.
Thankfully I don’t need to add functions. Are functions referred to what we see as options when we customize the website via WP > Appearance > Customize where it shows a list of tools on the left side bar?
Thank you!
I’ve figured out where the Additional CSS goes, it’s within index.php but I cannot view it, shows “Silence is Golden”, I assume no permission is set for someone to configure it. So I’ll use inspect element to check out what rules make the code work.
Hi, thanks for your reply.
Custom CSS can be added to:
Appearance > Custom CSS
Customize > Additional CSS
Child theme style.css file
CSS shouldn’t be added to the index.php file. If you can let me know an example of a CSS rule that isn’t taking effect I’ll try to point you in the right direction.