Support » Plugin: Admin Page Framework » How do I specify css class(es) in addSettingsField?

  • Resolved OllieJones

    (@olliejones)


    How can I use the array() passed to addSettingsField to give one or more of my own css classes to HTML elements in the field, to allow styling my admin pages?

    Or if there’s another way, that would be helpful.

    Great great stuff, but you already know that. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author miunosoft

    (@miunosoft)

    Hi,

    You can use the attributes or class field argument.

    The attributes argument overrides class attributes. It supports the following nested elements and can apply own values to corresponding elements:
    fieldrow
    fieldset
    fields
    field

    
    'attributes' => array(
        'fieldrow' => array(
            'class' => array( 'test-attr-fieldrow1', 'test-attr-fieldrow2' )    // accepts an array for multiple items
        ),
        'fieldset' => array(
            'class' => 'test-attr-fieldset1 test-attr-fieldset2'
        ),
        'fields' => array(
            'class' => 'test-attr-fields1 test-attr-fields2s'
        ),
        'field' => array(
            'class' => 'test-attr-field'
        ),
        'class'    => 'test-attr-input',
    )
    

    The class argument appends given selectors to the class attribute and supports the following elements:
    fieldrow
    fieldset
    fields
    field

    
    'class'    => array(
        'fieldrow'  =>  array( 'test-fieldrow1', 'test-fieldrow2' ), // accepts an array for multiple items
        'fieldset'  =>  'test-fieldset1 test-fieldset2',
        'fields'    =>  'test-fields',
        'field'     =>  'test-field',
    ),
    

    It is recommended to use the class argument as some elements with a class attribute are used by the framework for JavaScript and CSS. There is a known bug however with the class argument that the field input element also gets the added selectors for other elements. This might confuse you a bit but it is a bug.

    Thread Starter OllieJones

    (@olliejones)

    Thanks! Perfect.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.