Styling alerts or error messages

Author Posts

wingedsealion November 27, 2020 at 12:30 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hi. I’m trying to style the default newsletter subscription form that gets set up by the “The Newsletter” plugin. All of the fields are required and if the user doesn’t fill them out, it puts a red border around the form field. I want to change the color of this border. I’ve been looking at this for many hours today and haven’t been able to figure out how to track down where that red is coming from so I can change it. Can Themeover manage styling for things that only change when there’s a problem, like these borders I described or an error message that pops up, for example? Is there a tutorial or forum post that I missed that might shed some light on how to accomplish this? Thanks in advance for your help!


Sebastian November 27, 2020 at 11:14 am

Hey,

You should be able to change the styling of the red border that only shows in response to an error.

  1. Load the form inside Microthemer
  2. Submit the form with empty fields to trigger the red border
  3. Select one of the red fields with Microthemer
  4. Click the show advanced link to expand the advanced options
  5. Under the Targeting suggestions tab, search the dropdown menus by typing ‘error’ into an input field (you may have to try a few different fields).
  6. Microthemer should list a class that sounds appropriate e.g. ‘.error-field’
  7. Select that option and then create a selector
  8. Make changes to the red border

If you don’t see any error classes using the method above, try the following:

  1. In Chrome, right-click one of the fields with the red border
  2. Choose Inspect
  3. See the HTML for that field – it will look like Microthemer’s HTML inspector, but it will also show dynamic classes (Microthemer may not display those in the HTML pane under some circumstances for performance reasons)
  4. Once you’ve found the dynamic class that is added to the form field (or a wrapper element), you can search for it in MT as per the instructions above

Does that make sense?

Cheers,
Sebastian

You must login or register to reply to this topic.