Question

I am using FPSS JQuery plugin in Joomla, that can be seen here: http://bawajee.com/techno
There is a loader whose background-color is black, I want to know from where this color is coming. Actually want to have this color white or transparent. But when I want to see the code then it is compressed.

Can some one tell that from where I can change the color, and is fpss.jquery also available in uncompressed form?

Answer 1

Found it the little bugger. 😛

Steps in finding it:

1. Open page in chrome
2. Open developer tools (ctrl-shift-j for the console)
3. Open the Scripts tag
4. Under Event Listeners Breakpoints expand DOM Mutation
5. Check the checkbox next to DOMContentLoaded
6. Step through (F10) until you can hover over an element in the Elements tab and a blue box appears over the element on the page.
7. navigate the node tree until you narrow in on the deviant element.
8. find the style rule in the panel to the right.

After performing these steps I found that the problem is in your template.css.php style sheet file. the style rule is render as this:

#fpssContainer84.fpss-template-movies .slide-loading {
    position: absolute;
    width: 450px;
    height: 272px;
    background: black url(../images/loading_black.gif) no-repeat center center;
    z-index: 100;
}

You can either change this rule where it is (template.css.php line 13) or create a style rule on the page. If you modify the actual style rule, I recommend the following:

#fpssContainer84.fpss-template-movies .slide-loading {
    position: absolute;
    width: 100%;
    height: 272px;
    background: white;
    z-index: 100;
}

or if you want to overwrite the style rule in another stylesheet or the actual page:

#fpssContainer84.fpss-template-movies .slide-loading {
    width: 100%;
    background: white;
}

and lastly, if that doesn’t even work, try this in any stylesheet:

#fpssContainer84.fpss-template-movies .slide-loading {
    width: 100% !important;
    background: white !important;
}