Border style of comment field

Hi @krischan941 – I spot-checked your site but couldn’t quickly find an example of a comment form. Would you be able to provide a link to a post with a comment form so I can have a look?

Thanks for the link to a sample comment form.

Before we get into the focus state on the fields there, I noticed that you’ve been adding custom CSS to the Twenty Twenty-Two style.css file directly. It’s not advisable to do that, because the next time the theme is updated, all your custom CSS will be wiped out.

Have you been modifying other theme files in addition to style.css?

If not, I’d suggest you add your custom CSS to the built-in CSS editor instead. You can access it here:

https://storch.watch/wp-admin/customize.php

If you have changed other files as well, I’d strongly recommend you create a child theme instead. A child theme will keep your changes safe when the theme is updated in the future. The simplest way to make a child theme of a block theme (a theme that supports Full Site Editing, like Twenty Twenty-Two) is by using the plugin Create Block Theme. Once your child theme is created, you can go ahead and deactivate the plugin.

As for the CSS, the current outline is coming from the focus: visible state, the look of which is controlled by the browser.

To remove it and add your orange dotted outline instead, try this:

/* Comment form fields */
.comment-form textarea:focus-visible,
.comment-form input:focus-visible {
  outline: none;
  border-style: dashed;
  border-color: #c27113;
}

Do keep in mind that the outline is mainly there for accessibility reasons, so ideally you wouldn’t remove it. See here for more info:

https://hacks.mozilla.org/2019/06/indicating-focus-to-improve-accessibility/

I used the Plugin “Create Block Theme” and “exported my current theme”. But I see it’s bad practice with edited style.css.

Ah, I see. Doing that is called “forking” the theme, rather than creating a child theme. Forking a theme by making a copy of it means that if Twenty Twenty-Two gets updated in the future, your site wouldn’t get those updates. The benefit of making a child theme is that you do get the benefit of Twenty Twenty-Two theme updates in the future, while preserving your changes.

It would still be good if you can answer my question, since this would help me better understand if you actually need a child theme or not:

Have you been modifying other theme files in addition to style.css?

If all you want to do is add custom CSS, then using the custom CSS editor is the simplest route, and you don’t need a child theme, nor would you need to fork the theme.

• This reply was modified 1 year, 8 months ago by Kathryn Presner. Reason: fixed typo

Perfect, glad you’re set for now!