Great addition to my forum, small layout problem

piotr

I have a small layout problem with the leaderboard: http://audi-a2.nl/index.php?p=/yaga/ranks (on the right). As far as I understand the table is done in CSS ? I have no clue on how to fix this layout. Any pointers as to where to start ?

whu606

@piotr

What is it you want to achieve?

By using a web inspector, you can click the relevant part of the page and see which css element(s) affects it.

Then you can use the CSSEdit plugin to add the changes you want.

vrijvlinder

Ok, you know I actually just last week helped Tof to fix the exact same problem in his forum.

Here is the css code I used, try it and see if it also helps you

/*fixes the leaderboard layout*/
.Box.Leaderboard ul.PanelInfo li a {
    display: inline-block;
    background: transparent;
    padding: 0;
}
.Box.Leaderboard ul.PanelInfo li{
    border-bottom:1px solid #4e5d6c;
}
.Box.Leaderboard .Count {
    vertical-align: bottom;
    position: relative;
    top: 5px;
}
.Box.Leaderboard ul.PanelInfo li a .ProfilePhoto,.Box.Leaderboard ul.PanelInfo li a .ProfilePhotoMedium{
    width: 32px;
    height: 32px;
    border-radius: 0;
}

vrijvlinder

In order to avoid the count moving to the next line if the user name is too long , try adding this

.Box.Leaderboard .Count {
    vertical-align: bottom;
    position: relative;
    top: 5px;
   font-size:10px
   font-weight:normal;
}

vrijvlinder

I made this code more precise considering you have the label punten in the count

.Box.Leaderboard .Count{
    display: inline-block;
    min-width: 10px;
    max-width: 70px;
    padding: 6px 6px;
    font-size: 9px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    vertical-align: bottom;
    white-space: pre-wrap;
    text-align: center;
    background-color: #7a8288;
    border-radius: 10px;
    overflow: auto;
    max-height: 30px;
    top: 5px;
    position: relative;
    word-wrap: break-word;
}

mirX

Thanks for your business, @vrijvlinder ! Leaderboards look good now on my forum.

vrijvlinder

You are very Welcome !

hgtonight

@vrijvlinder You are still the CSS master

@mirX and anyone else using Bootstrap, checkout the bootstrap compatibility branch here: https://github.com/hgtonight/Application-Yaga/commits/feature/bootstrap-compatibility

I would love to get more feedback on issues where I have original markup.