1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Learning about elements

Discussion in 'Styling and Customization Questions' started by Neil E., Jun 30, 2012.

  1. Neil E.

    Neil E. Active Member

    OK, so Im trying to figure out some stuff without relying on Jake "for everything". Right now I'd like to know how to make use of the browser functions "view source" and "inspect element". I'm hoping these can be used like a "navigation/colour chart". My image is for the search button. I want to learn how to find where the corresponding style properties are located. If my image is hard to read, can you provide a similar example for something that doesn't have it's own styling properties. Can any of this assist in finding something that does have styling properties?

    EXTRA.css sure is handy, but finding stuff in the first place is tedious. What does css.php.4691 mean? How do you know which way things cascade? Why is some stuff "struck-through"?

  2. Arty

    Arty Well-Known Member

    Click "rules" tab, it will show you rules that are applied to that item. First rule is
    #QuickSearch input.button.primary {
        float: left;
        width: 110px;
    Go to admin control panel -> styles, click "Search templates" link on left side. In "template contains" enter "#QuickSearch input.button.primary" and click search button. XF will show you search_bar.css
    Jake Bunce likes this.

Share This Page