Blazey Web-Development

Last Modified at Wednesday, 28. August 2019 - 13:35

Change Comment Fields


The “Theme” Astra is quite new and the content can be loaded very quickly. Some settings can be performed via an internal menu. However, you have to set more special things manually. When it comes to the design of the homepage, this is done CSS. The following CSS snippets I used to reduce the size of the large comment field by allowing visitors to comment on something. It was a little too big for me and the empty white text input area stood out too much. However, I have only changed the height of the range. The reason for this is the view of this area on a mobile phone. It doesn’t adapt so easily in width with these CSS snippets. I also changed the text size and color. Here, too, care must be taken to ensure that everything on the mobile phone / tablet is displayed optimally.  The code was generated with siteorigin css. The results are then a css file for the current theme (with me the Astra Child) in the upload/so-css/xxx.css)

Here’s the CSS code:

#reply-title.comment-reply-title {
  color: #2e4704;
  font-size: 200%;
  font-weight: 700;
.comments-area textarea#comment {
  font-size: 20px;

  height: 200px;
  line-height: 25px;
  text-align: left;
  white-space: pre;
#comments .submit {
  background-color: #2e4704;
a:hover {
  color: #2e4704;
input[type=“email“], input[type=“number“], input[type=“password“], input[type=“reset“], input[type=“search“], input[type=“tel“], input[type=“text“], input[type=“url“], select, textarea {
    color: #666;
    padding: .45em;
    height: 50px;
    border-width: 1px;
    border-style: solid;
    border-color: #eaeaea;
    border-radius: 2px;
    background: #fafafa;
    box-shadow: none;
    box-sizing: border-box;
    transition: all .2s linear;

Here’s what it looks like:

I simply adapted the text in the comments section in the language file for German. The English terms are optimal in terms of text length, especially for the mobile phone. I will also shorten the text on the button… Here’s a look at the Siteorigin css tool for analyzing and changing the annotation heading. (Click on magnification) – Including the view in Firefox browser with the internal DEV tool. This allows you to virtually modify the website without really changing the page. However, the displayed code can be copied and used for customization in the back front…

Leave a Comment

Your email address will not be published. Required fields are marked *