Announcement

Collapse
No announcement yet.

CSS question: how to override code from another stylesheet

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

  • CSS question: how to override code from another stylesheet

    Hello Gurus!

    I am creating a site, http://theamericancentralstore-com.3dcartstores.com/ and have tweaked the CSS. Despite a ton of caching irritations, it has worked well, except for one task, and I need to ask for direction...

    I am using a Core Template called Cheapest-tickets-hub-core, which is one of the few which offers Left Sidebar Category navigation, which is what I want.

    I would like to change the color of the sub-categories which drop-down from the Left Sidebar Categories. I can change it in the Firefox Inspector and it works great, but it won't stick. It's in the Custom CSS file but is being overwritten by something which makes it "transparent" instead of the color I want, which is #fef7eb.

    I realize that I need to place some code in there which will overwrite the other instruction, but I sadly have no idea what that code should be or where to put it in my Custom CSS file.

    .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: #fef7eb;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;

    Thanks for any and all help!

    ... Connie Z
    Connie Zimmermann
    (an eCommerce newbie)
    www.AmericanCentralStore.com

  • #2
    Connie Zimmermann

    You already have a supporting rule in your default_modified css file but there is no color specified:

    .navbar-nav > li > .dropdown-menu {
    box-shadow: none;
    left: 100%;
    top: 0px;
    }

    Just add your css declaration to the rule:

    .navbar-nav > li > .dropdown-menu {
    box-shadow: none;
    left: 100%;
    top: 0px;
    background-color: #fef7eb;
    }

    Then clear your store cache (does not matter whether it is checked or not), clear browser cache, and then refresh the page. If it does not show still, go to your http://theamericancentralstore-com.3.../myaccount.asp and clear store cache and refresh there and see if it show on that page. If so.. go back and refresh the home (or any other) page again.

    Hope this helps
    TheCartDesigner.com
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert


    Follow Us on Twitter

    Comment


    • #3
      alternatively you can rename the css file which it looks like you have been doing already after changes
      TheCartDesigner.com
      Not 3dcart Owned or Operated
      100% Independent 3dcart Expert


      Follow Us on Twitter

      Comment


      • #4
        Originally posted by thecartdesigner View Post
        Connie Zimmermann

        You already have a supporting rule in your default_modified css file but there is no color specified:

        .navbar-nav > li > .dropdown-menu {
        box-shadow: none;
        left: 100%;
        top: 0px;
        }

        Just add your css declaration to the rule:

        .navbar-nav > li > .dropdown-menu {
        box-shadow: none;
        left: 100%;
        top: 0px;
        background-color: #fef7eb;
        }

        Then clear your store cache (does not matter whether it is checked or not), clear browser cache, and then refresh the page. If it does not show still, go to your http://theamericancentralstore-com.3.../myaccount.asp and clear store cache and refresh there and see if it show on that page. If so.. go back and refresh the home (or any other) page again.

        Hope this helps
        Thank you SO VERY MUCH thecartdesigner !! You saved the day!!! I had put the code in a different spot. This one:

        .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: #fef7eb;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        }


        I was close... but NO cigar!! :p

        My site is almost ready, and this was one of the last issues. My last issue, is that I want to round the corners of the boxes in the left sidebar, but I've been told by 3DCart that those settings are in the HTML and not in the CSS. To me it seemed like a CSS task, but they said, "nope." They are going to quote me a price today to do that work.

        I was an old-school web designer a bunch of years ago, before CSS. Many of my old skills are coming in handy, but CSS is a giant learning curve.

        Thanks again. You are a gift. ... Connie
        Connie Zimmermann
        (an eCommerce newbie)
        www.AmericanCentralStore.com

        Comment


        • #5
          I would like to change the name of this Topic since I was incorrect in what I was trying to do, but since I can't I'll place it here in the thread: How to change the color of a drop-down?
          Connie Zimmermann
          (an eCommerce newbie)
          www.AmericanCentralStore.com

          Comment


          • #6
            This is done with css. You can add the following in red. Change the pixel setting to whatever you want

            .widget-header {
            padding: 10px 25px 10px 25px;
            font-size: 16px; font-weight: bold;
            text-transform: none; color: #ffffff;
            font-family: 'Open Sans', sans-serif;
            background: #013543;
            border: none;
            border-radius: 25px;
            }


            #modManufacturer {
            background-color: #80251f;
            padding-bottom: 22px;
            margin-bottom: 8px;
            border-radius: 25px;
            }

            Comment


            • #7
              Originally posted by JoeBTI View Post
              This is done with css. You can add the following in red. Change the pixel setting to whatever you want

              .widget-header {
              padding: 10px 25px 10px 25px;
              font-size: 16px; font-weight: bold;
              text-transform: none; color: #ffffff;
              font-family: 'Open Sans', sans-serif;
              background: #013543;
              border: none;
              border-radius: 25px;
              }


              #modManufacturer {
              background-color: #80251f;
              padding-bottom: 22px;
              margin-bottom: 8px;
              border-radius: 25px;
              }
              Thank you so much JoeBTI!! That totally worked! :) I don't know why tech support told me that it would have to be custom coding. :rolleyes:

              May I trouble you for an opinion about something else? :)

              I changed the background color of this template from a dark blue to a parchment color (light-tan). The Cart Icon image is white and is visible on dark blue, but fades into the new background color. I have created an icon in my site color. I renamed the white icon to icon_white.png and changed mine to icon.png and now it look good. But is there a way to point to my icon using CSS? I'd rather have my icon named differently, and leave the default icon.png alone.

              Edit: Interestingly, the Responsive Cart Icon is already a dark color and looks fine on my mobile device.

              Thanks!! ... Connie
              Connie Zimmermann
              (an eCommerce newbie)
              www.AmericanCentralStore.com

              Comment


              • #8
                I don't see a white cart icon on desktop or mobile. Looks blue

                Comment


                • #9
                  Originally posted by JoeBTI View Post
                  I don't see a white cart icon on desktop or mobile. Looks blue
                  Yes, it's blue because I switched out the icons. I renamed the white one to cart_white.png, and named my blue one to cart.png, which is what I guess the HTML is pointing to.


                  But is there a way to point to my icon using CSS? I'd rather have my icon named differently and point to it, and leave the default icon.png alone. That way if there is some kind of update to the HTML it won't matter because I'll be overriding the HTML, or other style-sheet.

                  Am I thinking correctly on this?

                  Thanks so much! ... Connie
                  Connie Zimmermann
                  (an eCommerce newbie)
                  www.AmericanCentralStore.com

                  Comment

                  Working...
                  X