Troubleshooting with your browser

In this article

JavaScript error detecting

When you see a blank space instead of your slider, there's a good chance your site has JavaScript errors. You can check the errors using your browser's developer tools. For this tutorial, I'll use Chrome browser.

1
Press F12 on the page, where you can see your error.
2
Click on the Console tab and refresh the 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.


JavaScript error example. The custom.js:7 part points to the file and line where the error occurred, which can help you figure out what's causing the error.

💡 Tip: You can right-click on the name of the file and copy the file path. This could also give a hint about the related plugin/extension that causes the problem.

Start solving the errors from top to bottom, because one error could mess up the rest. If you have minification/optimization plugins or extensions turn them off, because they might be the cause of these problems.

If you're not sure what to do with the errors, and you're a WordPress user, run a plugin/theme conflict test. This will point you to the plugin/theme that causes the issue, and you can reach out to its developers for solution.

Which code is making a certain part of a website?

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. The web inspector will open up, where you will see the HTMl code of your website.

2

If you hover over the code, you can see the elements highlighted 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.

To make the search easier, you can just pick a part of the page. To do so, first you'll need to click on the Select an element button.

In my case, I want to have the slider above the page content, which is wrapped in this container:

3

Now you should download your template's or theme's files from your website using FTP. Not sure what are your FTP credentials? Contact your host!

You will be able to find the theme or template files at:
WordPress wp-content/themes/[your theme's name]
Joomla templates/[your template's name]

4

The easiest way to find contents in the files is using a program like Total Commander. Navigate to the folder where your download theme files are, and press Alt +F7. Check the Find Text and type in the codepart you're looking for. Hit Start Search to being the search.

5

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, but just classes or id-s, as there could be variables used in the code. Look for the opening ( 1) and closing (2) tags of the codepart you searched for.

To publish Smart Slider 3 below the content, add it before the 1 mark. Learn how to from the PHP publishing documentation of WordPress and Joomla.

Find out what CSS code is modifying the slider

Sometimes themes and templates aren't properly coded, maybe a wrong custom CSS code is affecting the slider, that makes it look different than the way you set it up. It's not that hard to find out where the code is coming from, if you know how to check it. I'm using Chrome browser during the tutorial.


The correct look of the slider (left) and the modified look (right).

1

Right click on the part, where the problem is, and click on Inspect element.

The browser console will open, highlighting the codepart you selected

2

The code in the browser console might not go to this element at first. For example, 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.

If you're looking for a text, you can search for it by pressing CTRL+F on Windows and CMD+F on a Mac. If you know the name of the image you want to find, you can search for that, and the browser will select that element for you.

3

On the right side of the browser console you'll see all CSS codes applied to the element. From here there are two common methods to move forward:

  • Unthicking every checkbox until you find the one that causes the problem.
  • Searching for the CSS property name that can modify the look. For this method you'll need to have some basic CSS knowledge. Although, generally common English words, like "background" or "color" will give a pretty accurate result.

4

Copy the codes you found to a simple text editor. Then take a look at the right side, where the name of the CSS file is written. Right click on it and select Copy link address.

Paste the link address to a text editor. It contains the location to the file that causes your problem, so you should navigate to the given path via FTP. E.g. if you get a URL like https://yoursite.com/wp-content/themes/storefront/style.css then go to /wp-content/themes/storefront/ folder and find the style.css file. Open it up and locate the codes you copied at the beginning of this step, and remove them. Save the file and upload it back to your site.

If you can't or don't want to edit the file, you can try writing stronger CSS codes to override it.

How to strengthen a CSS code?

The more you specify a HTML element about where it is, the stronger the code becomes.

Priority example

The code will be this:

<div class="main">
  <div class="container">
    <div class="mydiv" id="textid">
      Text
    </div>
  </div>
</div>

Here is a list of stronger priorities starting from the lowest:

/*tag*/
div{ color:blue;}

/*class*/
.mydiv{ color:blue;}

/*parent tag and current tag's class divided by space*/
div .mydiv{ color:blue;}

/*parent class and current tag's class*/
.container .mydiv{ color:blue;}
 
div .container .mydiv{ color:blue;}
 
.main .container .mydiv{ color:blue;}
 
#textid{ color:blue;}
 
div #textid{ color:blue;}
 
.container #textid{ color:blue;}
 
div .container #textid{ color:blue;}
 
.main .container #textid{ color:blue;}           
 
<!--inline css-->
<div class="main">
  <div class="container"> <div class="mydiv" id="textid" style="color:blue;">   Text </div>
  </div>
</div>
 
.mydiv{  color:blue!important;}
 
.container .mydiv{ color:blue!important;}
 
.main .container .mydiv{ color:blue!important;}
 
#textid{ color:blue!important;}
 
div #textid{ color:blue!important;}
 
.container #textid{ color:blue!important;}
  
div .container #textid{ color:blue!important;}
 
.main .container #textid{ color:blue!important;}

<div class="main">
  <div class="container"> 
  <div class="mydiv" id="textid" style="color:blue !important;">
  Text 
  </div>
  </div>
</div>

How to make my CSS code to only be applied to a specific place?

There are times, when people want to overwrite something on websites, but they are only aware of the strongest overwriting method (using !important;), which overwrites everything else on the website too. You will see an example here, how can you make your code to be only applied to the part, where you actually want your code to be. First you need to know,  how can you use web inspectors to figure out how to check the code of your website. After you got that, here is a html structure example:

<div class="main">
    <div class="container">
        Inner text
        <div class="mydiv">
            Text
        </div>
    </div>
    <div class="second_container">
        Other text
        <div class="mydiv">
            Second text
        </div>
    </div>
</div>

Let's say you want to change the color of "Text". The original code, which gives the color for this text will be:

.main{
    color: blue;
}

Now if you would use this code to overwrite it:

.main{
    color: red!important;
}

That would overwrite every text, so the "Inner text", "Other text" and "Second text" too. Everything inside the "main" class. 

Then you could try to go deeper in the classes:

.mydiv{
    color:red!important;
}

which would be a little bit better, but still you would overwrite the "Second text" too, since that is under the same class. The thing you have to do to make your code only be applied to certain places is, that you should write down the whole structure, to make sure what you write is unique, like this:

.container .mydiv{
    color:red!important;
}

As you see from the "mydiv" classes only the "Text" has "container" as it's parent, so with this code you are only pointing to exactly, where you want it to point.

The next important thing is, that you should not use !important, if you can avoid it. Like in this case you wouldn't need to add it to your code, because for once, your "mydiv" is a closer class to your text, than the original "main" class is, which means it is stronger. Also if you would have the same level selectors, this code would be still stronger, because you specify two parent classes. You can read more about priorities in here. So all in all, this would be enough:

.container .mydiv{
    color:red;
}

And this would help you avoid "conflicts", like if you would put our slider inside the "mydiv", next to the "Text", we and probably all plugins are using IDs to identify their codes. That can help us to create stronger css codes, because one ID code is still stronger, as this two (or it could be more) level class selector.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.