Custom CSS to change 'Save' button text

Hi all!

I wanted to share a Custom CSS trick to change the “Save” button text on your “create” layouts.

Disclaimer: css-xxxx classes can change at any time!

You will need to find your own css-xxxx class in your console by right clicking > inspect over the “Save” button. Then hover over the classes on the side panel on the right to find the exact classification:

Here is what your CSS should look like:

.chakra-button.admin-detail-view-save-button.stk-button.stk-button-sm.css-i32fpz {
  font-size: 0px;
}
.chakra-button.admin-detail-view-save-button.stk-button.stk-button-sm.css-i32fpz:after {
  font-size: 14px;
  content: 'Submit'!important;
}

Final result:

Hope this helps! Leave any comments or questions below :slight_smile:

Brittany

Changing the word “next” on the list layout to “forward”:

.chakra-text.stk-text.stk-pagination-next.css-d44n3c
{ font-size: 0px;}


.chakra-text.stk-text.stk-pagination-next.css-d44n3c:after
{ font-size: 14px;
  content: 'Forward'!important;
}

Great! Thank you for sharing this customm CSS!

1 Like