Custom Fields
Re-Envisioned
Support Meta Box Group Text Colour Changes

  • Creator
    Topic
  • #26471
    Resolved Martin
    Participant

    Hi,

    I've been trying to apply the Custom CSS Style to be able to change the style on the text for the Add More Text. I'm not sure if it's implementing right. I'm simply referencing the name of my CSS class in the box and the CSS itself is going in the Additional CSS for my theme.

    This is what I have for the CSS class (just junk while I try to get it working).

    .group_style {
        text-decoration: overline;
        text-decoration-color: red;
        font-weight: bold;
        color: #ff0000;
    }

    What I see is that the font-weight seems to work fine and only seems to apply to the Add More Text (which is what I want) but I think this is more by luck than anything else. The only other style I've applied that seems to work is the background-color which appears behind a number of the cloned groups so probably as expected. None of the others here seem to do anything but I do see them appear briefly while the page is being rendered but when fully rendered the styles have been overridden and vanish.

    Have I done something wrong? Or is it that the feature doesn't actually work the way I think it does?

    All I actually want for now is to make the Add More Text stand out better as the users aren't noticing it there.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #26478
    Long Nguyen
    Moderator

    Hi Martin,

    You can try this sample CSS code to style the "Add more" button (cloneable).

    .rwmb-button.add-clone {
        background-color: red;
        padding: 10px;
        font-size: 20px;
    }
    #26483
    Martin
    Participant

    Perfect. Thanks for that. Incidentally, is there a documented list of all these sorts of things anywhere?

    #26491
    Long Nguyen
    Moderator

    Hi,

    Not yet. The Meta Box plugin focuses on functionality on the backend so the CSS to style the field input is not necessary to create the documentation.

    You can use the Inspect tool of the browser to find the class to set the selector https://developers.google.com/web/tools/chrome-devtools/css.

    #26492
    Martin
    Participant

    OK. No problem.

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