htmlcsswordpressthemescustomizing

Customizing the size of a HTML body

I want to customize the body of the Wordpress Theme "attitude" in a way to remove the grey gap between the header (white space) and the top of the page. In other words, I want to remove exactly this grey gap and also the grey gap between the end of the body near the footer and the end of the site.

Here is a live demo of attitude: http://themehorse.com/preview/attitude/

Thank you very much in advance and please dont hesitate to contact me if there are any questions.

Best regards

Solution

  • From a quick look using the chrome dev tools, the header element seems to be the culprit. It appears they are applying a 30px top margin to it using the branding id selector.

    #branding {
   margin-top: 30px;
}

    You can change this on line 549 of style.css.

    Now for a lecture...

    Not really, but I want to show you a few things to help you solve these types of problems in the future - It never huts to know more about the tools available to you.

    1. You can open chrome dev tools by right clicking anywhere on the page and selecting Inspect element, or use the keyboard shortcut for your OS

    Open Chrome Dev Tools

    1. In the very top left corner of the chrome dev tools panel that pops up there is a mouse pointer in a box symbol. If you click it to enable it and then move your mouse around the page you will see elements being highlighted in various colors.

    enter image description here

    Here we can see that the grey bar at the top has been highlighted in orange, and a large section below was highlighted in blue.

    Clicking the left mouse button while the element is highlighted as above will jump to the element in the Elements tab of the inspection tools. We can see that the element we selected was a header, with an ID of branding

    enter image description here

    A quick scroll through the styles inspector on the right reveals a id selector for branding and a declaration to set the top margin to 30px. The inspecter is also kind enough to tell us where in the source code the rule comes from; style.css, line:549.

    If we switch to the Source tab and open style.css in the inspector (or open the source code in a text editor) then we find the branding id selector on line 549 as promised.

    enter image description here

    For more information on how to explore webpages i recommend you read the dev tools guides for google chrome or mozilla (which ever browser you prefer to use most)

    Firefox: https://developer.mozilla.org/en-US/docs/Tools
    Google Chrome: https://developer.chrome.com/devtools