Tagged: css, profile field
Hi,
I have added four profile fields menu(Basic info, Education details, Job details, Contact No)and each of these profile fields have some number of sub-fields (Just like form). User can edit these fields and can save.
When user, let’s say editing the education details, then this menu should have different css. or user should be able to idetified by the css that he is editing education detail fields. How we can do that?
Or in other words how can I change the profile field’s visited, hover or active css.Hi Kalpesh,
can you please tell me what do you mean by the menau? Do you mean the profile field groups? Or is it something elose?
If possible, Please link me to a screenbshot and I will be able to help. And, It does not matter how you have done it, It will always be possible to have different css.
Regards
BrajeshThanks for your response. The problem is given below in details.
(1) As I am the user, I logged in.
(2) I want to change my profile.
(3) I am having the following four profile field, which I can edit as (Basic info, Education details, Job details, contact details)
(4) each profile field have some fields, just like form.
(5) Now I clicked on Basic info.
(6) At this time (Basic info) should be of different color, and all other three fields should have the same color, because basic info field is active.
(7) and same as for others (If I clicked on any other profile field, then only that profile field should be of different color than other three fields.Edit your profile
(1) Basic Info (2) Education details (3) Job details (4) Contact details
Enter your basic info
Enter your Full Name …………
Enter Your Date of Birth ……..
Male or Female ………………As this time Basic info is active, so this should be of different color than other three fields.
Please help in this regards
Thank youHi Kalpesh,
I am sorry but your reply is not making sense to me.Can you please link me to a screenshot and show me what you want.
Thank you
BrajeshHi Kalpesh,
Thank you for the mail.By default, BuddyPress applies the class ‘current’ to the nav item.
You can use the following select to apply styles
.button-nav li.current { /**Put your styles here*/ }
That should work for you.
Hi Kalpesh,
Thank you. That is a little bit strange. Please use chrome developer tool and inspect the current tab. That should give you the idea.From the screenshot, that was the only valid guess I could make.
Hi,
Currently the inspect element is showing as<li class> == $0 < a href=””>xyz
When I edit in inspect element as
<li class = “current”> == $0 < a href=””>xyzThen it works fine. It means it is not picking the $select = ‘class=”current”‘;
Also checked the code in the file bp_xprofile-template.php
‘// Loop through field groups and put a tab-lst together.
for ( $i = 0, $count = count( $groups ); $i < $count; ++$i ) {// Setup the selected class.
$selected = ”;
if ( $group_name == $groups[ $i ]->name ) {
$selected = ‘ class=”current”‘;
}// Skip if group has no fields.
if ( empty( $groups[ $i ]->fields ) ) {
continue;
}// Build the profile field group link.
$link = trailingslashit( bp_displayed_user_domain() . bp_get_profile_slug() . ‘/edit/group/’ . $groups[ $i ]->id );// Add tab to end of tabs array.
$tabs[] = sprintf(
‘<li %1$s>%3$s‘,
$selected,
esc_url( $link ),
esc_html( apply_filters( ‘bp_get_the_profile_group_name’, $groups[ $i ]->name ) )
);
}
‘
You must be logged in to reply to this topic.