HomeХобби и стильRelated VideosMore From: Greg Narayan

Modify Theme CSS with Inspect Element - WordPress

369 ratings | 65070 views
How to edit the CSS on your WordPress theme using Inspect Element in Google Chrome. Learn how to change colors, fonts, widths and more. Make a blog: https://www.youtube.com/watch?v=cC4XToEP1Xk If you have any questions, just post a comment. Created By: Dear Blogger
Html code for embedding videos on your blog
Text Comments (126)
dextori (1 month ago)
Does this require wordpress premium or some other plan? Can I do this on the wordpress.com website? VERY UNHELPFUL, DISLIKE
Greg Narayan (1 month ago)
Only works on Wordpress.org, get off .com we have a good Wordpress migration video.
Ellie Snap-D (3 months ago)
I couldn't find a way to edit my page title, thanks to you, and your clear explanation, I found a solution. Thank you very much. Elaine.
GODLY CUMUCK (5 months ago)
Just curious how do you replace a text? For example, let's say I wanted to change "good" to "bad". Do you think you can give me the code or whatever to do that? I've been having trouble finding a tutorial. Btw, this is for stylebot I'm asking about.
Gamer Source (6 months ago)
Hi,bro. it doesnt response. I copied as you did exactly,and there is nothing changed . What is the problem with mine,plz?
Christopher Sewell (8 months ago)
Not to do it cause it slowed them to steal ur money
Christopher Sewell (8 months ago)
I did thi s and it aloud u to steal my money nice try
Product Review (8 months ago)
Can you please show how to view in full page
Reno van Zanten (2 months ago)
aet9rat6 (10 months ago)
Thanks, this helped me
Alma Mancaku (11 months ago)
you are amazing :) :) very simple and i did some changes to my website and i'll try some more...many thanks it helped alot
Bilal Shafique (11 months ago)
Bro How you create theme option in appearance ???????????????
kenmercermusic (1 year ago)
Thanks buddy! Nice video!
Web Builder (1 year ago)
I am trying to remove a button (call to action) from the front page.
Monica Andhare (1 year ago)
Hi Greg,Can I enable Theme Option in Syndey Theme?
H B (1 year ago)
hello, I have no Theme Options how can i change in editor, or how can i have Theme options?
Harold A (1 year ago)
thankyou thankyou thankyou I didn't notice the difference between periods and pounds signs loool
Andy Wolfe (1 year ago)
thank you so much!
D excel (1 year ago)
How do I delete text that is in the original text?
D excel (1 year ago)
Great guidance!! Thank you
C4Depot (1 year ago)
WOW! Thank you, thank you, thank you!
Brag Bhan (1 year ago)
after change element can i do ublic it ? example - when i chnage no of like in facebook by element changing then after change no of likes can i do public it ?
Sam Smith (1 year ago)
Very nice and helpful tutorial !!!! Can you make one about editing a theme , like puting self made banners into wordpress themes ?
How do I change the pictures?
LyionOfficial (1 year ago)
does anyone know that you can just do Ctrl-Shift-I instead of right click?
Soundfeet Marketing (1 year ago)
My [#footer .container] edits has been working very well. Thanks for the video. However my [element.style] edits don't do anything. Any advice?
Kay Cam (1 year ago)
How do you get customers?
Ellie Snap-D (1 year ago)
Thanks a lot, your video helped me to edit and improve the text on my home page.
Enes Korkmaz (1 year ago)
Greg thank you. I would like to edit the HTML-codes but I cant find the HTML-pages from FTP. I searched in phpmyAdmin also not find. Do you know how we can do that?
jw gifts & tips (1 year ago)
can i use this method to change summary posts to full posts?
Summer Smith (2 years ago)
Idk if you or anyone can help me but i need help with modifying the menu of my current wordpress theme. The theme is called Photo Perfect (free version)...It currently displays a menu at the top where you have to toggle it open and closed and I'd like all the menu items to be spread out horizontally at the bottom of the header and then be able to hover over so any sub menus display automatically underneath. I'm very new to the coding stuff and i get confused when I'm trying to correct something without any sort of guide i can follow. I was able to locate the coding for it thanks to this video and I messed around with it but wasn't able to figure out how to get it to do what i want. Any help would be most appreciated.
Greg Narayan (2 years ago)
Hi, thank you! I'm helping out in our new free forum: https://goo.gl/06jvMb ✅ 📈 😀 please post here for any and all free WordPress help! Thanks!
Summer Smith (2 years ago)
Here's a link to my website for a better visual of what I am talking about... http://www.smileyrileyphotography.com/
Cori Leigh (2 years ago)
Thanks for this video Greg... all these tutorials are helping me so much to expand my knowledge. Your easy to learn teaching style is fantastic!
Timothy Myers (2 years ago)
You don't have to inspect element on the whole page and then drill down. If you right click on the title and go to Inspect Element it will take you right to that element. Child themes are NOT old hat! Child themes is an industry practice. Pretty cool until your theme developer updates the theme and your styles are overwritten. You can change things in the Developer Tools. So you can just type green into background color of the body element and see it in the browser without having to go in and add it and save it and refresh the browser every time.
Michael Breslow (2 years ago)
I disagree with your saying not to create a child theme. If you don't, and you make changes to your Style.css of the main (parent) theme and that theme is updated, you have a good chance of losing all your modifications. If, however, you create and use a child theme, any changes or updates to your main (parent theme) will not affect your site.
Greg Narayan (2 years ago)
never chop up your main style.css file. use a custom css screen. some themes just work better with child themes than others.
Ascension Light (2 years ago)
Thank you ..you probly just saved me $300 ! gonna try this now! hi 5! LOL
Greg Narayan (2 years ago)
amazing! :))) $$$$
Joe Verzino (2 years ago)
I want to remove the photo in the header. I do an inspect element and I get rid of the photo, but it is only good for this instance. Is there a way to make it permanent here/
Tony Hickey (2 years ago)
Very helpful Greg! Thank you!! :-)
jokinra (2 years ago)
Well, I learned some very usefull things to apply to my designing. I have already sorted some things that were doing my head in. Thanks Greg!
Conrad Foote (2 years ago)
Hello Greg, I would like to know how to take a line of icons out in my website. Can you give me some guidance please?
Conrad Foote (2 years ago)
OK thank you Greg, I'll have a go! Got dreaded white screen for 3 days last time though!
Greg Narayan (2 years ago)
+Conrad it's tricky at first, i'd tell ya but it varies based on your theme! just know that there is something very exact you can find and paste for every fix, you just need to find it and do some trial and error.
Conrad Foote (2 years ago)
Thank you Greg, I'm not sure what I need to copy into CSS manager in wordpress.
Greg Narayan (2 years ago)
+Conrad i'd use inspect element to find that line in the HTML of the left, then set the CSS selector for the line to display:none;
Grant Webb (2 years ago)
Can you provide a tutorial on repositioning a video on page as well as creating some padding around the video please?
Greg Narayan (2 years ago)
+Grant Webb sure - for now use site origins page builder to setup a page, then paste the video code into a text widget, and drag the widget around. that's how i would do it for a quick fix.
Grant Webb (2 years ago)
Very easy to understand! Thank you Greg. Do you have an email address you might share?
Greg Narayan (2 years ago)
+Grant Webb yeah but i miss almost 100% of email questions these days :( video comments here are best!
Morten Lystad (2 years ago)
Thanks for a great video:) But could some explain for me how I can find the correct file to edit the layout appearance - such as the file where the html coding are located... I have some Themes that I would like to take away "modules" and add other stuff, but can not find where to do this in my FTP...
rothaar (2 years ago)
Thank you so much for this! I've finally understood how 'inspect elements' works and made several changes within a few minutes. I don't know CSS so this is a massive help for me. :-)
Tanmoy Singh (2 years ago)
Very Useful Video
Montana Black (2 years ago)
when ever i try to make changes like the background color is doesnt change it in live time and it never saves the setting i put. HELP PLEASE
Marcin Nalborczyk (2 years ago)
Hey man, I dont have Theme Options in Appearance section. Is it some kind of widget to be download?
Marcin Nalborczyk (2 years ago)
+Marcin Nalborczyk and i wanted to change color of the submit button in contact form widget and cant figure it out
Marcin Nalborczyk (2 years ago)
+Greg Narayan ok so it depends on the theme? I thought u had plugin downloaded or something. the theme is from Tyler. He has popular video on yt "how to build website in wordpress 2015" length 2h30min or so. thanks for quick answer
Greg Narayan (2 years ago)
Theme dictates whether this show up, some themes have it some have theme settings and some are even more complex. Do you have Customize and which theme?
My eyes...
dave muehsam (2 years ago)
RE: Simple Catch. I made change to font size using "custom css." I see result, but can't save. Clicking "save" button appears to do nothing. I thought maybe I needed to upgrade to SimpleCatch Pro, so I spent the $45 but that didn't help. Any ideas? BTW- very helpful video- now if only I could implement my changes.
all1media (2 years ago)
+Greg Narayan Thanks, Greg for your response. I watched the video on creating a theme child, but I use godaddy instead of hostgator, so I kind of hit a wall within the first 3 minutes. When I tried to write new css, the file opened in Dreamweaver (is that weird?) I think I was able to upload it to "wp-content" file using Fetch. Anyway, my css was broken all over the place when I went back to wordpress and activated my "child." I'll keep plugging away... Thanks again for your guidance. -Dave
Greg Narayan (2 years ago)
+dave muehsam i dunno Dave, sounds like your CSS is good and the browser just won't change. any luck since then? maybe try a child theme with this video https://www.youtube.com/watch?v=gW78Ifm1Ys0
David Biemer (2 years ago)
What do you think of CSS Hero. For me, I majored in web design & graduated in 2012 and was using Dreamweaver originally. I took a break away from web design and when I needed it for my job, I (by chance) found CSS Hero. For me, it saves me so much time. It gets better with every update.
David Biemer (2 years ago)
+Greg Narayan Thank you. I will continue to refine my css skills. I suppose the Hero is definitely a double edge sword. At least it shows the generated css and it could a live study source. But for somebody new this short cut will hinder the needed discipline to study and understand the working foundation, needed to function outside the framework of a wordpress theme structure. I was fortunate that I had to build from a naked theme. Thanks again.
Greg Narayan (2 years ago)
+David Biemer don't take a break from CSS, it will slow you down! :)
Ava Ryerson (2 years ago)
Is it possible to isolate the changes just to one of the pages and not for the whole theme? Any tips are appreciated.
Greg Narayan (2 years ago)
+Ava Ryerson yep it is, you just have to find the exact CSS classes or use two if two exist in the HTML. for example it might say class="home-button page-id-1" and to get that exact section you have to write .home-button.page-id-1 { } . or you can manually add classes around items with divs then target them.
Karin Pultar (2 years ago)
Thank you
Percy Vasquez (3 years ago)
A very helpful video!!!
Masud Uddin (3 years ago)
Do you know how to do it on your phone or if there is an app?
Daniel Zimnikov (3 years ago)
How do I align two div containers side by side rather than one blew the other?
Ayush Goel (3 months ago)
use float command
Elif Aydogan (2 years ago)
+Greg Narayan hkş
Greg Narayan (3 years ago)
Well you just need the right CSS selector to target it. In chrome inspector on the right you'll see the CSS selector combination you need! It's right above the check boxes. Click it once and then copy :)
Daniel Zimnikov (3 years ago)
+Greg Narayan You are the man! Thank you so much. Still not quite sure what the clear thing does. I don't have it in my code and it works just fine. What is its purpose? On a side note, how to do I define this section in CSS: <input value="Tune In" name="jetpack_subscriptions_widget" type="submit"> Its the code for a call to action box. When I edit it in inspector, I can change the background color, but, since its an input and not a class or id, I'm not sure how to properly define it in CSS.
Greg Narayan (3 years ago)
+Daniel Zimnikov here you go mate, was looking to publish a new post today anyways :) http://www.dearblogger.org/float-two-divs-right-to-left
scooterqueen8 (3 years ago)
thanks for the video.
Arthur Hakhverdian (3 years ago)
Could've saved me 6 precious minutes of my life by mentioning at the beginning that not all themes offer *Theme Options*. :-\
Wagner Linaldi (3 years ago)
Thanks man, you saved me!
Elif Aydogan (2 years ago)
themaker03 (3 years ago)
I feel like I have done exactly what you said to do in terms of changing the font color, but it never saves.  I refresh the page and it's the same old color!!  This is what I have entered in the CSS thing and it doesn't seem to work.  It's driving me insane.   .entry-title { color: #8bed49; }
Jazz (3 years ago)
Hey Greg, that was great and you have a very calming and engaging style of teaching. What if I wanted to change the CSS where it originally resides?  I'm having trouble finding the actual source of the coding.  If you answer, great, if not, you're already providing a great service :)
annamarie1971 (3 years ago)
Hi thanks for this - it's so helpful.  Can you tell me how to edit the text?  so for example if i wanted to change the words "your dream website!" to "my dream website!" how would I do that?  Not just edit the appearance of it.
annamarie1971 (3 years ago)
+annamarie1971 It's this bit of code that i'm finding really difficult to change the text of. The words are at the end. Can you help? <span style="color: rgb(0, 0, 0); -webkit-transition: all 0s ease 0s; transition: all 0s ease 0s; min-height: 0px; min-width: 0px; line-height: 14px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-size: 10px;">Enter AFWL 2014</span>
RituParna dasmahapatra (3 years ago)
Hi Greg, Your videos are very useful. But i require some help. I tried to do the same kind of customization to my website using your above video. However, it is not taking the change. I use a child theme as i am wp beginner and do not know much about coding. But with the help of your video, i have figured out the code where i have to make the changes. When i incorporate it in my css sheet, it doesnt make any change. Can you help me. Is it that I have to incorporate it in my functions.php file. Thanks in advance..!!
dan danddy (3 years ago)
thanks for taking time to create these tutorial. well, if we do not create a child theme then what is the alternative? what happens when wp is updated all your customisation would vanishes.
Greg Narayan (3 years ago)
+Dana Sallie i don't recommend child themes because they can cause conflicts with some wordpress features themes are coming with these days. if you use this method here and write edits in Custom CSS they won't vanish on wp updates. if you update your entire theme, best is to save the Custom CSS in a text file first.
Tesa Kubicek (3 years ago)
How would I change the text "Your Dream Website" to something different?
Greg Narayan (3 years ago)
it's in Theme Options
Travis G (3 years ago)
Perfect thank you.
SuperDeluxeEdition (3 years ago)
Hello again, I just watched your CSS video and learned about the page elements, enabling me to fix it and get rid of that extra footer problem I had earlier. (Responsive theme) Thanks Greg for sharing your WP expertise with newbies like me. It's really a blessing finding your videos!
Oh boy... I have Langwitch theme and Inspector element says my font is "inherit" and the font size of 13 has a strike thru. Did I buy a crap theme?
Anne Besley (3 years ago)
You are a life saver! tha nks for taking the time to do this tutorial. Very clear and easy to understand!
Pat Kaehler (3 years ago)
You're a great teacher... ~Patricia
Colin JohnXon (3 years ago)
how do i move something left to right? like a like me box or follow me box. i justnt to be able to place it below my logo 
Greg Narayan (3 years ago)
+€nglo hey again! add me at facebook.com/dearblogger. we can also troubleshoot right here. happy to help and figure this out, i know how designing wordpress can get tricky
Colin JohnXon (3 years ago)
Hi Greg.. thx for the quick response.. i could screen schot show u wut im doing.. add me on fb Shine Blaq or give me ur FB.. i am so stuck and i need help Im using wordpress and im using a template i got tfrom themforest
Greg Narayan (3 years ago)
in your header.php file you can find where your logo is placed, then try pasting the item below that. which theme are you using?
Jack Bartowski (3 years ago)
I can't find the "Theme Options" tab on any of my themes. or anywhere linking to CSS Styles. Is this only for wordpress.com stuff? or am i missing it?
Jack Bartowski (3 years ago)
+Greg Narayan Alright thanks. I have been sticking to the basic Themes so far and haven't seen it. I did find a plugin called Custom CSS manager, but it hasn't been updated in about a year.
Greg Narayan (3 years ago)
No it's specifically wordpress.org. Your theme of choice either has theme options, or doesn't
B Mck (3 years ago)
Hi Greg, check out my site that was built from using your tutorials. www.automotiverepairinsidernews.com Thought I would mention that I used the Suffusion theme. It has a massive amount of customizations. I have about 25 hours into the site at this point and am actually doing some css code. Not bad for someone who didn't know what a blog was 2 weeks ago.lol I would appreciate some feedback on the site if you have a few minutes to look at it. Thanks for all your help. Not sure what the eticate is, but I put three links on my site to your site. Thanks again for all your help. Geratly appreciated.
Greg Narayan (3 years ago)
Haha no worries - the blog is all about helping up and coming bloggers get started. And I've never been much for etiquette. Make your own rules. I checked out your site and it looks like you've got big plans for content! Lots of categories at least. The theme is pretty cool, just don't get married to a theme too early because cleaner/more professional/better ones might exist. I've tried at least 50 in my time. I'd also add this tip: keep what you show readers simple. Clutter is a killer.  Keep me posted on everything! -- Greg
Victor V (4 years ago)
I am looking the way to modify CSS file. I am building up my own website and encounter some problem. And here you are to broaden up my knowledge. I am not IT expert. 
Victor V (4 years ago)
This is wonderful. This video explore to those have little IT knowledge for better control over our own website design. Thank you very much. 
Greg Narayan (4 years ago)
thanks Victor, happy to help! :) hey question- how did you find this tutorial?
D M (4 years ago)
If you don't create a child theme for editing CSS, what will happen to the changes we make if the theme is updates ? Do we lose all customization ? Thanks.
Brenda Malone (3 years ago)
+Greg Narayan Yes, there are, HOWEVER Genesis is rock-solid and EXCELS in Search Engine Optimization, and is supported by most professional WordPress Developers.  That being said, it probable is NOT for newbies or casual bloggers.
Greg Narayan (4 years ago)
+Mike Ker Watch out for the Genesis "framework". There are 100s of other (and less expensive) ways to succeed on WordPress!
Mike Ker. (4 years ago)
+Greg Narayan I hope so. I've learned that you should create a child theme of the child theme to customize CSS. I'm using Genesis and have a child theme. If I follow the instructions I was given, I should create vas FTP a custom CSS sheet and insert iit n the Child theme directory to make changes.
Greg Narayan (4 years ago)
Nope this should operate pretty much the same as having a child theme. Make sure to save your Custom CSS edits in a .txt file or something in case the theme update erases it. Personally I think child themes are becoming obsolete but thats just me :)
D M (4 years ago)
theme is updated*
Kratom Klub (4 years ago)
This series is fantastic. Thanks so much!
Greg Narayan (4 years ago)
Thanks! Happy to be able to help. 

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.