Blog Documentation Book a Demo

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:

Comments

  • 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 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 http://forum.rigmaroleplay.com/ - 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

  • peregrineperegrine MVP

    @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.