Great addition to my forum, small layout problem

piotr · February 2016

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 · February 2016

@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 · February 2016

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 · February 2016

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 · February 2016

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 · July 2016

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

vrijvlinder · July 2016

You are very Welcome !

hgtonight · July 2016

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

Great addition to my forum, small layout problem

Comments