1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Horizontal postbit

Discussion in 'Styling and Customization Questions' started by Bram, Jun 27, 2013.

  1. Bram

    Bram Well-Known Member

    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.
     
  2. Steve F

    Steve F Well-Known Member

    Basically, just taking CSS from the responsive calls

    Code:
    .messageUserInfo
    {
            float: none;
            width: auto;
    }
    
    .messageUserBlock
    {
            overflow: hidden;
    }
    
    .messageUserBlock div.avatarHolder
    {
            float: left;
    }
    
    .messageUserBlock .arrow
    {
            display: none;
    }
    
    .messageUserBlock h3.userText
    {
            float: left;
    }
    upload_2013-6-27_10-22-43.png
     
    Shelley and Bram like this.
  3. Bram

    Bram Well-Known Member

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

    Steve F Well-Known Member

    No it should work on 1.0 - 1.2
     
    Shelley and Bram like this.
  5. Bram

    Bram Well-Known Member

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

    Steve F Well-Known Member

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

    Shelley Well-Known Member

    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 :p

    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 :D. Not difficult though just takes a little tinkering @Bram :)

    Still tinkering around with it myself.

    Untitled-2.png
     
    ApocaLyPSe and Steve F like this.
  8. Bram

    Bram Well-Known Member

    Thanks you both, getting there :) Indeed forgot to add: facepalm !Important;
     
    Last edited: Jun 28, 2013
    Shelley likes this.
  9. Bram

    Bram Well-Known Member

    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.
     
  10. Jeremy

    Jeremy XenForo Moderator Staff Member

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

    Bram Well-Known Member

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

    Bram Well-Known Member

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

    Bram Well-Known Member

    Anybody else have a clue?
     
  14. Allan

    Allan Well-Known Member

    It also interested me !
     
    Bram likes this.
  15. Bram

    Bram Well-Known Member

    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 :)
     
    Last edited: Dec 10, 2013
    Sebastian Querelos and Allan like this.
  16. Allan

    Allan Well-Known Member

    Work !

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

    Code:
    .message .messageInfo {
    @property "messageInfo";
    margin-left: 0px;
    @property "/messageInfo";
    }
    .message .messageContent {
    @property "messageContent";
    min-height: 30px;
    @property "/messageContent";
    }
    There are still some problems :p

    Screenshot_16.png
     
  17. Allan

    Allan Well-Known Member

    If add informations:

    Screenshot_17.png
     
  18. Bram

    Bram Well-Known Member

Share This Page