How To Customize CSS On A WordPress Website - Beginners Guide
HTML-код
- Опубликовано: 13 июн 2024
- How To Customize CSS On A WordPress Website - Beginners Guide
If you have a website, then no doubt you have wanted to change something that there isn't a setting for. That is where CSS comes in.
In this video, I will show you how to find the right CSS classes and make the changes that you want on your website.
More Info www.wpcrafter.com/csshero
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter.com/spectra
🟡 Elementor -- www.wpcrafter.com/elementor
🟡 Beaver Builder -- www.wpcrafter.com/beaverbuilder
🟡 Divi -- www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter.com/hosting
🟡 Cloudways -- www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero -- www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link. 
Хобби
COMPLETE GOOF ON MY PART! Its tough when you hit the record button and you don't read off of a script. I make mistakes ALL the time, but don't judge me! So I said that #333333 is black when #000000 is black. Sorry folks!
It's OK Adam
Exactly what I was looking for. Thank you.
Gray! The new black! :)
A nice shade of gray is #262626. I use it for a background when I do neon hover effects. Or neon text effects.
He looks like Varys from Game of Thrones.
Hahahaha you Right
This is just what I needed. Easy to understand and with great results. You hit the nail on the head! Super! Thank you very much!
A great one Adam. I have been adding CSS for some time now, but you have just sharpened my skills. Thank you.
Thank you sososo much! I've been searching for such tutorial in a while and am already enjoying the results:)
Thanks for running me through this Adam. Such an awesome tutorial and very easy to follow. Thank you.
You are a terrific teacher!!! Love this firebug explanation!
Thank you Toni & thanks for watching.
dude you still rock i learn so much from your vids - i have watched many more than once - this is GOLD - keep it up Adam
Thank you Countermeasure Security Engineering & thanks for watching.
GREAT VIDEO!!! Exactly what I was searching for..... thank you soooo much Adam
This is such a huge help. Thank you for such great content!
Amazing! Finally a video that teaches CSS clearly. You are the best. Thank you 🙏
Wow this made my day! Thanks a lot!!! Eye opener for me! It changed my life!!! thanks for your tutorials!!!
Dude THANK YOU!!! What an amazing and helpful presentation!!!
Great job. Congratulations. Very clear and simple. Thank you very much.
Thank you so much for this great tutorial!!! So happy with your excellent and clear explanation how the CSS tweaking works! With this I finally managed to solve some bothering issues with my site. Thanks again!
You're very good explaining. I understood absolutely all. Thanks!
To the point and extremely helpful like ever. Kudos!!!
This video is a gem. You made it look so simple.
Excellent video Adam! I've been struggling with css, and hoping you would do something like this. Keep em coming!
I've tried a lot of other you tubers, but you make it so easy to learn. Thanks for what you do!!!
Thank you very much, and I hope to do more tutorials like this because I know it's hard to fully grasp customizing CSS based solely on this one video. Perhaps it could be a good video series that I can create a playlist on, and each video could be about using CSS for specific elements.
I'd be all over that!! 👍
Voting this up! Yes, please! For example, focusing on widget items etc that trace back the inherited elements to its parents. Also, some best practices on what to change and what not to change. (I assume some things on the website are best left alone!)
I just wanted to write and say that your videos have been INCREDIBLY helpful! Thank you!
Your welcome. Thanks for watching.
You helped me solve some design issues that I could not before your video. Thank you very much!
Love you, thank you some much for this video, keep it up!
Thank you Fr0zenFire & thanks for watching.
You doing a great job. A lot of useful materials. I learned a lot from your videos. Thank you for your efforts to bring us such kind of knowledge. Wish you good luck.
You're welcome! You're going to see more in-depth videos like this hitting the channel next week.
This is a great tutorial - thank you so much!
Really helpful, thank you for posting
You're welcome Kevin Kingsley! Thanks for watching.
Awesome! Learnt a lot from your video. Thank you.
Your teaching is awesome!!! I thank you so much. With this class, you`ve saved me from fake teachers on the Web.
thank you some much for this video. was very helpful.
Thank you very much! love you!
So much clear speech to understand thanks
Thanks Adam. You're a great teacher. Thanks for the knowledge.
I'm glad this was helpful London Night Press and thanks for watching.
Great tutorial. Thanks very much.
this video was amazing so helpful.
a video from 5 years ago help me now. wow!
tnx.
THANK YOU SO MUCH!!!
Really nice! Thanks a lot!
You're welcome Renato Silva! Thanks for watching.
Such a great vid, thanks.
Thanks for this CSS training. Very Well Explained. Make more Videos on CSS ...
Thanks for watching AVIN EPIC MEDIA!
Thank you so much!!
Hi Adam, I came across your tutorials and they are great thanks. I have a question if I may? At 20:14 in the style section of firebug it shows font-weight: 300; but it has a strikeout through it. What would typically cause that strikeout? Thanks in advance and keep up the good work!
Thanks for this informative video. It was really, really helpful.
This is the definitive video that changed my understanding of safely and properly developing a website. Do not miss this video if you are new to CSS. It is clear and correct and totally illuminating.
Hi Adam, thanks for this tutorial! Is there still a need to install Firebug nowadays instead of using the built-in inspector?
Thank you sir. I've learned so much from watching your videos
the best teacher ever. thank you
Very helpful!!!
Thank you 🙏
Hi Adam, thank you for this awesome and easy to follow explanation. Do you have a video which explains how to make changes only to the page you are working on?
I don't :-( but if you are using a page builder, most have a place to put CSS that will be applied to only that page.
Can you arrange selected columns in different screen views in css and does css hero allow you to in their plugin?
great explanation. thanks
Nice work!
Great video !
Great tutorial!
Can you tell me, how to change the width of a specific column? I managed to do it within the inspector tool, but didn't manage to put it into custom css in a way, that works.. The only thing I could change there, was the width of the text in that column, but not the column itself.
Would be great to get some advice there. =)
Very interested learning more about CSS Hero and how to purchase from you?
hello can you tell which theme you used for desiging this website mycms?
thanks a lot ♥
YOU ARE THE LIFE SAVER
I'm glad this was helpful Parisa Suchdev and thanks for watching.
Just great video
Hello adam very educative video. I am using astra free theme with elementor but i want to make my header transparent. How do i do that?
The free version of Astra doesn't have an option to make the header transparent. Although I do think they are going to added to the free version of the theme.
how to add custom css for multiple pages. additional css box is for all pages or just for home page??
Thanks bud
That's another smashing tutorial of yours Adam. Many thanks. We really do learn a lot with you, especially WP newbies like me.
Now is there a way to know Elementor's selectors names, I mean does Elementor have some css style sheet ?. Hope that's not a dumb question :)
Unfortunately there isn't without using a CSS selector tool.
I really like this video and wanted to start imediatly. I added Firebug Lite to my Chrome and opened my wordpress website. however, when I wanted to detect the CSS on my page, I got a pop up on my screen from Firebug what says "it seems that the page was opened before Firebug Lite was enabled. It will (hopefully) load after reloading thi page." I reloaded my website a couple times but still get this pop up. What can I do to make it work on my wordpress?
Thanks
thank you for this video, I have problem with my website which does have save button or publish button in customize, if I make any changes I am unable to save the changes due to this issue, Please can you help me out to get save or publish button in.
thanks
Thanks for the great tutorial, Adam! I'm pretty good with CSS and am comfortable editing through the WordPress customizer. I definitely concur, however, that CSS Hero is a major time saver!
When deploying with client sites, is there a way to lock it down so clients can't go it and edit?
Yes there is a way to export the generated CSS and save it to a CSS file. Then you can deactivate CSS hero and use it again.
You are a genius
I think my theme has some restrictions because I did everything you described and didn't manage to change colours I wanted to change. Do you think it's possible since there is a pro version that costs 59$.
Maybe they made sure we can't just change appearance in the free version.
such an interesting topic!
Yes and one that everyone needs to know at least a little bit about.
Impressionant !
Hi Adam, that is so much for sharing! I was wondering if editing the CSS through the child theme would maintain the changes even when the child theme updates? And similar question with CSS hero, will that maintain all your changes even if the child theme updates?
Thanks!
Child themes never get updates. So its safe.
You're the man
good job!
can you please answer this? can I just install the plug in then after Im done customizing, i disable it? also I was wondering what if there are updates of the theme? will this overwrite our css code ?
Its worked :)
Hi? after watching this, i wonder if you can help with a mega menu.. i have a drop down after changing a theme days ago but didn't know had no suitable menu,, i have over 900 products,, lost my widget which offers full screen with images,, any idea how to fix this? plus new menu won't register in WP menu , but i accidentally linked it to product categories,, so it pulls products directly.. though ,i am looking for help on CSS.. thank you.
Can you tell us what other extensions are good to use?
Hi Adam how do you isolate changes to one page
your tutorial are cool. luckily for me I learnt HTML, CSS, PHP and MYSQL first before coming to WordPress. good job you are doing sir
Smart.
great video
quick question
i have a site i made with divi can everything you showed in video be applied?
i have been trying to move some text after watching all of this video i still cannot get it to move even using css
when i posted in ie text-align: center;
doesnt do anything
Yes it can.
Game-changer! May your toast always land butter-side up...
Very nice video about using css in wordpress
Thank you Ammar Tehsin & thanks for watching.
Could you please tell me the css code to hide my name, not the date, in customize? Do have a video wherein you explain it?
How come I don't have "editor" under appearance? How do I find my style.css?
cool......
keep on Wpressin....
Thank you Ante & thanks for watching.
Thanks for another great video Adam! I'm currently working on a new site using the WP Twenty Seventeen theme with a video header. The problem is, when you use a RUclips video in the header it doesn't allow the video to be full width. Could some css take care of that issue?
Unfortunately my guess Kent is that the video is stopped within the container area, which means it's more a structural problem. I'm not sure if CSS is going to help you in this situation. Is there a reason you don't instead use a page builder like Elementor which is free and you can easily have background videos that are full width.
Actually, I am using Elementor thanks to you, but I'm not sure I can recreate the parallax effect that Twenty Seventeen offers.
Yes you actually can implement the parallax effect in Elementor. There isn't an option therefore it, but I have seen several write ups online on how to do it. Have you joined the Elementor Facebook group? We talk about that type of stuff there all the time.
I haven't joined yet but will in just a moment. Thanks!!!
Great video,
Can you help me to put a link in the product page in Woocommerce under "Add to cart" button?
You may need a plug-in to be able to do that.
Thank you for your video. it was helpful. I hope you or someone can help out. I am looking at adding Custom CSS via a WordPress builder. I am looking to add a Direct Chat Link with css open in new window (resize 550x450) code to a button. Here is what code I found : New Page.
DO you think this is right?
Hi Adam, at the point you changed the size of a menu items...my question - is there option to change the size or padding between them just for one or two items in primary menu?... i have social icons on the right side and primary menu on the left, i want not to have padding between social icons. :)
Oh yes of course, I just didn't adjust that setting. That will be the padding between the items. I could have just as easily, and probably should have, demonstrated that.
First of all your content is amazing!!
1) Will the custom CSS on the left side of your screen disappear if my theme is updated?
2) I used Firebug Lite, I click on Inspect, but I don't really see any proper CSS codes on the right since there is a note below saying "The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions. more..." What do I do here?
Your cousin CSS will stay there even if you have a theme or a WordPress update. Regarding your second question, I've never seen that before.
Wow, you are a straight beast with these videos. Amazing free training you are offering. These videos should not be free, the very least you should charge $5-$10 for your training.
Thank you Tuan! I am trying to put forth a solid value proposition here on RUclips to in hopes that people purchase whatever tools through a link on my website in order you get access to my paid training.
Hi Adam. It seems like it doesn´t work on my website. When I click the firebug it says that page needs to reload. Then nothing shows. Any recommendation for this issue?
Good afternoon Adam, ¿the changes you make with css hero do not affect when we update, divi, woocommerce and wordpress, as with the childtheme that serves not to modify the code that we set? Great video.
Yes the custom CSS that you create will say whenever you update your theme.
I did not understand you, it changes when I update or it stays fixed
It stays.
tHANKS
If it more complicated like mouse over image effect?
How do I edit WordPress CSS on an actual text editor and see the changes live?
Firebug lite for google chrome is not working. Can you recommend something else?
What's the difference between firebug and F12 on chrome tool developer?
another great video from you, i appreciate it, thx.
just was wandering what advantage fire fox has over google for inspecting the page. thx again
There is no real benefit, I do know that firebug works better for Firefox.
maybe i am wrong, for example at 19:30, when you click on a part of the page, you can see the related codes for that element. to me, google, only shows when i hover over the code, it shows the related element to that code. please correct me if i am wrong
Hmm, I think I am using Chrome for the video as well. You are using Firebug?
i do not use any, as i am not comfortable with eithr of them, lol, but it is true.
since i am not sure i am asking,( as i removed the firebug from my computer).unless i reinstall and check them simultaneously for comarison. but your opinion has priority over mine. website is a full time job, but i do not have this option
How can I edit my website to have desame front page view like hotnewhiphop?
Hello, I tried adding firebug to firefox, but I saw a notice that the extension isn't being maintained or developed any longer and it was suggested to use firefox built-in devtools instead, so I backed away from that one. Then I installed firebug lite for chrome, but there is a message in the box that says "results may be inaccurate because some stylesheets couldn't be loaded due to access restrictions." I'm using storefront theme for woocommerce, but it doesn't have any font or size options without adding one of their extensions. I'm trying to change the logo font and size in the header.
Thank you for the tutorials. They are helping me get over the fear of not knowing what to do or how to do it.
You should be fine.
firebug only shows the css style code where it says css next to HTML in firebug over other websites. Doesn't show anything under style on the right box as it does for yours. Im checking another website by the way. But what do you thing could be the reason?
It should be exactly how I show in the video unless the website is being viewed in an .