Suggestion for profile on left layout (with pics and code)

[pqwoerituytrueiwoq]

Setting:
Quick Links -> Edit Profile -> Location of Member Profile Information on Posts
Suggestion (before):

Result (after):

CSS Code:

.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {
    display:inline;
}
.postbitlegacy .userinfo .userinfo_extra {
    float:right!important;
    width:70px;
    margin-top:0;
}
.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
    min-height:230px;
}
.postbitlegacy .userinfo {
    position:absolute;
}

Code for firefox's userContent.css file/Stylish:

@-moz-document url-prefix("http://ubuntuforums.org/") {
    .postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {
        display:inline!important;
    }
    .postbitlegacy .userinfo .userinfo_extra {
        float:right!important;
        width:70px!important;
        margin-top:0!important;
    }
    .postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
        min-height:230px;
    }
    .postbitlegacy .userinfo {
        position:absolute!important;
    }
}

[ajgreeny]

This may be a bit premature, but can you explain a bit more clearly what to do with the text in these boxes.

I have added the text from the second box you show here to my FF userContent.css file and restarted FF, but nothing has changed in the way the forum is displayed. Do I need an add-on (stylish) for it to work?

What do I do with the text in the first box shown? Is that an alternative addition to the same css file if I haven't got the add-on?

[pqwoerituytrueiwoq]

This is the end result, no addon required, you can use stylish if you prefer it userContent.css

cat ~/.mozilla/firefox/mwad0hks.default/chrome/userContent.css | head -17
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://ubuntuforums.org/") {
    .postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {
        display:inline!important;
    }
    .postbitlegacy .userinfo .userinfo_extra {
        float:right!important;
        width:70px!important;
        margin-top:0!important;
    }
    .postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
        min-height:230px;
    }
    .postbitlegacy .userinfo {
        position:absolute!important;
    }
}

The 1st box would be for someone who wanted to update the css on the site
all that would be needed would be ctrl+f and search for the same target and change styles

[ajgreeny]

Sorry, mea culpa! I simply forgot to rename the file from usercontent-example.css to userContent.css, so of course, it did not work.

Now renamed as needed and working properly. Thanks for the tip.

[mörgæs]

Thanks. A suggestion like this including CSS is more than welcome.

[Paddy Landau]

Setting…

Thank you.

[Vaphell]

it would be nice to push the time to the right, and move everything else up. Another row saved. Beans probably could be next to coffe icons, i guess they are related?


i am no html guru so moved things around using margins to roughly illustrate (added to the code above)

    .postbitlegacy .userinfo {
        position:absolute!important;
    }
    
    .postbitlegacy .userinfo {
        margin-top:-20px!important;
    }
    
    .postbitlegacy .postdate {
        margin-left:200px !important;
    }
    
    .postbitlegacy .userinfo_extra dd:nth-of-type(3) {
        margin-top: -120px !important;
        margin-left: 20px !important;
    }
    
    .postbitlegacy .userinfo_extra dt:nth-of-type(3) {
        display: none;
    }

[ajgreeny]

How can I get the same effect in chromium as I do in firefox please. I have copied the same code as I have in the FF userContent.css file to the Custom.css file in ~/.config/chromium/Default/User StyleSheets, made it executable like the userContent.css but the user info (join date, location and beans) will not sit beside the user avatar as it does in FF, so there is still a lot of wasted space in chromium.
See screenshots for difference between the two browsers.

[pqwoerituytrueiwoq]

look at the 1st line for the code in firefox
@-moz-document url-prefix("http://ubuntuforums.org/")
that is most likely your issue
if you are using a userscript just use GM_addStyle("Normal_CSS_Code_Here")
just use \n for a like break and \t for a tab or you can just delete them all together
how about i just attach the script (drag/drop into extensions) http://userscripts.org/topics/113176

[vasa1]

look at the 1st line for the code in firefox
@-moz-document url-prefix("http://ubuntuforums.org/")
that is most likely your issue
if you are using a userscript just use GM_addStyle("Normal_CSS_Code_Here")
just use \n for a like break and \t for a tab or you can just delete them all together
how about i just attach the script (drag/drop into extensions) http://userscripts.org/topics/113176

Hi, Can you help me out? I'm using Google Chrome with the Stylish Extension. I've managed to get a nearly-minimal look but I'm stuck at this point ... As the image shows, I still have three rows:
the top row has the "age of the post" at the extreme LHS and link on the extreme RHS
the second has the poster's nick with online/offline status
the third has the user title

Can you figure out a way to have this information (div.posthead and div.userinfo_noavatar) in fewer rows? I'd prefer something not involving user scripts.