Skip to main content
Topic: Show info under profile (Read 876 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Show info under profile

Hi, Can anyone guide me how to display age, location, gender under member profile in every post in elkarte? Is this convenient for members and administrators?
Any advice? Thanks!

Re: Show info under profile

Reply #1

Hi and welcome to Elkarte!

As far as I know there is no way to display that info without and add-on or code edits. Elkarte shows all that information on mouse over a profile. From ACP you can choose where to display every single custom field.

This is what I have on my forum, and I prefer this behaviour since I find it much "cleaner" in terms of design, instead of showing all that stuff under every avatar.

Re: Show info under profile

Reply #2

Technically, if you don't mind the positioning, you could tweak a bit the CSS to have them show, above the avatar, though.
Something along the lines:
Code: [Select]
.poster .menulevel2 {
    display: block !important;
    position: static;
    width: auto; /*or maybe 100%, not sure */

Would be the basics, then you have to tweak some other styles to make it work the way you want.


Re: Show info under profile

Reply #3

As a basic implementation, this will work:

Code: [Select]
@media screen and (min-width: 33.75em) {
.poster {
        display: flex;
        flex-direction: column;
    .poster .listlevel1.subsections {
        order: 4;
    .poster .listlevel1:hover > a::after {
        display: none !important;
    .poster .listlevel1.subsections > ul {
        display: block !important;
        position: static;
        max-width: 90%;
        margin: 0 auto 4px;
        padding: 0 !important;
        text-align: center !important;
        border: solid #ddd;
        border-width: 1px 0;
        box-shadow: none;
        opacity: 1 !important;
    .poster .listlevel1.subsections > ul > li {
        width: 100%;
    .poster .listlevel2 > ol > li {
        display: inline-block;
    .poster .listlevel1.poster_avatar {
        order: 1;
    .poster .listlevel1.icons {
        order: 2;
    .poster .listlevel1.membergroup {
        order: 3;
    .poster .listlevel1.poster_online {
        order: 5;

That is done as an override of this site's code, so should work if just added to custom.css. It will automatically revert to the standard display on small screens.
Last Edit: August 29, 2021, 02:09:33 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P