Skip Navigation

[Resolved] Selector naming and customisation

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 6 replies, has 2 voices.

Last updated by kelvinL-2 1 month, 3 weeks ago.

Assigned support staff: Christian Cox.

Author
Posts
#2154577
Screenshot 2021-08-29 at 12.59.57 PM.png

Dear Sir/Madam,

I have a parent-child add new post form, I want to customize the style to the parent field, how can I custom name the selector? I can't find the select1, how does the Toolset name the selector?

Here is the shortcode I placed in form

<div class="form-group">
	<label for="%%FORM_ID%%_@application-contestant.parent"></label>
	[cred_field field='@application-contestant.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='true']
</div>

Best regards,

Kelvin.

#2154817

If it's the only select2.js enabled select field in the Form, you can use the selector:

.toolset_select2.toolset_select2-container.toolset_select2-container--default

Sometimes overriding specific styles requires more specific selectors, so it depends on what you're trying to accomplish.

#2154831

Dear Christain,

I think I have to ask how I can custom name the selector when using the cred_field

<div class="form-group">
    <label for="%%FORM_ID%%_@application-contestant.parent"></label>
    [cred_field field='@application-contestant.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='true']
</div>

I want to name it and then I can design the CSS

#2155313
Screen Shot 2021-08-30 at 8.22.57 AM.png

There's no way to directly impact the CSS classnames on the span tag, but you could try either of these alternatives:
- Use an adjacent sibling selector that targets the select field as an adjacent sibling:

[cred_field field='@application-contestant.parent' class='form-control my-custom-class' output='bootstrap' select_text='--- not set ---' required='true']
.my-custom-class + .toolset_select2.toolset_select2-container.toolset_select2-container--default {
 /* your styles here */
}

- Target your selector using the ancestor div tag with an attribute selector:

div[data-item_name="select-@application-contestant.parent"] .toolset_select2.toolset_select2-container.toolset_select2-container--default {
  /* your styles here */
}
#2156565

Dear Christian,

May I know whether toolset_select2 is predefined and won't be changed if I add selector from different form?

Best regards,

Kelvin.

#2157499

May I know whether toolset_select2 is predefined and won't be changed if I add selector from different form?
Yes, toolset_select2 is predefined. There is no toolset_select1, toolset_select3, etc., only toolset_select2.
This class is part of the select2.js implementation in Forms relationship fields. If there are only a few possible related posts to choose from, a standard HTML select field dll be shown. If there are more than a specific number of related posts (I think it's 15 or 16), then the select2.js replacement will be shown instead.

https://select2.org/

#2159863

My issue is resolved now. Thank you!