Unfortunately, I can’t do anything here. My plugin can only display the field, but where the description of the field is displayed is buddypress responsibility or your theme. You can change the location of description editing your theme files. Look for /your-theme/members/profile/edit.php.
I’m afraid you can only put description above visibility settings. If you want to put under the title of the field you need to do more changes in my plugin surely or do it with css…
Would you know which code I should insert in the custom CSS to default the theme? I am no developer so can’t go into the Php files myself. And have no developers to help.
The other issue I have on this layout is:
* Text in checkboxes coming in caps which makes it difficult to read
* Visibility change option unformatted so stands out prominently
So code to fix this in css would be great. Thanks!
Here is what it looks like: http://commonsabundance.net/register/
I try to help you.
To put the description below the title of the field, you need to use position: absolute. I’ll try to explain.
First, create a class for the <div class=”editfield”> that is wrapping title, field, visibility and description.
.editfield {
position: relative;
}
Then, add this css to the class “form.standard-form p.description”. We are removing margin-top negative and put 0px. We are saying position: absolute and positionning 15px from top. The top is the previous div “editfield”. So it will appear just below the title of field but over the field.
form.standard-form p.description {
margin: 0 0 15px;
position: absolute;
top: 20px;
}
We need now to separate the field from the title to create space for our description. You can do this adding margin-bottom to the label (title of field) or adding margin-top to the fields. That’s all for description.
For checkboxes, create this instruction in css:
.editfield .checkbox label {
text-transform: none;
}
The last one, I’m not sure I understand what’s the problem with visibility option. Maybe you need to minify the text or change the font, so it will not emphasize much on the rest?
Thanks Donmik! I appreciate that you ‘walk me through it’!
Changing the position of the description works, but the description comes on top of the field areas, overlapping, so now we need to push the field area down under the description?
Here is what it looks like now from the register window: http://commonsabundance.net/register/
I’m glad of having the checkbox lines in normal text now. We now have (? not sure how it was before) the title of the checkboxes in the edit window that have an indent just like here on the search form: http://commonsabundance.net/advanced-profile-search/
For the last one you are right: minify text and make it grey as the rest shoud be ok!
Best
H
You’re welcome!
Yes, you need to push the field area down adding more margin-top or you can increment margin-bottom for the label to push down the field. There is more than one solution, you need to decide what solution is better for you. In my opinion, I believe you’ll need add custom css for each case.
For the “BRIEF BIO”, you need to add:
textarea#field_11 {
margin-top: 20px;
}
You can apply this to all textareas but in some cases it would not be good, you should need more margin-top or less. You need to study each case of your form. While I’m writing this, I was thinking instead of doing all this, maybe it was more easy using javascript to move the description.The next code would be much easier if you want to try and forget about position: absolute….
<script>
jQuery('p.description').each(function() {
// Saving the parent div.
var parent = jQuery(this).parent();
// Searching for first label: Title of field.
var label = parent.find('>label:first');
if (label.length == 0) {
// Searching for the title of field when field is checkbox.
label = parent.find('span.label');
}
// Writing a copy of description after label.
label.after(jQuery(this).clone());
// Removing the original description.
jQuery(this).remove();
});
</script>
In the register page, you have this css applied to the title of checkboxes:
#profile-details-section .checkbox span.label {
margin-left: -1.3em;
}
You only need to apply this css also in your search form like this:
.checkbox span.label {
margin-left: -1.3em;
}
Thanks, the titles of checkbox work. I’m not sure where to put the script. I tried it in the custom css but it didn’t seem to have any result (got rid of the css that made the overlap in the meantime, will put it beck if needed).
Hi,
It’s javascript you can put it in the php or any javascript file loaded in register and search pages. If you use javascript you will not need the css code.
Hi could you be more specific on where to put the script?
Would I insert the script in this one (it’s the only one I can access):
buddypress-xprofile-custom-fields-type/bp-xprofile-custom-fields-type.php
Where about, if yes? Thanks!
No, no, you need to put the javascript in your theme files. I don’t know what theme you are using but if you use default buddypress theme, you need to put this code in:
wp-content/plugins/buddypress/bp-themes/bp-default/registration/register.php
for registration.
You can write the code at the end of the page.
Hello,
Found that register, copied the script at the end before this closing line:
<?php get_footer( ‘buddypress’ ); ?>
Nothing happened, it doesn’t seem to work… Actually, the theme is the standard Cbox theme…
If you are using a custom theme, you need to write this code in your theme and not the buddypress default theme. In your case, for cbox theme, you can find the file in:
/wp-content/themes/cbox-theme/registration/register.php.
Remember if you use this code, you need to delete the css code I posted previously because it will not work with the javascript.
