Announcement

Collapse
No announcement yet.

change top banner color in shadows 10.08.03

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    change top banner color in shadows 10.08.03

    Where can I change the background color of the banner in shadows. I have searched through the CSS files and am not being successful. I think I am looking for t-site-header__top-navigation. Any help is greatly appreciated. Many Thanks, Bonnie

    #2
    It's part of the navigation bar under global settings.
    Mark Hood
    Vermont Gear

    Comment


      #3
      Please disregard ... this post was meant for this thread .. https://www.miva.com/forums/forum/de...to-her-account

      One suggestion would be to use the inputmode attribute on the form input: https://developer.mozilla.org/en-US/...utes/inputmode

      The newest version of Shadows has this attribute on the login inputs and we have not heard any issues with the newest version of theme. Here is what the default Shadows input looks like:

      Code:
      <input id="Customer_LoginEmail_LOGN" class="c-form-input" type="text" inputmode="email" name="Customer_LoginEmail" value="" autocomplete="email" required="" aria-required="true">
      Looking at the input on your form the inputmode attribute is missing.
      Last edited by Nick; 02-23-24, 07:53 AM.
      Nicholas Adkins
      Technical Training Specialist / Miva, Inc.
      [email protected]
      https://www.miva.com/mivalearn

      Comment


        #4
        Nick are we on the same topic?
        Mark Hood
        Vermont Gear

        Comment


          #5
          Originally posted by Mark Hood View Post
          Nick are we on the same topic?
          Oops .. I edited my post ...

          If you are using the newest version of Shadows the core.css file has all the CSS variables which control the colors for the framework. Within the core.css file you can change the variable for the --gray-100 or the better option would be to update the class that is assigned to the <section class="t-site-header__top-navigation u-bg-gray-100"> to another class which has a color applied.

          By default the Shadows framework comes with these classes that can be applied to the HTML: https://github.com/mivaecommerce/sha...core.css#L2330

          So if you wanted the background to be red (#b13138) you would update the HTML to look like this:

          Code:
          <section class="t-site-header__top-navigation u-bg-red">
          Nicholas Adkins
          Technical Training Specialist / Miva, Inc.
          [email protected]
          https://www.miva.com/mivalearn

          Comment


            #6
            Thank You Nick and Mark... that worked!

            Comment

            Working...
            X