Announcement

Collapse
No announcement yet.

Help with layout.css

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

  • Help with layout.css

    http://sid-com.3dcartstores.com/150-...238.html#tab-1

    On this page I am trying to edit the text color for "Resource" I want it to be the same color as description. I have found the r-tab in the layout.css file but nothing I do seems to fix it.

    Code:
    /* Listing Tabs */
    .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: #ccc;
        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;
    }

  • #2
    Here's your problem:
    HTML Code:
     .r-tabs .r-tabs-nav .r-tabs-anchor {color:#ccc;}
    Webmaster: Texas Media Systems

    Comment


    • #3
      I updated that section to say
      .r-tabs .r-tabs-nav .r-tabs-anchor {color:#000;}
      The website still isn't updating with that new color

      Comment


      • #4
        Did you add that CSS to layout.css? Try adding it to default_modified.css instead. It's linked after the layout.css and so it should over-write whatever color it's trying to use. To be honest, I'm not sure that changes you make to layout.css stick -- the file still shows {color:#ccc} right now.
        Webmaster: Texas Media Systems

        Comment


        • #5
          I've been editing it to #000 and waiting an hour or 2 and not seeing any results so i've switched it back. I was looking through default_modified.css and don't see anything about r-tabs

          Comment


          • #6
            That's correct; you'll have to add the code to default_modified.css and be sure it's not inside any conditional brackets (@media...)
            HTML Code:
               .r-tabs .r-tabs-nav .r-tabs-anchor {color:#000;}
            Webmaster: Texas Media Systems

            Comment


            • #7
              That worked!! THANK YOU!

              Comment


              • #8
                What do you do if the default_modified.css has no ".r-tabs code"? No panel reference either. I can't find the code for the extra_fields tab to change the color. I am using template v32004-html

                Comment


                • #9
                  Originally posted by Davef View Post
                  What do you do if the default_modified.css has no ".r-tabs code"? No panel reference either.
                  default_modified is loaded after Layout.css. So anything in it will overwrite what is in Layout.css. Just copy that section from the latter and put it in default_modified with your modifications. Then clear the Cache.
                  I found it is very helpful to notate each new thing you add to default_modified with an explanation /* This is an explanation */

                  Comment


                  • #10
                    What variables in the layout.css file control the NON-hover color of the "write a review", "add to wishlist" and "email a friend" buttons? The hover color is controlled in my default css with the other buttons, but not those 3. I'm guessing this is in the layout.css file. using tempage V40001-html5

                    Comment


                    • #11
                      I don't use that template, but this what it is on my template. I would suggest you watch a couple of videos on Chrome Developer Tools to learn to inspect elements.
                      Try adding this to default_modified. The background controls the button, the color controls the text.
                      .accent-bg-color {
                      background: #e2e2e2;
                      color: #000;
                      }

                      Comment


                      • #12
                        Originally posted by elightbox View Post
                        default_modified is loaded after Layout.css. So anything in it will overwrite what is in Layout.css. Just copy that section from the latter and put it in default_modified with your modifications. Then clear the Cache.
                        I found it is very helpful to notate each new thing you add to default_modified with an explanation /* This is an explanation */
                        I hope I am not too late......:) I want to change the color of the "Custom Fields" tabs. So I did what was suggested above. I found the code needed to make the change by using Google's Developer Tools. Went to “Common-html5/css/layout.css” and copied the code. I made some color changes and pasted the changed code to Templatename.html5/css/default_modified.css. I added an explanation, uploaded via FTP, cleared cache and nothing.

                        The code:


                        /* Custom Fields tab color change - Me
                        -------------------------- */

                        .r-tabs .r-tabs-nav .r-tabs-anchor {
                        background: #FFF;
                        margin-bottom: 3px;
                        padding: 10px 15px;
                        display: inline-block;
                        text-decoration: none;
                        color: #989494;
                        font-weight: bold;
                        }

                        .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
                        color: #fff;
                        background-color: #8E0808;
                        border-top: 3px solid #000;
                        }

                        I have been trying to change these colors off and on forever.............. Thanks for any help.

                        Comment


                        • #13
                          CMD That sounds right; could you give us a link to show us what you're talking about? Also, if you upload your CSS via FTP, you might have to clear your site's cache to see the changes. If you make the changes through 3dcart (Settings >> Design >> Themes & Styles >> More >> Edit Look/Colors (CSS)) the changes happen immediately, but I would only suggest this for small, quick changes to make sure they work and that you like them.
                          Webmaster: Texas Media Systems

                          Comment


                          • #14
                            I did clear the cache - Settings>General. I uploaded the via FTP because when I first tried to do this I couldn't find the code via (Settings >> Design >> Themes & Styles >> More >> Edit Look/Colors (CSS)) and then found it in Layout.css. I never thought to go back and do it through the Store Manager. Anyway, I just did and the results were the same..... no changes.

                            Comment


                            • #15
                              Got it. It worked. I just refreshed my page........... Thank You!

                              Comment

                              Working...
                              X