SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    finding correct css file

    So, I'm trying to change the background color of the cart on the right hand side of the screen on this page:

    http://worldyardgames.com/shop/

    I am new to using the firefox inspect tool. I found css on the page that is styling it, but can't find the style sheet that it is on

    background: none repeat scroll 0% 0% rgb(36, 36, 36);

    Is there a way using this tool to see what css file that this rule is in?

    thx

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Firefox plus the Firebug plug-in work for me. Color is set by the blue text.

    style.css (line 1712)
    Code:
    .widget_login, .widget_shopping_cart, .widget_price_filter, .widget_layered_nav {
        background: none repeat scroll 0 0 #242424;
        border: 1px solid #171717;
        border-radius: 3px;
        box-shadow: 0 0 1px rgba(255, 255, 255, 0.3) inset;
        color: #FFFFFF;
        padding: 10px 15px;
    }
    This is what it looks like on the stylesheet:
    Code:
    /* 4.2 Specific Widgets */
    /* DARK WIDGETS */
    .widget_login,
    .widget_shopping_cart,
    .widget_price_filter,
    .widget_layered_nav {
      padding: 10px 15px;
      color: #fff;
      background: #242424;
      border: 1px solid #171717;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3);
    }

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I see it now. However, can you see what css file that its in from the inspector tool?

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Thanks. I see it now. However, can you see what css file that its in from the inspector tool?
    This is how Firebug looks to me and how it works.
    1. Click the blue arrow in the Firebug menu bar.
    2. Click the object on the page that you wish to inspect.
    3. Read the properties assigned to that object (as Firebug interprets them) and the name and location of the css file where they reside in the lower right box.

    https://www.dropbox.com/sh/9uacsup6px3c9k0/FgFcBJMC-H

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I see the css file now. This is very helpful. It was there the whole time and I just couldn't see it. thx

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    can you see what css file that its in from the inspector tool?
    Yes. There are two rules set for it in different style sheets. If you remove one (custom.css, line 325), the other (style.css, line 1712) will apply.

    dirty-sheets.png


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •