Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Offline
Support Offline
It's past support hour. We are taking some rest and will come back stronger tomorrow. Promise!
Official support hours:
Monday To Friday except Saturday and Sunday
From 09:30 To 17:00
Our current time: Friday 4:08 am
Add a reply View Replies (7)

Resolved User profile layout : double column display

  1. Arena Esport
    Arena Esport
  2. Features Request
  3. Saturday, May 28 2016, 10:00 PM
Hi,

I was just looking for a layout option so that the frontend profile displays 2 columns with basic informations on the left and custom field group on the right for example. At the moment we can only chose between 2 different views and field styles, but i have the feeling there is something missing to this incredibly flexible extension.

Here is a test page on my website : http://arena-esport.com/index.php/easyprofile/Enzo please tell me if there is any simple solution to do it.

Regards,
References
  1. http://arena-esport.com/index.php/easyprofile/Enzo
Accepted Answer
admin
admin Accepted Answer
Admin
Hi,
yes this is possible, try to add also this:


#profiletab0 fieldset:nth-child(odd):last-child{width:100%;}


so all code become


@media(min-width:950px){

    #profiletab0 fieldset legend{box-sizing:border-box;}

    #profiletab0{ font-size:0px }

    #profiletab0 fieldset{display:inline-block;width:49%;vertical-align:top;box-sizing:border-box; font-size:15px;margin-top:0px;}

    #profiletab0 fieldset:nth-child(odd){margin-right:2%}

    #profiletab0 fieldset:nth-child(odd):last-child{width:100%;}

}
  1. more than a month ago
  2. Features Request
  3. # Permalink
Responses (7)
admin
admin Accepted Answer
Admin
Hi,
sorry for late reply, it's a weekend for us.

There are many ways to manage this, for example:
- CSS
- Template Override

I think the most simplest way is to use CSS, for example try to add this CSS code in file /templates/yoo_stage/css/custom.css (see result in screenshot)


.jsn_profile fieldset{margin-left:400px;}

.jsn_profile #jsn_default{margin-left:0px;float:left}

@media(max-width:950px){

    .jsn_profile fieldset{margin-left:0px;}

    .jsn_profile #jsn_default{float:none}

}
Attachments (1)
Schermata 2016-05-29 alle 16.41.06.png Schermata 2016-05-29 alle 16.41.06.png
  1. more than a month ago
  2. Features Request
  3. # 1
Arena Esport
Arena Esport Accepted Answer
Pro
Hi,

this is exactly what I was talking about, thanks.

Sorry to bother you again, but what if I want that one group of fields out of two lands on the left, and the other ones on the right of the page ? Only having the main information on the left and the remaining ones on the right feels a bit unbalanced.

And if it's not possible to do it automatically, can you explain to me how I have to edit the code manually when I add a new field ?

Sorry for the inconvenience,
Thank you for your consideration,
  1. more than a month ago
  2. Features Request
  3. # 2
admin
admin Accepted Answer
Admin
Hi,
sorry for late reply, it was a weekend for us :D

Can you explain me better your second question?
  1. more than a month ago
  2. Features Request
  3. # 3
Arena Esport
Arena Esport Accepted Answer
Pro
Hi,

I think it will be clearer with an image.
  1. more than a month ago
  2. Features Request
  3. # 4
admin
admin Accepted Answer
Admin
Hi,
you can use this code instead previous


@media(min-width:950px){

    #profiletab0 fieldset legend{box-sizing:border-box;}

    #profiletab0{ font-size:0px }

    #profiletab0 fieldset{display:inline-block;width:49%;vertical-align:top;box-sizing:border-box; font-size:15px;margin-top:0px;}

    #profiletab0 fieldset:nth-child(odd){margin-right:2%}

}


- #profiletab0 fieldset legend{box-sizing:border-box;} - this fix a problem with your title legends, you have applied 100% width, padding and border, so it will be 100%+padding+border wide. We recommend to add this general rule because this is a general problem (not Easy Profile only):
fieldset legend{box-sizing:border-box;}
  1. more than a month ago
  2. Features Request
  3. # 5
Arena Esport
Arena Esport Accepted Answer
Pro
Awesome.

I guess there is no way for the last box to take fullwidth if there is an odd number of groups ? Otherwise nevermind.

Thank you again for your incredible work !
  1. more than a month ago
  2. Features Request
  3. # 6
Arena Esport
Arena Esport Accepted Answer
Pro
You have answered to all my questions,

Thank you for your time !
  1. more than a month ago
  2. Features Request
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.