Increasing the space between elements in page template

Community Forums Forums Design Tips and Tricks Increasing the space between elements in page template

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  coolmamie 7 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #86381

    coolmamie
    Member
    Post count: 4

    I am working on a WordPress site by myself for the first time. I just successfully created my first custom page template based on the design of the Landing Page in my Genesis Child Theme, and it is working properly. I simply added the Header to the top of the page for some navigation. Under the header is a full-page-width background image with the content on a white background area (800 pixels wide) in the center. The top of the white background abuts the white background of the header. (I do not know the proper terms for these elements)

    I would like to create some space between the top of the white content area and the header so that a little of the background area shows.

    I can work directly in cpanel, but do not know where to find the file that contains the code I need to change. Also, should it be changed in Genesis Framework or on the Child Theme (Minimum-Pro)?

    I hope I have explained this well enough, and would be grateful for some help.

    • This topic was modified 7 months, 3 weeks ago by  coolmamie.
    • This topic was modified 7 months, 3 weeks ago by  coolmamie.
    http://www.lonemountainpaynes/homestead
    #86390

    Peter
    Participant
    Post count: 95

    The style.css file in your child theme. You could do the editing directly from WordPress. Don’t edit Genesis Framework.

    appearance > editor > your child theme > style.css.

    #86471

    coolmamie
    Member
    Post count: 4

    Thanks, now I know where to do it, but still do not understand how to change the spacing between the two elements – the header container, and the inner container that has my content. I am looking for a number to increase either below header container or above inner container. It is greek to me, but I understood my limitations when trying to do this myself.

    I imagine a basic understanding of css is my problem. I thought by using a theme, I couldjust follow along, but I find my design sensibilities make me want to do tweaks here and there.

    #86566

    Peter
    Participant
    Post count: 95

    Basically you’d want to to add margin or padding to the element. For example, .site-header { margin-bottom: 20px; }. Good news is CSS is 10x easier to learn than Greek (or any other language) :). You can learn the basics in about a week and know how to perform most common tasks (such as spacing).

    If you haven’t seen this already, then this might be useful to you: http://codex.wordpress.org/Know_Your_Sources. See the “Learning CSS” section. I suggest “HTML Dog CSS Beginners Guide” for fast and easy learning. But any of those CSS tutorials will do — one is all you need. After learning the basics, the best reference in my opinion is MDN (by the developers of FireFox). Also, making use of your browser’s element inspector will speed up your CSS learning tremendously (Google Chrome provides css hints)

    #86665

    coolmamie
    Member
    Post count: 4

    You are most kind to have helped me! I will follow your advice. I like to watch tutorials when I am on the treadmill and will start on css right away. Don’t know why I put it off so long!

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

You must be logged in to reply to this topic.