Page 1 of 1

Forum Title Positioning

Posted: Wed Apr 08, 2015 9:09 pm
by SteStory
http://barrowafc.net/index.php

Can anyone suggest the line of code I need to edit to make each individual forum and description to line up in the centre of the row.

Ie: where it says Barrow AFC, All things Barrow AFC. I'd like it aligned vertically with the middle of that row, whereas now it's to the top, so looks off compared to the icon to the left.

The Pre-Match travel one looks fine because there's another line for the moderator, but the rest look off to my OCD eye!

Cheers
Ste

Re: Forum Title Positioning

Posted: Thu Apr 09, 2015 9:15 am
by Rahber
try adding this to your CSS and adjust the margin value as required.

Code: Select all

dl.icon dt, dl.icon dd {
  margin-top: 10px;
}

Re: Forum Title Positioning

Posted: Thu Apr 09, 2015 4:38 pm
by SteStory
Aii, I tried that initially. It helps slightly, but it also makes the blue bar at the top go bigger which doesn't look too nice :(

Re: Forum Title Positioning

Posted: Thu Apr 09, 2015 6:32 pm
by javiexin
The way I found worked best in my browser -Firefox- (you should test on more) is:

Code: Select all

dl.icon dt, dl.icon dd {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
}
But this creates a problem: there are some <dfn> tags that are supposed to be out of the screen (ie, not visible) but now are in the middle of the presentation area. I don't know how to achieve the same effect without the issue of having the <dfn> tags show up (Last post, Topics, Posts labels appear...).

You fix it by adding:

Code: Select all

ul.topiclist dfn {
    display: none;
}
But then, I don't know what may be broken by these changes! You will have to test it, and someone (that knows much better than I do) should advise what are these tags for, and what are you going to miss if you make them "display: none". Apparently, these changes also work on "responsive" widths, but as I said, you should check them!

Hope this helped,
-javiexin

Re: Forum Title Positioning

Posted: Sat Apr 11, 2015 12:10 pm
by SteStory
That didn't seem to work for me.

Anyone else got a suggestion? For someone with my OCD this tiny little thing really does ruin a wonderful upgrade :(

Re: Forum Title Positioning

Posted: Sat Apr 11, 2015 12:53 pm
by Arty
Best thing you can do is remove moderators list from second forum, so all forums would have only title + one line description, then add padding-top: 10px; to dl.icon dt .list-inner

Doing it properly is not possible because its not possible to vertically center static elements that aren't contents of table cell.