Questions on "Inspect Elements"

Community Forums Forums General Discussion Questions on "Inspect Elements"

This topic is: not resolved

This topic contains 13 replies, has 2 voices, and was last updated by  Susan 1 year, 7 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #6059

    SK
    Participant

    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?

     

     

    #6060

    Susan
    Moderator
    Post count: 7991

    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.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6067

    SK
    Participant

    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.

    #6068

    Susan
    Moderator
    Post count: 7991

    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.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6070

    SK
    Participant

    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.

     

     

    #6074

    Susan
    Moderator
    Post count: 7991

    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.

     


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6077

    SK
    Participant

    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.

     

     

    #6079

    Susan
    Moderator
    Post count: 7991

    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 @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6080

    Susan
    Moderator
    Post count: 7991

    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.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6082

    SK
    Participant

    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. :)

    #6084

    Susan
    Moderator
    Post count: 7991

    @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).


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6097

    SK
    Participant

    okay. Thank you, Susan.

    #6113

    SK
    Participant

    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.

    #6130

    Susan
    Moderator
    Post count: 7991

    Great! Glad it worked outt.


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Questions on "Inspect Elements"’ is closed to new replies.