Community Forums › Forums › Archived Forums › Design Tips and Tricks › Increasing the space between elements in page template
Tagged: custom changes, space, template
- This topic has 4 replies, 2 voices, and was last updated 11 years ago by
coolmamie.
-
AuthorPosts
-
January 21, 2014 at 8:50 pm #86381
coolmamie
MemberI 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.
http://www.lonemountainpaynes/homesteadJanuary 21, 2014 at 10:18 pm #86390Peter
MemberThe 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.
January 22, 2014 at 10:01 am #86471coolmamie
MemberThanks, 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.
January 22, 2014 at 7:17 pm #86566Peter
MemberBasically you'd want to to add
margin
orpadding
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)
January 23, 2014 at 12:16 pm #86665coolmamie
MemberYou 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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.