Custom classes for fields

[premiumsupport365]

Hi Michael

how are you, Hopefully you have already this Idea in your checklist. Right now the fields has the classes which are not predictable. for example if the fields has the class names related with the field id which is going to be unique, we can create our own style for the fields much easily and control them. Even better is passing section id too as a class name to sections.

[michaeluno]

Hi,

Do you mean class selectors assigned to the class attribute of field/section container elements?

[premiumsupport365]

Hi Michael,

Ya thats the idea, even better if we can pass argument as 'class' => 'custom_class', 'id' => 'Custom_id' but for now passing the field as the class name or id will make it work.

by this way you dont need to code CSS and give a shape to the fields and this will become a skeleton type where we can make it look in the way we want it. More flexibility is what we can achieve through this.

[michaeluno]

Sounds like the attributes argument is what you are looking for.

array( 
    'field_id'          => 'testing_custom_attributes',
    'title'             => __( 'Testing Custom Attributes', 'admin-page-framework-demo' ),
    'type'              => 'text',
    'attributes'        => array(
        'class'         => 'your_coustom_input_class_selector another_customselector'
        'id'            => 'testing_custom_attributes',
        'fieldrow'  => array(
            'class' => 'your_custom_fieldrow_class_selector',
        ),
        'fieldset'  => array(
            'class' => 'your_custom_fieldset_class_selector',
        ),
        'fields'    => array(
            'class' => 'your_custom_fields_class_selector',
        ),
        'field'     => array(
            'class' => 'your_custom_field_class_selector',
        ),
    ),
),     

Can you experiment with it and let me know if it works for you? One thing you need to keep in mind is that if you change the id attribute value, the submitted field value may not be saved in the options as the name attribute value is generated from the id and the option key and the index of the section and the field.

[premiumsupport365]

Hi Michael, Thats works flawlessly for individual fields

here is where actually we got stuck, if you take a repeatable section, you can see the the outer div wrap is coming as < div class="admin-page-framework-sections" id="sections-1cea711d0fdef38120f57166e16665d9">

and inner div as < div id="section-company_details__0" class="admin-page-framework-section"> < div id="section-company_details__1" class="admin-page-framework-section">

this is tough to control them via CSS, repeat controls are in the far right and we wanted to make it stand better and look appealing , but controlling it is not quite easy at the moment.

is it possible assign attributes to them too. and the above one you provided for fields does a pretty good job specially in repeatable field. Previously they were appended by _0, _1 now looks better with the class and ID name stands same throughout

[premiumsupport365]

updated my previous comment to show the code.

[ghost]

Hi Michael, here is a screenshot of where I am having difficulty to control the repeating section based on what the conversation is above.

Ciaran

[michaeluno]

@zebrawebdesigns I see. It's not possible to modify the attributes of section container elements at the moment. I'll see if the attributes argument for sections can be added.

Regarding the above field attributes argument, I just confirmed that the following part won't work. Their id and class attributes are protected. I'll see if I can change them to be able to be modified.

        'fieldrow'  => array(
            'class' => 'your_custom_fieldrow_class_selector',
        ),
        'fieldset'  => array(
            'class' => 'your_custom_fieldset_class_selector',
        ),
        'fields'    => array(
            'class' => 'your_custom_fields_class_selector',
        ),
        'field'     => array(
            'class' => 'your_custom_field_class_selector',
        ),

@cmwwebfx Looks interesting. I just don't see where you are having an issue from the picture.

[ghost]

I have targeted the outer container of the repeatable section to add style, however the next repeatable section as described above in what is not possible is being able to target the repeated section since it carries a unique ID each time _0, _1, _2... etc.

It would be great if there was a way to add class to this as described better above from @zebrawebdesigns

[michaeluno]

You may try using the .admin-page-framework-section class selector. It should apply to all the next repeated sections. There are three containers for sections. The structure looks like this.

<div class="admin-page-framework-sectionset">
    <div class="admin-page-framework-sections">
        <div class="admin-page-framework-section">
            ...
        </div>
        <div class="admin-page-framework-section">
            ...
        </div>
        <div class="admin-page-framework-section">
            ...
        </div>
    </div>
</div>

However, .admin-page-framework-section will also apply to sections with different section IDs. So I understand the need of modifying the attributes of those containers.

[ghost]

Thank you for understanding the need for this little modification Michael. What I love about this framework is that it is very naked and light, which gives us the end developer a completely perfect canvas to make a unique layout.

[michaeluno]

I've updated 3.3.1b. Download.

Now it includes the class and attributes arguments for sections which enables to add custom class selectors and attributes. Use them like this.

    array(
        'section_id'        => 'selectors',
        'title'             => __( 'Testing', 'admin-page-framework-demo' ),
        'attributes'        => array(
            'data-custom_data' => 'my_custom_data',
            'tab'   =>  array(
                'data-custom_data' => 'my_custom_data',
            )
        ),
        'class'             => array(
            'my_custom_section_class another_section_class',
            'tab'   => array(
                'my_custom_section_tab_class',
            ),
        ),
    ),

Note that the attributes argument array can override the class and id attributes set by the framework internally. So be careful modifying them. If the id attribute is changed, the scripts for tabs, repeatable/sortable sections and fields may not work properly. To modify the class attributes, it is recommended to use the class argument which just appends the set class selectors to the framework system class selectors.

Also, currently only the tab sub-argument is supported which applies to the <li> tags for tabs. I found it difficult to support the sectionset and sections containers due to the code structure and the control flow.

[premiumsupport365]

Awesome Michael Its working great :)

[ghost]

Thank you very much Michael, confirming this works a treat.

[michaeluno]

You are welcome. Glad to hear it works.

[michaeluno]

I've updated the 3.3.1b branch.

• Made it possible to override the class and id attributes for the fieldrow, fieldset, fields, field containers.
• Added the class argument for field definition arrays. It works as the same as the sections' class argument which appends the set class selectors to the system set class attribute values. The supported sub-arguments are:
  • fieldrow
  • fieldset
  • fields
  • field

[ghost]

Its Saturday night Michael, go enjoy a couple of beers for the fantastic work on this. Just sent mate.

[michaeluno]

Wao, thank you :D

[michaeluno]

It seems the class argument for fields has not been functional yet in v3.3.1. The class selector set in the top level of the class argument array gets inserted in all the field containers. It should only apply to the input tag and its behavior will depend on the field type.