Custom CSS class

Support General Custom CSS classResolved

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35470
    kapitanpejsek@gmail.com[email protected]
    Participant

    Hello,
    where do I define classes to be used in Custom CSS class field in Advanced tab for a Custom field?
    I´ve read this article https://metabox.io/style-meta-boxs-custom-fields-using-css/#create-a-css-file-in-your-child-theme but this refers to a different approach. It is not about the use of Custom CSS class option.
    Thanks

    #35478
    Long NguyenLong Nguyen
    Moderator

    Hi,

    You can add custom classes to a custom field in the Advanced tab, option Custom CSS class, and separate them by space. Screenshot https://monosnap.com/file/JiGv0NOrapjy2NgOXHsnFCml6nZGAa

    #35479
    kapitanpejsek@gmail.com[email protected]
    Participant

    Hello again.
    I understand where to put classes, I don't know, where to define them. It is probably trivial, but I'm stuck here. I've tried some classes I already use globally, but no success.
    I'm an Oxygen user, if it's relevant.

    #35497
    Long NguyenLong Nguyen
    Moderator

    Hi,

    The classes are used to style the custom fields in the backend or the frontend form in the frontend. If you want to style the field value on the frontend, please add the HTML tags with classes to style them. Or contact Oxygen support to ask for help with this case.

    #35498
    kapitanpejsek@gmail.com[email protected]
    Participant

    For now I need to style custom fields in the backend. Where or how would you define test-class-1 and test-class-2 as is on your screenshot? Which css stylesheet does it use? Is the problem Oxy-related?
    Thank you.

    #35517
    Long NguyenLong Nguyen
    Moderator

    Hi,

    You can use add this code to the file functions.php in the theme/child theme folder to apply the custom CSS code in the admin area

    add_action('admin_head', 'my_custom_css');
    
    function my_custom_css() {
      echo '<style>
        .test-class-1 {
          background-color: red;
        } 
      </style>';
    }

    or use the plugin https://wordpress.org/plugins/admin-css-mu/ to apply the CSS code.

    #35521
    kapitanpejsek@gmail.com[email protected]
    Participant

    Thank you, great response!
    I managed it via Scripts Organizer plugin in Oxygen.
    I suggest to include this little tutorial into Meta Box documentation.

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