I'm using Matrix fieldtypes in a front end Safecracker form and to say it looks terrible would be an understatement... I'm wondering whether there is a definitive guide to styling matrix elements in safecracker / frontend forms?

Does anyone have any tips?



3 Answers 3


Any front-end issues with showing interactive custom fields (aka Playa, Matrix, etc.) should be due to either:

  1. Conflicting JavaScript
  2. Conflicting CSS (classes/IDs)
  3. Missing or corrupt files in the Themes/Third Party folder for the particular add-on

I've used all P&T add-ons as part of a Safecracker form (buffalo.com, getrightmusic.com, iacp.com, etc.) and as Lisa says it should look pretty much the same as the back-end counterpart.


I generally just add {field:my_field_name} and the usual P&T goodness you get in the CP comes to the fore.

  • Thanks Steven. The thing is that sometimes you may want to change the styling to bring it inline with the site you're working on. Commented Jan 8, 2013 at 8:58
  • 1
    ah OK - I guess then you could wrap Matrix field with a div and id and then make edits to the core Matrix CSS? Commented Jan 8, 2013 at 21:13


Do you have a screenshot? The front-end matrix forms should look nice, similar to the back-end, in your Safecracker form.

Also, seeing the template code and version numbers would be helpful.

Thank you!

Pixel & Tonic

  • 3
    Just a general note about SE, it varies differently from other support systems in that you aren't supposed to answer a question with a question. Use the comments to ask questions and give a formal reply once you have enough information. This ensures all answers are of the highest quality. Commented Jan 8, 2013 at 5:38
  • Thanks Lisa. If I want to override the styling, do you of a best practice way of doing that? Commented Jan 8, 2013 at 9:01
  • 1
    Jim, have you seen getsatisfaction.com/pixelandtonic/topics/matrix_and_safecracker? Is that the kind of customization you are after? -Lisa
    – Lisa
    Commented Jan 8, 2013 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.