change top banner color in shadows 10.08.03

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • bonnie1525
    Mivite


    • Oct 2007
    • 138

    #1

    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
  • Mark Hood
    Mega Mivite








    • Nov 2006
    • 2560

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

    Comment

    • Nick
      Super Moderator











      • Dec 2011
      • 578

      #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

      • Mark Hood
        Mega Mivite








        • Nov 2006
        • 2560

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

        Comment

        • Nick
          Super Moderator











          • Dec 2011
          • 578

          #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

          • bonnie1525
            Mivite


            • Oct 2007
            • 138

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

            Comment

            Working...
            X