Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Skinning Help

ColeyColey New
edited September 2012 in Vanilla 2.0 - 2.8

I have been working on my first Vanilla skin, nothing exciting, just something to get my feet wet. I have managed to fix just about everything I broke in the process but I have this weird gap between messages. I can't find a css reason for this to be occurring and I haven't mucked too much with the templates. Help would be appreciated if anyone knows where I went wrong :)

An example:


  • peregrineperegrine MVP
    edited September 2012

    it would be easier to tell you with a link to your site. You could use firebug or some tool with your browser to identify the element that is giving you the problem

    < li id="Comment_80" class="Item Comment" >

    most likely li .Item .Comment has too much bottom padding or margins.

    or the same issue with div .Comment
    < div class="Comment" >

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited September 2012

    Got it - you're relatively positioning the .Message element and pushing it 100px up top which in return leaves a 100px gap beneath the post. These changes should do the trick:

    .Preview .Message, .MessageList .Message {
        line-height: 140%;
        font-size: 100%;
        width: 580px;
        border: 1px black solid;
        background: #F4F0CB;
        padding: 10px;
        margin-left: 152px !important;
        /* Remember to remove the clear and position attributes from the existing rules */
    .Item .Author img {
        height: 140px;
        width: 140px;
        border: 1px;
        margin: 0 10px 10px 0;
        float: left;
        overflow: hidden;
        background: #eee;
        border: 1px black solid;

    By the way, the URL is - the image is hosted on the same server.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • @Coley

    I clicked on the link Kasper provided.

    Nice design.

    If you are interested....
    But, I did notice on my browser the right hand panel is partially off screen and I have to scroll right to see the rest of the panel.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • ColeyColey New
    edited September 2012

    I had figured out it was the relative position last night but hadn't come up with a way to fix it yet so I appreciate the suggestion very much. It worked perfectly :) Thanks a million.

    I have a pretty wide screen so I occasionally make things too wide, I'll have to make some edits there as well.

    Thanks again for the help :)

Sign In or Register to comment.