Announcement

Collapse
No announcement yet.

Text Color on Extra Field Tabs

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

  • Text Color on Extra Field Tabs

    How do you change the text color on the Extra Field labels? I use 3-4 extra fields (Description, Dosage, Ingredients, Links) on my product listing page and the tabs that aren't active use a very light color (#ccc) so it makes them difficult to read. See any product at HolisticPetInfo.com and you'll see what I mean. I've looked at the CSS but can't seem to find where to change the color to something darker. Any suggestions?


  • #2
    It seems like it would be done on the product page. I found two older posts that refer to changes there. https://forums.3dcart.com/forum/shop...om-field-label

    https://forums.3dcart.com/forum/shop...-custom-fields

    Hope this helps some.
    http://www.pack-secure.com

    Packaging and Shipping Supply Specialists

    Comment


    • #3
      Thanks -- I looked at the post above and it doesn't indicate how to make the font color change in the CSS. I've looked at the product listing page (Listing_0.html) but still don't see where I change the font color for the non-selected tabs. I'm pretty sure it would be in the CSS but I can't figure where....

      Comment


      • #4
        JulieAndrus

        You more than likely don't have the rules in your default css as they are held in layout.css.

        So you will need to add the necessary rules and you will need to add 2 rules. 1 for the inactive tabs and 1 for the active tab. Reason being is that if you just add the inactive css it is related to the active tab and will change that one as well if the active tab css isn't specified independently.

        Inactive tab CSS rule:

        #listing0 .r-tabs .r-tabs-nav .r-tabs-anchor {
        background: #222222 none repeat scroll 0 0;
        color: #fff;
        }

        Active tab CSS rule:

        #listing0 .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
        background-color: #fff;
        color: #222;
        }

        So just add those to your active css file and change the colors accordingly. Hope this helps
        TheCartDesigner.com
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert


        Follow Us on Twitter

        Comment


        • #5
          Thanks Cart Designer -- I added the two rules to the default_modified.css but nothing changed on the live site. I also tried adding the whole block of rules for r-tabs from the layout.css but again, nothing changed on the live site.

          Here is what I added to the modified.css:

          .r-tabs {
          position: relative;
          }
          .r-tabs .r-tabs-nav {
          border-bottom: 1px solid #ccc;
          }
          .r-tabs .r-tabs-nav .r-tabs-tab {
          position: relative;
          top: 1px;
          }
          .r-tabs .r-tabs-nav .r-tabs-anchor {
          background: #FAFAFA;
          margin-bottom: 3px;
          padding: 10px 15px;
          display: inline-block;
          text-decoration: none;
          color: #666;
          font-weight: bold;
          }
          .r-tabs .r-tabs-nav .r-tabs-state-active {
          background-color: #fff;
          margin-bottom: -1px;
          border-top: none;
          border-right: 1px solid #ccc;
          border-left: 1px solid #ccc;
          }
          .r-tabs .r-tabs-nav .r-tabs-state-disabled {
          opacity: 0.5;
          }
          .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
          color: #000;
          background-color: #fff;
          border-top: 3px solid #000;
          }
          .r-tabs .r-tabs-panel {
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          border-left: 1px solid #ccc;
          margin-bottom: 3px;
          min-height: 200px;
          }
          .r-tabs .r-tabs-accordion-title .r-tabs-anchor {
          display: block;
          padding: 10px;
          background-color: #000;
          color: #fff;
          font-weight: bold;
          text-decoration: none;
          margin-bottom: 3px;
          }
          .r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
          opacity: 0.5;
          }
          .r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
          background-color: #fff;
          color: #000;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          border-left: 1px solid #ccc;
          margin-bottom: 0;
          }
          .r-tabs .r-tabs-nav {
          margin: 0;
          padding: 0;
          }
          .r-tabs .r-tabs-tab {
          display: inline-block;
          margin: 0;
          list-style: none;
          }
          .r-tabs .r-tabs-panel {
          background: #fff;
          padding: 15px;
          display: none;
          }
          .r-tabs .r-tabs-accordion-title {
          display: none;
          }
          .r-tabs .r-tabs-panel.r-tabs-state-active {
          display: block;

          Comment


          • #6
            Did you clear cache after you made the changes? Sometimes that is the issue with our site.
            http://www.pack-secure.com

            Packaging and Shipping Supply Specialists

            Comment


            • #7
              Originally posted by Pack Secure View Post
              Did you clear cache after you made the changes? Sometimes that is the issue with our site.
              JulieAndrus I double that. Be sure to clear your browser cache/store cache and refresh after you make the change to the css

              No reason to add all the tab rules. Just the ones I specified previously.
              TheCartDesigner.com
              Not 3dcart Owned or Operated
              100% Independent 3dcart Expert


              Follow Us on Twitter

              Comment


              • #8
                I cleared the cache on the control panel and that didn't work. Once I cleared the browser cache, the changes appeared. Thanks for the suggestion and thanks to the Cart Designer for the code.

                Comment


                • #9
                  You're Welcome.
                  http://www.pack-secure.com

                  Packaging and Shipping Supply Specialists

                  Comment


                  • #10
                    JulieAndrus I agree yet again, you are welcome
                    TheCartDesigner.com
                    Not 3dcart Owned or Operated
                    100% Independent 3dcart Expert


                    Follow Us on Twitter

                    Comment


                    • #11
                      Originally posted by thecartdesigner View Post
                      JulieAndrus

                      You more than likely don't have the rules in your default css as they are held in layout.css.

                      So you will need to add the necessary rules and you will need to add 2 rules. 1 for the inactive tabs and 1 for the active tab. Reason being is that if you just add the inactive css it is related to the active tab and will change that one as well if the active tab css isn't specified independently.

                      Inactive tab CSS rule:

                      #listing0 .r-tabs .r-tabs-nav .r-tabs-anchor {
                      background: #222222 none repeat scroll 0 0;
                      color: #fff;
                      }

                      Active tab CSS rule:

                      #listing0 .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
                      background-color: #fff;
                      color: #222;
                      }

                      So just add those to your active css file and change the colors accordingly. Hope this helps
                      Thank you worked great!

                      Comment


                      • #12
                        kelly You are very welcome
                        TheCartDesigner.com
                        Not 3dcart Owned or Operated
                        100% Independent 3dcart Expert


                        Follow Us on Twitter

                        Comment


                        • #13
                          Originally posted by thecartdesigner View Post
                          kelly You are very welcome
                          Hey another question on the one page checkout I would like to change the wording of:

                          Yes!, I would like to be notified of product updates.

                          Remember me! Create my California Academy of Health account.

                          But I don't see it in Store language?

                          Clue?:D



                          Comment


                          • #14
                            kelly Still in Store Language. store language search area: joinmailinglist
                            TheCartDesigner.com
                            Not 3dcart Owned or Operated
                            100% Independent 3dcart Expert


                            Follow Us on Twitter

                            Comment


                            • #15
                              Originally posted by thecartdesigner View Post
                              kelly Still in Store Language. store language search area: joinmailinglist
                              Nope no joinmailinglist? Or under mailinglist:eek:
                              Last edited by kelly; 10-24-2017, 07:54 PM.

                              Comment

                              Working...
                              X