Finding reference div with Google Chrome browser

The first and the most important thing you have to do in order for the ShareThisBar plugin to show up is to find the div page element which will serve as the reference element for positioning the ShareThisBar, the reference div.

IMPORTANT - There is no more need to look for reference div for the ShareThisBar social media plugin for Joomla to work. Reference div plugin parameter is no longer needed, since plugin version 3.0. As soon as you install the ShareThisBar social plugin and enable it - it works. A few minor adjustments could be needed to tweak the ShareThisBar position correction parameters.

Open your Chrome browser and click on the Customize and Control Google Chrome in the upper right corner of the browser. Click on the menu: Tools > Developer Tools.



A new window with the Developer Tools will appear in the bottom of the screen.

With a click on the little black arrows in the Developer Tools window you can open the page elements one by one. Moving your cursor over these page elements(in the Developer Tools window) will make the blue shaded rectangle cover the adequate page element in the upper screen, which you are pointing with your cursor in the bottom part of the screen.

This way you can find the page element which is the most suitable for the ShareThisBar plugin reference element, the element which width encompasses all the site content and which height is suitable enough for the ShareThisBar vertical movement.

In this case I pointed the cursor on the <div id=contentarea> page element and saw in the upper part of the screen that this is the element I need. After I’ve closed the Developer Tools window and have opened the Joomla administrator window - the ShareThisBar plugin configuration page, I've took the id of the founded reference element, contentarea and enetered it into the plugin parameter field Reference div id on the plugin configuration page.

Click the Save button to preserve the plugin parameters changes.

Open your web site in the browser and the ShareThisBar should work. Scroll down the page to see how it behaves.

Now you can fine-tune the other plugin parameters if you want. For each plugin parameter, when you hover with the mouse over the name of parameter, there will be shown a tip with detailed desription what this parameter is for and how to adjust it.

The extra details how to modify the other plugin parameters are provided in the article named Tweaking sharethisbar configuration options.

The article about how to find the reference div with the Firefox browser is here.

Additional information