Web Hosting
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Theme design from blank

Discussion in 'Themes and Templates' started by Yotamguttman, Oct 29, 2017.

  1. Yotamguttman

    New Member

    Joined:
    Oct 29, 2017
    Messages:
    2
    Likes Received:
    0
    Hello,

    As a non-expert programmer, I'm trying to develop my own theme from a blank.

    I have a problem I don't find an online solution for.
    I want to separate the content of the website from the header, so I could stretch the header automatically from side to side but keep the page content centered into a 1000px width.

    On the main stylesheet, the body is limited to 1000px, this function effects on the header also.
    body{
    margin: 0 auto !important;
    float: none !important;
    width: 1000px;
    }

    Untitled-1 copy.jpg

    As I said, I started this theme from blank, there are no ready files in the content folders, except the default WordPress ones.
     
    #1
  2. WP Superheroes

    New Member

    Joined:
    Jul 13, 2017
    Messages:
    2
    Likes Received:
    0
    Three easy steps
    1. Remove the width from the body.
    2. Place the width on a page-content DIV.
    3. Place the header in a Header DIV, make it 100% width. margin: 0 auto. Try using position: absolute and position: relative to adjust the position of the header and the page-content.

    check out google if you have more questions.
     
    #2
  3. Yotamguttman

    New Member

    Joined:
    Oct 29, 2017
    Messages:
    2
    Likes Received:
    0
    Hello, I actually got confused by Google. Maybe I didn't write the right questions but I couldn't find any answer to this case.
    Am I supposed to write these tags in the main CSS stylesheet?
    I've created Header and Page-content classes. The page content creates an 8px margin for some reason, although I used margin 0px auto.

    Where do I actually place the header and the page content inside the DIV header classes?
     
    #3

Share This Page

Web Hosting