Questions on "Inspect Elements"

[SK]

Hi, as I mentioned before I am new to wordpress, I want to find out how does the "inspect element" work in wordpress? For example, when i want to change the font size of my headings, I right click on the header and choose "inspect element'. It opens up another window on the right of my screen and there are several tabs appearing below the screen. What are these and how do I use them in wordpress?

 

 

[Susan]

I recommend you get Firebug (or Firebug Lite for Chrome) - that is an invaluable tool for inspecting the various elements of your CSS. You can make changes to the elements on your screen, so that you can preview what the changes will look like, before you go in and make the changes to your actual stylesheet.

With plain old right click > inspect element, you can still see what is going on behind the scenes, so to speak, but Firebug will take it to the next level.

[SK]

Hi, Susan. Thanks for you prompt reply. Last night I use "inspect element" to do a bit of experiment with my document but somehow when I went to edit one of my page under "visual" tab, the colour of wordings become white and it appears as a blank area to the naked eyes. Nothing changes on my "html" tab. I do not know how to change the colour of the font back to black colour..The "inspect element" works something like firebug, right? And it won't make any impact on my document if I change anything under "inspect element"? Pls advise. Thank you.

[Susan]

Nothing you do with  "inspect element" will impact your site - it's just a visual tool.

 

If you've got a problem with your site, can you post a link to the site, and let me know where the problem is.

[SK]

My humble site is http://www.101stressfreeliving.com. I just set it up quite recently and it's under construction. I do not know how to use wordpress and lifestyle theme so the site is quite empty. I am having problem on the back-end so I do not know if you can see from the front-end. Susan, one more question, when I go to edit my css style sheet under Appearance>editior, the codes appear to be different from what I learnt from the website  http://www.w3schools.com. For example, I can understand the meaning of the following codes:

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

When I go edit the css style sheet, nothing looks similar like the example above. It's so complicated. I want to edit the font size of my headings but there are many "headers" listed that I do not know which one to edit? Is there a simpler way to solve this issue.

Need your advice. Thank you.

 

 

[Susan]

Thanks for the link.

Do you want to edit the size of the page headings? For example "home"? If you right click on home, and select inspect element, you should see the color of the text, the font type, the font size and the line height. I find it easier sometimes to look for the font size in the CSS, and find the other matching components, rather than the h: heading. In this case, here is what I found in your CSS:

h1,
h2,
h2 a,
h2 a:visited {
color: #509ac9;
font-family: 'Oswald', arial, serif;
font-size: 24px;
line-height: 30px;
}

So, the font size is 24px. You'll want to change that to make a change in your font size. Now, if you want to make the font larger, you will also have to keep in mind that the line-height is 30px, so anything larger than 30px will also require you to adjust the line height.

 

[SK]

Susan, I wish to make changes to the header/title "Your Must-Know Guide to Stress-Free Living". I want to make the font smaller.

What about the white coloured font in the "visual" tab of my page editor? Any remedy? How to change back to black colour?

Thanks.

 

 

[Susan]

My bad  - I was thinking page or post title, not the title in the header. Ok, look for this:

#title {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 48px;
font-variant: small-caps;
line-height: 48px;
margin: 0;
text-shadow: #666 1px 1px;
}

[Susan]

As far as the visual editor question - if you go to HTML tab, is there any content in there?  If you create another page and/or post, do you have the same issue? I've not heard of this issue before, so let me do some research.

[SK]

Hi Susan, there are content in the html tab and I can see every single word but not in the visual tab. Yes, I get the same issue when i create another page/post. Sorry for the trouble and thank you for your help. 🙂

[Susan]

@SK - go ahead and post another thread asking just that one question; then maybe someone else can chime in (it's unlikely someone else will respond here, as forum members are usually looking at unanswered posts).

[SK]

okay. Thank you, Susan.

[SK]

Hi, Susan. If you happen to read my post here, I want to tell you that my issues had been resolved. After I login with another computer, I can see the visual editor with all wordings. Thank you for your help.

[Susan]

Great! Glad it worked outt.

[Author]

Posts