user profile field names on new line/paragraph

[5high-photohub]

Hi there,

I’m using the default Kleo theme + BP and s2member framework. For full integration of s2member with BP, the base/required field (= name) is set in BP and all the other profile fields are set in s2member.

When viewing a user’s profile there are no line breaks between the different profile fields – screenshot attached with black dots showing the start of each different profile field. As you can see it’s hard to read, even though I’ve added a ‘|’ between fields.

Is there a way to add in either a line break or a paragraph break between these profile fields? I’ve checked in the theme settings but van’t find anything to change this, and I’ve looked with firebug but can’t see anything obvious as it all just sits under:
<div class="profile" role="main"> and
dl-horizontal field_1 field_name required-field visibility-public field_type_textbox

I apologise if this is really basic, but can’t figure it out at all!

many thanks.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you share admin account?

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[5high-photohub]

This reply has been set as private.

[Laura]

Hello, where did you add the text? Because the only field created is Name (check attachment) Please delete the text you added and add the fields so users can fill them

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[5high-photohub]

Hi there,

I use s2member framework pro to manage memberships, membership levels and page security for members-only pages. It is designed to be fully integrated with buddypress; so as long as you install Buddypress first, when you install s2member it recognises BP and enables certain features to work seamlessly with it. One of those is the profile fields. So they recommend leaving only the default field of ‘name’ in BP, and setting up all the others via s2m in s2member > General options > Registration/Profile fields and Options; and enabling the integration with BP (at the bottom of the same section). This is then fully integrated with BP and s2m.

Please note that as we are only just over a week to launch, our site is now in maintenance mode. Please let me know your IP address so I can whitelist it to allow you to still see the frontend.

Many thanks.

[empoweredanimals]

I’m also urgently wondering about this. We are just about to officially launch but we have members already.

This worked well before we switched over to this theme!

[empoweredanimals]

Still trying to sort out an answer to this. We are using s2member as well, with the profile fields created by s2member. They merged and showed up fine in twentythirteen, but do not work with Kleo. Help!

[empoweredanimals]

5high-photohub – I found a not-super-attractive workaround until Laura gets back to this thread with a real answer.

When you make the s2member profile fields, select the first box so that each one of them starts a new section, without a title. It doesn’t look pretty, but at least they’re in separate sections.

[5high-photohub]

@empowerdanim – brilliant! So I think you can mark this as resolves now laura, as it seems to relate to the s2m stying.

For others who are looking for a solution to the same issue, this is what I did:

I did as suggested above, by selecting a ‘new section’ without a heading for each of my profile fields in s2m > general Options > Registration/profile Fields and options.

This then shows a thin dividing line between fields as the default s2m styling if there’s no section header. So I removed this line by adding this code into my chil theme style.css:

COPY CODE

body.profile.public div.ws-plugin--s2member-profile-field-4bp-divider-section {
 border-bottom: none !important;
}

and now at least it’s all laid out better. Then to continue styling you’ll have to find the relevant s2m property to change according to what you need to do, as it looks liks all this central bit is determined by the s2m plugin.

Please let me know if my code is incorrect or there’s a better solution?

Thanks again empowerdanim and Laura and the 7thQueen support team 🙂

[empoweredanimals]

Genius, thank you!

I also added some padding at the bottom. I’d still like a colon or space or something after the profile field names, but it sure looks a whole lot better!

/* For s2member profile fields to show up ok */
div.ws-plugin–s2member-profile-field-4bp-divider-section
{
border-bottom: none !important;
padding-bottom: 10px !important;
}

[empoweredanimals]

Nevermind, I was able to append a colon and a space to the field label. Woot!

[5high-photohub]

PS. if you want to make the profile name a bit more prominent to break up the text I’ve just added the bold html tag () inline in the s2m profile edit section – and it seems to work OK! I did this because the whoile text block was goveredn by the Kleo default text style so couldn’t think of another way to do it easily.
Hope this helps?
Cheers, J

[empoweredanimals]

Great thanks! Sounds like we are developing really similar sites – so my site is http://animalbuildingblocks.com if you want to stay in touch and compare notes.

[5high-photohub]

@empoweredanimals – your site looks great! Yup, ours is here: https://www.the-photohub.co.nz and launches April 2nd, so is currently in maintenance mode. And thanks so much for your help with this profile styling problem – I’d totally forgotten about the s2m options like that as I’d set them up before we purchased the theme.

Just a quick query – as you’re using s2member for login (like us) are you having the same problem of it not redirecting for users? See my post in this forum here: https://archived.seventhqueen.com/forums/topic/log-in-not-redirecting-to-page . Just a thought,in case you can help solve the problem.

Thanks and good luck with your launch party!

