Horizontal postbit

[Bram]

I havent upgraded to 1.2 as of yet but I do like how the new postbit/message user info looks on especially the mobile devices when displayed horizontally.

Is it possible to have this horizontal display also in normal view? Due to my fixed width site plus a sidebar my space is currently very limited and getting rid of the classic vertical display i can free up some space.

As always big kudos for the help.

 

[Steve F]

Basically, just taking CSS from the responsive calls

.messageUserInfo
{
        float: none;
        width: auto;
}

.messageUserBlock
{
        overflow: hidden;
}

.messageUserBlock div.avatarHolder
{
        float: left;
}

.messageUserBlock .arrow
{
        display: none;
}

.messageUserBlock h3.userText
{
        float: left;
}

 

[Bram]

Oh sweet! I guess this will only work for v1.2 right?

 

[Steve F]

No it should work on 1.0 - 1.2

 

[Bram]

Adding it to a vanilla 1.1 style in the extra.css doesn't give me the result though.

 

[Steve F]

Did you happen to put !important at the end of those? I was just copying from dev tools in Chrome

 

[Shelley]

Basically, just taking CSS from the responsive calls

.messageUserInfo
{
        float: none;
        width: auto;
}

.messageUserBlock
{
        overflow: hidden;
}

.messageUserBlock div.avatarHolder
{
        float: left;
}

.messageUserBlock .arrow
{
        display: none;
}

.messageUserBlock h3.userText
{
        float: left;
}

View attachment 50032

Nice one I was doing something very similar and turning to responsive for the solution but never submitted since i've modded my message block elements with those pesky banners. Nice work Steve reposnive was the first thing i ran to to look for the horizontal view

Just bare in mind the lip on banners in 1.2 may cause some undesirable effects since they aren't hanging/clinging to any edges which I had to add (I'm using images) and damn I'm paying for it . Not difficult though just takes a little tinkering @Bram

Still tinkering around with it myself.

 

[Bram]

Thanks you both, getting there Indeed forgot to add: facepalm !Important;

 

[Bram]

Has somebody figured out how to use the horizontal postbit, that you see on mobile phones when browsing XF, in desktop mode? Think it will look rather good actually especially with the mini avatar instead of the huge block on the left that isnt very suited for my style imo.

 

[Jeremy]

The CSS exists, you would just have to remove the media query that forces it only on mobile.

 

[Bram]

And where would I do that @Jeremy? The instructions above from a couple of months ago did work but not flawlessly.

 

[Bram]

I can't get this to work @Jeremy. What exactly do i have to change?

 

[Bram]

Anybody else have a clue?

 

[Allan]

It also interested me !

 

[Bram]

I think i figured it out. Try adding this to extra.css

.messageUserInfo {
float: none !important;
width: auto !important;
}

.messageUserBlock div.avatarHolder .avatar img {
width: 48px;
height: 48px;
}

.Responsive .messageUserBlock div.avatarHolder
{
float: left;
padding: 5px;
}

.messageUserBlock h3.userText {
margin-left: 64px;
}

.messageUserBlock {
overflow: hidden;
margin-bottom: 5px;
position: relative;
}

.messageUserBlock .userBanner
{
max-width: 150px;
margin-left: 0;
margin-right: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: static;
display: inline-block;
}

.messageUserBlock a.username {
padding-top: 2px;
}

Plus!

Go to Style Properties > Message Layout, and remove the left padding from Content Container. Change the css in main content to min-height: 30px; or something that fits your needs

 

[Allan]

I think i figured it out. Try adding this to extra.css

.messageUserInfo {
float: none !important;
width: auto !important;
}

.messageUserBlock div.avatarHolder .avatar img {
width: 48px;
height: 48px;
}

.Responsive .messageUserBlock div.avatarHolder
{
float: left;
padding: 5px;
}

.messageUserBlock h3.userText {
margin-left: 64px;
}

.messageUserBlock {
overflow: hidden;
margin-bottom: 5px;
position: relative;
}

.messageUserBlock .userBanner
{
max-width: 150px;
margin-left: 0;
margin-right: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: static;
display: inline-block;
}

.messageUserBlock a.username {
padding-top: 2px;
}

Plus!

Go to Style Properties > Message Layout, and remove the left padding from Content Container. Change the css in main content to min-height: 30px; or something that fits your needs

Work !

PS: no need changes, just add this in extra.css:

.message .messageInfo {
@property "messageInfo";
margin-left: 0px;
@property "/messageInfo";
}
.message .messageContent {
@property "messageContent";
min-height: 30px;
@property "/messageContent";
}

There are still some problems

 

[Allan]

If add informations:

 

[Bram]

Hmm maybe i had that changed already before but its working fine here now.

Example [url]http://www.racedepartment.com/forum/threads/join-assetto-corsa-steam-group-and-win.77555/[/URL]