Topic: How make (required) turn to * in red color for custom fields · BuddyPress.org

Skip to:: Content; Pages; Categories; Search; Top; Bottom

How make (required) turn to * in red color for custom fields

3T_MJ
Participant

@3t_mj

9 years, 1 month ago

the xprofile fields are driving me crazy.

I am about to adapt the register page to me needs.

I do want the text “(required)” getting replaced by “*” and star should be styled in red color.

Unfortunately the (Required) doesn’t have an own css class. I added a span tag with css class to the basic fields in register.php but I don’t find where to do this for the xprofile fields.

It also doesn’t work if I try to add the css class in the language file, it gets displayed as plain text then.

if I style the label not only the “*” but also the label title will turn red. I don’t know what else I could do?

ICan someone give me a hint where I can add the <span class=”required”>*</span> for the xprofile fields that are mandatory?

I thought it would be easy to add some simple css but unfortunately it seems to be impossible. Or have I overlooked something?

Viewing 1 replies (of 1 total)

danbp
Participant

@danbp

9 years, 1 month ago
Hi @3t_mj,

this can be done CSS, using :after pseudo selector. All labels containing (required) have a for attribute which let you select them individually. You can also apply a rule by field type.
As the string (required) is in translation, remove it from there and use & nbsp;(without space after & ) in place of.

Here a working example, with both technique.
```
/* Register bp section */
#profile-details-section .field_type_textbox label:after {
  content: " *";
  color: red;
  position: relative;
}

/* Register WP section */
#basic-details-section label[for="signup_username"]:after {
  content: " *";
  color: red;
  position: relative;
}
```

Viewing 1 replies (of 1 total)

The topic ‘How make (required) turn to * in red color for custom fields’ is closed to new replies.