Announcement

Collapse

Posting Rules

Posting Rules
This forum was created to help 3dcart users share tips on getting the best out of the service, offer knowledge and experiences about e-commerce in general, and to promote a positive environment in which our merchants can request/dispense advice regarding best practices.

The forum was not created for 3dcart users to submit requests for customer support. Any support related thread will be removed and a support ticket will be placed on your behalf. If you have technical difficulties please visit http://support.3dcart.com.

The 3dcart forum is also not intended to be a medium in which to express dissatisfaction about 3dcart's service, policies or its management and staff. Threads of this nature will also be removed from the forum. If a support issue with your 3dcart store was not resolved in a satisfactory manner; or if you feel that a particular 3dcart offering/policy is not to your liking, please let us know by emailing [email protected] so we can address your concerns directly.

Again, our purpose is to cultivate a positive learning environment for our merchants rather than platform in which to express grievances.

Very Important Rules:
* Never give away your store administration login/password in this forum.

Should you need technical help, please let 3dcart staff help.
Also, please be aware that 3dcart staff will NEVER need to ask for your 3dcart related passwords.

General Rules:
* While debate and discussion are acceptable, we will never tolerate rudeness, insulting posts, personal attacks or inflammatory posts. Our decision is final in these matters.
* Please refrain from posting meaningless threads, one word (or short) nonsensical posts, or similar postings.
* Multiple or repeated posting in order to increase your post count is not allowed.
* Advertising, spamming and trolling is not allowed. This includes using the forum email and Private message system to spam other members.
* We also do not allow posts that are sexual in nature.
* Please wait at least 24 hours before bumping posts.
* Discussion of illegal activities such as software and music piracy and other intellectual property violations are not allowed.
* Each member is allowed one login account. Registering with multiple accounts is not allowed.
* We reserve the right to remove offensive posts without notice.
* We also reserve the right to remove postings which are in violation of our specified posting rules
* Also, while these rules cover most common situations, they cannot anticipate everything. Consequently, we reserve the right to take any actions we deem appropriate to ensure these forums are not disrupted or abused in any way.
* You cannot post any affiliate or referral links, or post anything asking for a referral. Such posts will be subject to removal.
* You cannot post advertisements or notices for contests.
* We also reserve the right to ban anyone who willfully violates the forum rules, as access to our support forums are a privilege and not a right. A banned customer is still entitled to support from the support system, but will not be able to participate in the forum.
See more
See less

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

  • #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

        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?

          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

              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

                  Comment

                  Working...
                  X