Placeholder font style (andvalidation error border / input fields transparency))

Ah…if you are referring to the “placeholder” text in the fields, I know what is happening…it’s my fault for not adding this, but will need to do this on the next update.

In the theme’s style.css file around line 1602, look for this and copy it to your child theme’s style.css file:

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 0.875rem;
  line-height: 1.42857143;
  color: #616161;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
}

Then make it this:

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
input[type="hidden"],
select,
textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 0.875rem;
  line-height: 1.42857143;
  color: #616161;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
}

Then right after, look for this around line 1615:

input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: #bfbcbc;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(191, 188, 188, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(191, 188, 188, 0.6);
}

Add this batch to it and right after the input[text] one so that it resembles what we just did above:

input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
input[type="hidden"]:focus,

IMPORTANT: Keep the copied and modified CSS code in it’s own area in your child theme’s style.css so that if anything goes wrong, you can go back in and either delete it or check for any mistakes.

NOTE: I will be adding the modifications to the next theme update.

I just looked at your form…looks good and consistent actually on my end.

Regarding the position of the social icon, you could move it, but this would then require you to use a child theme (which you are using).

Copy the header.php file from the parent theme and paste into your child theme (same location that the parent them has it).

Open the file up and look for this:

                  // Social links
                  if ( has_nav_menu( 'social' ) ) :
                        echo '<nav class="social-menu" role="navigation">';
                            
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'depth'          => 1,
                            'container' => false,
                            'menu_class'         => 'social',
                            'link_before'    => '<span class="screen-reader-text">',
                            'link_after'     => '</span>',
                        ) );
                            
                        echo '</nav>';
                    endif;          
                ?>

Then move it below this line:

 
</nav><!-- .site-navigation -->

….and yes, it should be a new topic, but I already answered it here.

Good to hear 🙂