Buddypress Profile Fields

This topic has 16 replies, 3 voices, and was last updated 9 years by sharmstr.

Author
June 5, 2015 at 22:41 #61219

Kieran
Participant

Hi,

I’ve got a quick question regarding CSS of profile fields on desktop / mobile. How would I go about having the profile fields and profile data on two separate lines in desktop as it is in mobile. I attach two images below to explain what I am on about.

Thanks in advance for your response 🙂

June 5, 2015 at 22:46 #61221

Kieran
Participant

Forgot to add screenshots

(Desktop)

Attachments:
You must be logged in to view attached files.

June 5, 2015 at 22:47 #61223

Kieran
Participant

Forgot to add screenshots

(Mobile)

Attachments:
You must be logged in to view attached files.
June 5, 2015 at 22:49 #61225

sharmstr
Moderator
try this
COPY CODE
```
#buddypress div.profile .dl-horizontal dd {
  margin-left: 50px;
  clear: both;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
June 5, 2015 at 23:00 #61227

Kieran
Participant

Hi @Sharmstr,

I applied the above CSS to the child theme, it worked in the sense of creating two different lines, however, it’s not aligned (see screeenshot below), any thoughts? Thank you for your reply 🙂

June 5, 2015 at 23:01 #61228

Kieran
Participant

DOH! I forgot the screenshot again! (bad day..)

Attachments:
You must be logged in to view attached files.

June 5, 2015 at 23:01 #61230

sharmstr
Moderator

I dont see a screenshot, but play with the margin-left settings.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
June 5, 2015 at 23:13 #61233

sharmstr
Moderator
Try all of this instead
COPY CODE
```
#buddypress div.profile .dl-horizontal dt {
  float: left;
  text-align: left;
}

#buddypress div.profile .dl-horizontal dd {
  clear: both;
  margin-left: 0;
  text-align: left !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
June 5, 2015 at 23:14 #61234

sharmstr
Moderator

See attached from the above code

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:
You must be logged in to view attached files.
June 5, 2015 at 23:22 #61239

Kieran
Participant
Hi,

I just tried your CSS provided with a tweak for margin on both and it worked a charm, I forgot to mention I was using the tabs from Kleo instead of the default (as per your screenshot above), thank you so much for your help as ever @sharmstr !
COPY CODE
```
#buddypress div.profile .dl-horizontal dt {
  float: left;
  text-align: left;
margin-left: 15px;
}

#buddypress div.profile .dl-horizontal dd {
  clear: both;
  margin-left: 15px;
  text-align: left !important;
}
```
June 5, 2015 at 23:25 #61241

sharmstr
Moderator

Great. 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

September 9, 2015 at 16:04 #76703

Fwbox
Participant

Hello Sharmstr,

I see your screenshot with your icon tab on profil ? You have use a plugin or development for this ?

Thanks

September 9, 2015 at 16:08 #76706

sharmstr
Moderator

I dont understand your question. There is nothing custom there. The profile icon is there by default

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

September 9, 2015 at 17:03 #76728

Fwbox
Participant

Sorry,

I’m looking for a custom menu to profil (see screenshot)

Attachments:
You must be logged in to view attached files.

September 9, 2015 at 17:13 #76732

sharmstr
Moderator

That’s not custom. That’s why I’m confused about your question. http://seventhqueen.com/themes/kleo/members/demo/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

September 9, 2015 at 17:15 #76734

Fwbox
Participant

Thanks, but i have Sweetdate and they have no icon with the profil menu.

September 9, 2015 at 17:17 #76735

sharmstr
Moderator

Then I cant help you. This is a Kleo forum.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Author

Posts