Thanks Tom. I am glad you thought it concise as I was worried at getting on for 30 mins! As for the Child Theme, it doesn't need to be updated as it automatically inherits 99% of it's functionality from its parent, the main Divi Theme and as long as this is updated the child theme will follow. This 'shell' child theme is just a place where you can put your custom CSS in the style.css file (and possibly some more involved code in the functions.php file - but only if you know what you are doing as this can break your site!).
I am conscious that it's been a couple of months since I posted a new video as I have beem busy building websites for clients. I have had a lot of questions from people unsure how or where to add CSS in Divi and have tried to cover this in some depth in this slightly longer than normal tutorial. I hope you find it useful.
After watching various youtube clips about this sometimes complicated css topic your tutorial is very easy to understand. Your clean English and the approach of clear structure. Thank's a lot!
I've watched quite few tutorials on CSS and Divi which left me slightly confused. Thank you for making it exceptionally clear, informative, easy to follow and full of good useful content. More than worth the time to study your tutorial. Thank you.
Thanks Rebecca. That is really great to hear. I found lots of the content around this topic to be confusing and at times counter-intuitive which is what led me to make this particular tutorial. ☺
I've just watched this excellent video once again and it solved a problem for me. I was having an issue with wanting different coloured hyperlinks on different pages (I am using DIVI and WooCommerce, and it didn't seem to want to work, which was strange?). When you mentioned adding the CSS to page level (or Body Template Settings in my case) something clicked and it worked!! (also using the appropriate CSS class on the correct WooCommerce module). Thanks again!
Hi Jim and thank you for the encouragement! I make these as well as working a long week in my 'day job' but will have some more time in 2023 and definitely plan to start making vids again.
@@divicoaching Fully understand the situation - I was just checking to see if you are still ‘active’! Good news and look forward to seeing your output!
Hey there, I watched all of your videos and it was really good, well explained. I was wondering if you can make a video explaining how to distribute column in tablet and mobile view (like 4 on large screens, 3 onlaptop, 2 on tablet and mobile view respectively). Thanks in advance.
Ok I’ll have a look at doing this. I’ve been thinking about making something on responsive design. 2-3-4 is tricky though as with 3 you have the odd fourth column underneath and it doesn’t look great.
Thanks for such a wonderful video. A question: I have been trying to apply Ken Burns Zoom effect to Divi Full Screen Slider. I need to apply this effect only to the background image but I am not able to find the css class/id for this background image. What happens is that effect is getting applied to whole slide. Can you please help me find the exact css class/id for slider background image?
Hi Jaspreet. You say the whole slide but I am not sure which background you want to target. ".et_pb_slider .et_pb_slide_0" is the base slider background. Is this the one you mean?
@@divicoaching Yes I tried both of these, but effect gets applied to full slide(which includes Title, description etc.) Maybe I'm doing something wrong.
Hi Jaspreet. What you are trying to do is a little tricky. Because it is a background image you need to use some CSS animation of the "background-size" property. This explains the principle but you will have to adapt for the slider. diviengine.com/how-to-add-a-ken-burns-effect-in-divi-without-a-plugin/
Hi Rosario. This can sometimes be a caching issue. Clear your browser cache or try loading the page on an incognito tab. Also try disabling the Divi performance options. You can reenable later. Hope this works for you.
How and when CSS rules are applied can be complicated. Have a Google of "CSS Specificity" and there are a lot of articles. Essentially last does not always win. A more specific selector or one with an !important tag can trump things. Often if you add some classes to make your selection more specific you can get the desired result. A #ID selector will often overrule class selectors as will inlined CSS. Do you have a specific example?
@@divicoaching ok thank you! I’ll look into CSS Specificity. I don’t have any examples, it was just a general question. I just came across your channel and love your content! I’m looking forward to learning more from you. Thank you for your response. 👍
Hi there. First of all, thank you for your great work of explaining things that seems way to complicated to deal with at first sight. After watching your videos, not so much so any more. Take the child themes, for instance; a lot of folks say it's "too complicated" or "you don't really need it" and so on. Well, after seeing your video, I took the time to make one for my site and when testing it, it would change the color of the text and other things I tried. So I consider it a success. However, I haven't been able to make it do what I really want to do; using custom, uploaded fonts on my web site. I've created a Fonts folder in the Themes folder and uploaded some .otf fonts, but nothing happens when I add what I believe to be the appropriate lines of code. Would you consider making a video on this topic? That would really make my day! All the best, Peter
Reading your comment again, all you probably need to do is add in WOFF format as the .otf will likley not be recognised. Try a few other font formats if that dosen't work!
![Working with Custom CSS in Divi: Beginner Guide [2022]](http://i.ytimg.com/vi/k7Vy_MY080I/mqdefault.jpg)
Excellent explainer - clear and concise...Is the child theme updated just as a "normal" Divi theme might be ?
Thanks Tom. I am glad you thought it concise as I was worried at getting on for 30 mins! As for the Child Theme, it doesn't need to be updated as it automatically inherits 99% of it's functionality from its parent, the main Divi Theme and as long as this is updated the child theme will follow. This 'shell' child theme is just a place where you can put your custom CSS in the style.css file (and possibly some more involved code in the functions.php file - but only if you know what you are doing as this can break your site!).
I am conscious that it's been a couple of months since I posted a new video as I have beem busy building websites for clients. I have had a lot of questions from people unsure how or where to add CSS in Divi and have tried to cover this in some depth in this slightly longer than normal tutorial. I hope you find it useful.
this is the best divi css video on youtube!!!
@EN-sz1fb Thank you! I wish a few more people would watch it as I am really pleased with this one. Starting my Divi 5 series soon!
Thank you so much for explaining how 'classes' work!
You are so welcome!
After watching various youtube clips about this sometimes complicated css topic your tutorial is very easy to understand. Your clean English and the approach of clear structure. Thank's a lot!
Thank you. This is exactly why I made the video! It can be a very confusing topic.
I've watched quite few tutorials on CSS and Divi which left me slightly confused. Thank you for making it exceptionally clear, informative, easy to follow and full of good useful content. More than worth the time to study your tutorial. Thank you.
Thanks Rebecca. That is really great to hear. I found lots of the content around this topic to be confusing and at times counter-intuitive which is what led me to make this particular tutorial. ☺
So happy to see you making vids again. Very helpful!
Thanks Tony! I'm pleased to have the time to get back to it as well. Thank you for your support.
Excellent video - I have been using Divi for over a year and wanted to know these details as you have shown with such clarity. -- Thank you
Thank you for your kind words. I am pleased you found this useful.
I've just watched this excellent video once again and it solved a problem for me. I was having an issue with wanting different coloured hyperlinks on different pages (I am using DIVI and WooCommerce, and it didn't seem to want to work, which was strange?). When you mentioned adding the CSS to page level (or Body Template Settings in my case) something clicked and it worked!! (also using the appropriate CSS class on the correct WooCommerce module). Thanks again!
Excellent. It really does take a while to understand what you can use where and how. Glad this was useful for you.
Thanks Paul, always enjoy your videos and good to see you back with another clearly explaining css in Divi
Thanks Spencer. Will try to get back to keep them coming.
Another great job!
Thank you again… 🙏
Great explanation and easy to follow. I enjoy watching your video's.
Thank you. I enjoy making them too.
Hi, will you be doing any more videos for your youtube feed? I find your advice very helpful, thanks a lot.
Hi Jim and thank you for the encouragement! I make these as well as working a long week in my 'day job' but will have some more time in 2023 and definitely plan to start making vids again.
@@divicoaching Fully understand the situation - I was just checking to see if you are still ‘active’! Good news and look forward to seeing your output!
@@divicoaching Fantastic! Your videos are truly excellent and so helpful.
Thank you for a useful tutorial.
Thanks Desmond. I"m pleased you found it useful.
About the Portfolio module, I have categories, and sub-categories, I want to show only the parent categories. what is the method to do it?
I never use this so will need to look! Give me a few days.
Hey there, I watched all of your videos and it was really good, well explained. I was wondering if you can make a video explaining how to distribute column in tablet and mobile view (like 4 on large screens, 3 onlaptop, 2 on tablet and mobile view respectively). Thanks in advance.
Ok I’ll have a look at doing this. I’ve been thinking about making something on responsive design. 2-3-4 is tricky though as with 3 you have the odd fourth column underneath and it doesn’t look great.
Thanks for such a wonderful video.
A question:
I have been trying to apply Ken Burns Zoom effect to Divi Full Screen Slider. I need to apply this effect only to the background image but I am not able to find the css class/id for this background image. What happens is that effect is getting applied to whole slide. Can you please help me find the exact css class/id for slider background image?
Hi Jaspreet. You say the whole slide but I am not sure which background you want to target. ".et_pb_slider .et_pb_slide_0" is the base slider background. Is this the one you mean?
@@divicoaching Yes I tried both of these, but effect gets applied to full slide(which includes Title, description etc.) Maybe I'm doing something wrong.
Maybe you need to apply to all individual slide backgrounds? I will have another look later.
@@divicoaching Thanks!
Hi Jaspreet. What you are trying to do is a little tricky. Because it is a background image you need to use some CSS animation of the "background-size" property. This explains the principle but you will have to adapt for the slider. diviengine.com/how-to-add-a-ken-burns-effect-in-divi-without-a-plugin/
Great job
Thank you. I'm conscious that this one went on a bit!
loved your video
So glad! Many thanks.
after installing the child theme, the mobile menu would become "< d " when opened (insted than a "x") .. any help?
Hi Rosario. This can sometimes be a caching issue. Clear your browser cache or try loading the page on an incognito tab. Also try disabling the Divi performance options. You can reenable later. Hope this works for you.
Want more videos in all about divi advance
Ok will do!
awesome boss
Thank you!
Why would Divi apply the .et_pb_text class after you have over-written the class with .my-text?
How and when CSS rules are applied can be complicated. Have a Google of "CSS Specificity" and there are a lot of articles. Essentially last does not always win. A more specific selector or one with an !important tag can trump things. Often if you add some classes to make your selection more specific you can get the desired result. A #ID selector will often overrule class selectors as will inlined CSS. Do you have a specific example?
@@divicoaching ok thank you! I’ll look into CSS Specificity. I don’t have any examples, it was just a general question. I just came across your channel and love your content! I’m looking forward to learning more from you. Thank you for your response. 👍
Thanks Jacob. More on the way soon after rather sporadic output in the last 6 months or so as lots of other stuff getting in the way of making vids!
Hi there. First of all, thank you for your great work of explaining things that seems way to complicated to deal with at first sight. After watching your videos, not so much so any more. Take the child themes, for instance; a lot of folks say it's "too complicated" or "you don't really need it" and so on. Well, after seeing your video, I took the time to make one for my site and when testing it, it would change the color of the text and other things I tried. So I consider it a success.
However, I haven't been able to make it do what I really want to do; using custom, uploaded fonts on my web site. I've created a Fonts folder in the Themes folder and uploaded some .otf fonts, but nothing happens when I add what I believe to be the appropriate lines of code. Would you consider making a video on this topic? That would really make my day! All the best, Peter
Hi Peter and thanks for your kind words. I will have a look at this as a number of people have asked for help in working with fonts.
@@divicoaching Happy to hear that. Thanks!
Reading your comment again, all you probably need to do is add in WOFF format as the .otf will likley not be recognised. Try a few other font formats if that dosen't work!
@@divicoaching Aha, I wasn't aware of this. Thanks, I'll try soon again...
And also when you choose a font in Divi there is an optuon to "upload". Also worth a try!
Very nice! You are a good teacher. I suspect you might do that for a living?
Thank you Steven. Actually no, I build websites with Divi for agency clients.