Developer - Firefox

JavaScript error detecting

Use this if you are seeing a blank space, where the slider should be, or you can see the slider, but it doesn't work.

  1. Press F12 on the page, where you can see your error.
  2. Click on the Console tab and refresh your page.
  3. It will write out an error, and the path, or the code you can give you a hint, what is causing it, and you could eliminate that extension/plugin from your website.

Find out which code is making a part of your website

This video can show this too.

This documentation was mainly made for finding a place, where you could put your slider, if your template/theme doesn't offer it, but if you check it out, you can understand, how to look at the code of your website, which can come handy for other reasons too.

  1. Right click around the part, where you would like to have the slider, and choose Inspect or if you have Firebug installed, Inspect Element with Firebug.
  2. On the bottom the web inspector will open up, and you can see the html code of your website.
  3. If you hover over the code, you can see the elements hightlighted in your browser on the hovered parts. You should open up the code, and find that part, which is over the position, where you would like to have your slider.
  4. Also to make the searching easier, find the codepart right under that place too.

Joomla templates/[your template's name]
WordPress wp-content/themes/[your theme's name]
Magento app/design/frontend/[design package name]/[theme variation name]

  1. And use a searchprogram to look for those codeparts inside this folder. You could do it for example with Total Commander by pressing Alt + F7 check in the Find text and write a unique part of the code in there or NotePad++ is good too to do this, just press Ctrl + SHIFT + F
  2. If you find it, the code might will be a little different from what you saw in the actual html code, that is why you shouldn't search for the whole line, there could be variables coming from the backend settings. Look for the beginning and closing tag too of the upper code (the step 3 code), and for the beginning tag of the lower code (the step 4 code).
  3. As a last step, you should make your template/theme call in the slider between these lines (in my example the new code should go here). You can find the code you need at the publishing part of the documentation.

Find out what css code is modifying the slider

This video can show this too.

Sometimes themes and templates aren't properly coded, maybe a wrong custom css code is affecting the slider, and it's not that hard to find out, where the code is coming from, if you know how to check it. I will make an example to show it. I will use Firebug, but you can check this with any browser with the default inspector tools. This is how my slider should look like:

But it looks like this, the first text is red, the second is too big:

  1. Right click on the parts, where the problem is, and click on Inspect.
  2. The code in the bottom might not go to this element at first, if there is something invisible over it, or you have clicked a little outside of it's borders. In this case open up the code, until you get to that text/image or any item, which you are looking for. You can see, that I searched for "Chicken drumsticks", and that is the lowest part of the code, where I can go. The css code you are looking for can be on the higher elements too, on the containers of this part, so if you can't find it, just go one level higher, and look around there.
  3. After you clicked on that html part, in the right you will see every css code, that is applied to this part.
  4. The order starts from the top, the same or lower priority same css property codes will be crossed out. It helps to know, what is the name of the css property, what you are looking for, like I'm looking for color, but you can just uncheck the css codes one by one, and stay at that part, which is making the change you are looking for.
  5. After you found it, you should check the file, where it comes from. If it's from a simple css file, then it's easy to find it, you can see the path to that file if you hover over it's name, you can right click on it's name, and choose Copy location, and it is writing out, on which line do you have the problem.
  6. If it's coming from a cache file, which you can know, that the path probably has the cache word in it, the filename is from random letters and numbers, then from the code you can see in it, you should find out, from which plugin/extension does it come from, and look for it in the files, or like in our case, it can partially come from the backend too, and you should look for that attribute in there. If you can't find it in the backend, then the fastest way to look for these codes, is if you still have your installer, search in it's files, not in your whole website. Then when you got the file, it is probably in the same path in your website too, as it is in the installer. Or just search for the file in the website, that isn't that slow. If you don't have an installer, look for it in your whole website, or try to narrow it down the folders.
  7. The third kind of css code, that can be there is the inline css.
  8. The path in this case will be the index.php of your website. Right click anywhere on your website, and choose View Page Source, then look for the css code you just found.
  9. Check what is the code before and after it, they can give you a hint, where does this come from. In my example, there is the text Custom CSS, which suggest, that there is probably a custom css input area in the backend, in the template or theme, maybe an extension or plugin, and that is where this code should be removed or modified. If this is your css code, what you need somewhere, then you can make your code to have high priority like this, so it can be strong enough to overwrite some other code, but not as strong to overwrite every code.

Videos about Firefox inspector