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

XF 1.3 HTML+CSS page in Xenforo?

Discussion in 'Styling and Customization Questions' started by Ren3gade10, May 20, 2014.

  1. Ren3gade10

    Ren3gade10 Member

    So I have an html page, with a style.css along with it. How can I implement it into Xenforo as a page? I tried putting the HTML code into a Node/Create a Page... but it just screwed up the formatting terrible.

    What can I do?
     
  2. EQnoble

    EQnoble Well-Known Member

    First you need to not include any html outside of the <body> of your document because when inserting the html into the html area of a page node since xenforo will already be including all of that, you will then if your page still looks messed up need to modify some of the css so that your page will fit within the page content area of xf without breaking shtuff.
     
  3. Ren3gade10

    Ren3gade10 Member

    Where exactly to I implement the style.css at?
     
  4. tajhay

    tajhay Well-Known Member

    extra.css?
     
  5. Ren3gade10

    Ren3gade10 Member

    Style.css

    Code:
    /* CSS Document */
    
    body{
        background-color:#0c0c0c;
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    }
    
    .container{
        width:960px;
        margin:0px auto;
        color:#FFF;
    }
    
    .rounded{
        border-radius:12px;
    }
    
    .padding{
        padding: 10px 25px;
    }
    
    .label{
        text-align:center;
        width:250px;
        color:#000;
        font-size:22px;
        margin:20px auto;
    }
    
    .left{
        width:49%;
        float:left;
        clear:left;
    }
    
    .right{
        width:49%;
        float:right;
        clear:right;
    }
    
    .border{
        height:207px;
        box-sizing:border-box;
        border:3px solid #FFF;
    }
    
    .left, .right{
        margin:40px 0px;
    }
    
    h4{
        text-transform:uppercase;
        margin:0px;
    }
    
    h5{
        margin:5px 0px 0px 0px;
    }
    
    p{
        margin:0px 0px 12px 0px;
        font-size:12px;
    }
    
    h1{
        text-align:center;
        font-size:42px;
        font-weight:normal;
        margin:40px 0px;
    }
    
    .clearall{
        clear:both;
    }
    
    .spacer{
        margin-top:25px;
    }
    (sorry, i didnt code it)
     

Share This Page