[empoweredanimals]

Thanks! Formatting the profile fields more worked a treat!

Looking at your site there’s a counter of how many days until your launch on April 2. I know NZ is pretty far away from everywhere else (been there, love it, want to go back) but I still don’t think it’s 95 days until April 2. 🙂

I commented on the other thread. I have the same issue. I’m also wondering about another thing and I imagine it’s bad form to hijack this thread but since it’s settled anyway and nobody official seems to be reading recently anyway, here goes…

We have pages like this where the video content is protected by s2member. Have you found a way to protect just the video portion of a video post? I thought it would be nice to use the fancy Vimeo embed thing that comes with Kleo but then it’s all or none. By protecting just the video part of our page, we can get search engines to see the text.

Example: https://animalbuildingblocks.com/animal-care-boundaries/ (there’s a video for members that is replaced by the ‘join’ stuff for non-members.

[5high-photohub]

Thanks for the heads up on the 95 thingy! We have given admin login to a few others to sort out some site issues so it might have been accidentally reset then.. or just my bad maths for the number of minutes in each day!

re. protecting videos with s2m – I’m a newbie with this but I’d say you could wrap the video in a one of their shortcodes or sue their API scripts. But post to their standard forum and I’m sure it will be sorted.

Cheers 🙂

[Laura]

Hello, wow! i really didnt had to no thing here, i’m very happy that your could resolve this 🙂 i’m veyr sorry for late reply

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[5high-photohub]

No problem – the benefits of an open support community. And your team help with heaps of other stuff!
Cheers.

[Laura]

🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[empoweredanimals]

I’m having trouble with the profile editing page looking really awful in Safari. I don’t know if that was always that way or if it’s something new. Are you having the same issue, 5high-photohub? I’m posting here because I wonder if our workaround is not good after all.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, could you share a link? 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[5high-photohub]

Hi there,
sorry for the delay in my reply – I’ve just checked it on Safari for windows and it looks exactly the same as on Firefox.
maybe it looks different on a mac? or iphone?
Would be interested to hear the outcome/fix for this though.
Good luck!

[empoweredanimals]

This reply has been set as private.

[empoweredanimals]

Thanks for checking. So far, then, it’s only on Safari for the Mac. It looks fine on the phone. On the machine I’m on, I have Version 8.0.5 (10600.5.17). I’m not sure what the member is using. But it’s broken here.

[Abe]

Strange issue. Until next version please add this css to the quick css box to resolve it

COPY CODE

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #buddypress div.profile  { display: block; }
}

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[empoweredanimals]

Where is the quick css box? Sorry!

[5high-photohub]

in Theme Options > General settings – Quick css
Would be interested to know if this fixes it as I can’t repoduce it anyway 🙂

[empoweredanimals]

Nope, no change in Safari. 🙁

[Abe]

I tested myself and worked.
Try
@media screen and (-webkit-min-device-pixel-ratio:0) {
#buddypress div.profile { display: block !important; }
}
or if that doesn’t work just

#buddypress div.profile { display: block !important; }

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[5high-photohub]

@empoweredanim – Has the latest kleo update sorted out the styling issues for the s2m profiles in Safari on macs? Cheers, J

[5high-photohub]

Abe – can you clarify whether we’d still need this extra css to fix this issue? or is it incorporated in the latest update?
Cheers.

[Abe]

Hi, it should be in the latest update.

Cheers

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[5high-photohub]

Thanks, I’ll leave as is for now, unless @empoweredanimals gives feedback that it’s not working.
Cheers.

[empoweredanimals]

Oh no – I shouldn’t have installed the update right now. It sort of semi-fixed it, but now the whole page is too narrow.

What happens now is that in both Safari and Chrome, when I look at the profile page (and the profile edit page), it’s extremely narrow. They can, however, edit the fields. But it’s so narrow as to be almost unreadable.

Attachments:

You must be logged in to view attached files.

[5high-photohub]

Hi @empoweredanimals – have you removed your custom css, so it’s just the Kleo updated styling causing it? or do you have both in play?

[empoweredanimals]

Yes, I removed it as a test and it did not make a difference in the width. My css was only affecting the horizontal lines.

[5high-photohub]

Thanks for the update. So the horizontal lines issue is now fixed with the Kleo update, BUT the same update has broken the width (as per your last screenshot)? At least that’s what I understand from your last post… If so, any solution for this Abe?
Thanks.

[Abe]

There shouldn’t be a problem with content width

@empoweredanimals problems could come from a plugin or any other customizations.

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[5high-photohub]

Ok, though i thought it was related to the s2member plugin?? unfortunately i can’t check it out on a mac 🙁

[Author]

Posts