How do I change CSS & templates files in order to integrate my theme ?

If the buttons are displayed incorrectly or are missing with your theme, start with the module settings and the targeted HTML container.

Check positions and design

In “Connectors position management (native hooks)”, check that the connectors are assigned to the required position. “Design management (native hooks)” and the advanced position settings let you adjust the block. If your theme uses another container, follow the advanced positioning procedure.

References for your integrator

The following paths are relative to modules/facebookpsconnect/:

• views/js/front/social_login.js builds the buttons and inserts them into the configured HTML elements after receiving data from controllers/front/ajax.php.
• views/css/hook.css and views/css/bootstrap-social.css are among the front-office stylesheets.
• views/css/connectors.css contains styles generated from the position settings.
• views/templates/front/ and views/templates/hook/ contain additional screens and fragments; the current login buttons are built by the JavaScript file listed above.

Positioning prerequisite: the configured selector must match a container present on the theme’s page. Legacy IDs such as header_user, center_column or opc_new_account are not universal requirements for every theme.

The module uses different selectors depending on the PrestaShop version, and your theme can also change them. Ask your integrator to inspect the actual DOM. Also see the login-page display checks.

Do not customize views/css/connectors.css directly: the module regenerates it after certain setting changes. Keep custom adaptations in your theme’s customization mechanism and back them up before an update.

If you are unfamiliar with CSS, JavaScript and your theme’s templates, ask your integrator or support for assistance. Verify the result with your theme on a test shop.