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

XF 1.4 How to add left & right margin?

Discussion in 'Styling and Customization Questions' started by semprot, Jul 3, 2015.

  1. semprot

    semprot Active Member

    I use default xenforo style with just some color change.

    I want to add left & right margin to both header section & body section.
    The margin should be exactly 70px (not in percentage).
    Why i want to do that? Because i want to put ads there.

    On the image below, the red area are the 70px margin.

    Screenshot_36.jpg

    I have successfully applied the margin to the body & footer by using this :
    Code:
    footer {
        margin-left: 70px;
        margin-right: 70px;
    }
    #content .pageWidth {
        padding-left: 75px;
        padding-right: 75px;
    }
    #loginBar #loginBarHandle {
        margin-right: 70px !important;
    }
    
    But i can't apply it to the header area (that contains the logo & top navigation).
    I only can use percentage as margin, because there is "width" in default CSS there.
    I use this.
    Code:
    #headerMover #header {
        left: auto !important;
        padding-left: 5%;
        padding-right: 5%;
        width: 90% !important;
    }
    
    Can anyone help me how to apply 70px as margin to the header area?

    Thank you :)
     
    Last edited: Jul 3, 2015
  2. Sami Jalal

    Sami Jalal Well-Known Member

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header
     
  3. semprot

    semprot Active Member

    I don't see any setting there to control the padding / width?
     
  4. batpool52!

    batpool52! Well-Known Member

    ACP > Appearance > Style Properties > General > Page Width Controller and then remove this code which you've applied

    Code:
    footer {
        margin-left: 70px;
        margin-right: 70px;
    }
    #content .pageWidth {
        padding-left: 75px;
        padding-right: 75px;
    }
    #loginBar #loginBarHandle {
        margin-right: 70px !important;
    }
    
    Code:
    #headerMover #header {
        left: auto !important;
        padding-left: 5%;
        padding-right: 5%;
        width: 90% !important;
    }
    
     
    semprot likes this.
  5. semprot

    semprot Active Member

    That works :D Thank you :D
     

Share This Page