So it turns out the bits of CSS that you play around with are not called "attributes" as I call them in this video! Proper developers call them "selectors"... I've put together more info on these "selectors" as well as everything featured in the tutorial here: www.wpeagle.com/enhance/themes/wordpress-custom-css-tutorial/ Enjoy!
Late to the party viewing this but just what I was looking for and really clearly explained. Perfect for understanding DIY custom CSS tinkering, rather than full website development. Thanks! BTW (if you haven't found out by now) 'em', pronounced 'm' is the size of a letter 'm' and therefore nice and intuitive.
This was so useful! I look forward to watching more of your vids :-) I am a total TOTAL beginner with Wordpress and CSS; I've been really struggling to get my head around how I'd go about making the images on some of my pages have an overlay that blurs the image and shows text when the mouse hovers over it - no luck yet. Everything I've come across online uses Elementor - without this, am I still able to achieve my overlay? I have Wordpress's Premium plan and use a theme ("Gazette") and have done the odd Additional CSS here and there to make things disappear etc. which has worked just fine...
You can also use the "Custom Codes" plugin, with SCSS and emmet support. It also has handy mobile breakpoints tabs to add CSS for specific screen sizes.
HI. I use the elementor. The elementor or another page builders have a lot of functions to manage the website. What are the advantages to use the custom css in this case? Thanks. However the video is great and helpful.
Is it worth registering a new website ( Im buying stock and selling it on my website) onto google business? If yes will this help with getting more visitors ? Thanks
There is also the CSS Hero plugin for easy editing of all CSS elements of Wordpress sites. Currently have a sale... $19 for one site license - $39 five sites, and $79 for up to 999 sites. This is per year licensing, but may have a discount if you renew...
Hi Alex, Thank you so much for the helpful information you share with us. I have a little problem. After the changes I made to CSS my site first loads a big mess which is probably the original CSS and after a second it moves the parts of the mess and shows the site as I wanted. How can I fix this.
@@WPEagle I am using Theme "Twenty Twenty" which has huge H1 tags. So I modify font size for H1 in Customize -> Additional CSS and it looks fine in Preview and final pages (But the giant H1 font is still there when I go back and edit the page) Hope it makes sense. Would love to show screen shots :-)
Hey Alex this is your big fan from India... Great video.... Thank you so much for this tutorial, it's very useful... I have an question... I changed font style in my website, and it's working good.. but how can I add CSS for new font style?
What would of been helpful would of been if you had shown us how to adjust image position as I find my images are not at the right position either in a slider or in a post
So it turns out the bits of CSS that you play around with are not called "attributes" as I call them in this video! Proper developers call them "selectors"... I've put together more info on these "selectors" as well as everything featured in the tutorial here: www.wpeagle.com/enhance/themes/wordpress-custom-css-tutorial/ Enjoy!
Late to the party viewing this but just what I was looking for and really clearly explained. Perfect for understanding DIY custom CSS tinkering, rather than full website development. Thanks! BTW (if you haven't found out by now) 'em', pronounced 'm' is the size of a letter 'm' and therefore nice and intuitive.
This was exactly what I needed! I've been trying to figure this out for a few hours before I came across this video. Thanks heaps!
Alex, this was a great video. I have tried to edit my CSS code with no luck but this video showed me where I was going wrong. Thanks a million.
Thanks Bob!
This was exactly what I need, I have problems all the time with themes that's almost as I want but there's small details I want to change. Thanks!
This was so useful! I look forward to watching more of your vids :-) I am a total TOTAL beginner with Wordpress and CSS; I've been really struggling to get my head around how I'd go about making the images on some of my pages have an overlay that blurs the image and shows text when the mouse hovers over it - no luck yet. Everything I've come across online uses Elementor - without this, am I still able to achieve my overlay? I have Wordpress's Premium plan and use a theme ("Gazette") and have done the odd Additional CSS here and there to make things disappear etc. which has worked just fine...
You can also use the "Custom Codes" plugin, with SCSS and emmet support. It also has handy mobile breakpoints tabs to add CSS for specific screen sizes.
Great video Alex!...hope to see more of these as they’re super useful. 👍🏻
Just a heads up... Firefox has the same inspect tools as chrome.
This video was very helpful! Thank you!
HI. I use the elementor. The elementor or another page builders have a lot of functions to manage the website. What are the advantages to use the custom css in this case? Thanks. However the video is great and helpful.
With a page builder you probably don't need custom css...
@@WPEagle I changed the header and navigation bar with custom css . www.thesuperfood.net/
Thanks Alex. That was very useful.
Is it worth registering a new website ( Im buying stock and selling it on my website) onto google business? If yes will this help with getting more visitors ? Thanks
Hello, can you make a tutorial video about hovered icon with background pulse effect. Thank you!
Clean and easy for me. Thanks!
Great to hear!
Thank you for this 😊
Alex, I took on board what you said on my blog and I updated it.
Finally this tutorial is here!!
Thanks for this Alex. Do you have customs css for removing product count in oceanwp?
Nice video, Alex! Side question - would you recommend Kingdom or Storefront? What's your favourite theme and why?
The video was useful to me , i was want to increase the height slider in my website and it worked thumbs up👍
There is also the CSS Hero plugin for easy editing of all CSS elements of Wordpress sites. Currently have a sale... $19 for one site license - $39 five sites, and $79 for up to 999 sites. This is per year licensing, but may have a discount if you renew...
Pls make a video on css classes which is worked on elementor...
If you or a developers have tons of changes, is it better to paste the new codes from inside the theme codes? Instead of in additional css box?
No. They would be lost when you update the theme 😦
Hi Alex, Thank you so much for the helpful information you share with us.
I have a little problem. After the changes I made to CSS my site first loads a big mess which is probably the original CSS and after a second it moves the parts of the mess and shows the site as I wanted.
How can I fix this.
Maybe clear the website cache?
@@WPEagle I tried it, but it did not work, do you have another idea?
Gal I don’t. Reach out to the theme dev support for help
So how do I add the custom CSS in a way that makes it apply to the content editor as well? It seems the styles are not loaded when editing pages
It should do. Are you using a page builder like elementor?
@@WPEagle No just vanilla WP ver 5.5
@@WPEagle I am using Theme "Twenty Twenty" which has huge H1 tags. So I modify font size for H1 in Customize -> Additional CSS and it looks fine in Preview and final pages (But the giant H1 font is still there when I go back and edit the page) Hope it makes sense. Would love to show screen shots :-)
@@gandalftheblack560 You can share screenshots with something like skitch.
@@WPEagle OK looking into skitch ... 2 sec
This video saved my life ahhh thank you!
Hey Alex this is your big fan from India...
Great video.... Thank you so much for this tutorial, it's very useful...
I have an question...
I changed font style in my website, and it's working good.. but how can I add CSS for new font style?
You can generally choose fonts in your theme options
@@WPEagle i did that.. but my question is how to add CSS for new font style..
@@jigneshbhanushali9220 That's more tricky.... torquemag.io/2017/12/custom-fonts-wordpress/
@@WPEagle ohk.. Alex... Thank you...
Hey Alex, I have the Electro2 theme on my website but I would like to change the style of the header or customize it. How can I do that?
Brilliant, very useful, Thank you
great video... loved it.
What would of been helpful would of been if you had shown us how to adjust image position as I find my images are not at the right position either in a slider or in a post
Hey- sorry, try using float, padding and margin to move them. If you link to an example or email me I’ll try and help you out.
@@WPEagle thanks, appreciate that
Thank you
Thanks so much!!
Thaaaank you for this video ^_^
I knew you were british just from the thumbnail, I dont know why haha
Thanks! I guess you’re taking the piss out of my teeth 🦷 🙌
Thanks Alex! Also based on your review of my website zenofall.com , i made a lot of changes, i m still only 3weeks old.