How to Add an Image to the Button of the Accordion Layout in Shack Forms

In some use cases, you may want to add an image to the button of the "Accordion" layout of your Shack Form. 

By default, the button displays only text:

the default button

But what if you would like to spice it up with an image:

the button with the image

You can accomplish this in your Joomla site in four steps:

  1. Install the "Add Custom CSS" plugin
  2. Upload the required image 
  3. Create a custom CSS file
  4. Add the custom CSS file to the plugin.

Let's take a look at these steps in more detail.

Step #1. Install the "Add Custom CSS" plugin

  • Visit the Impression eStudio site here.
  • Download the "Add Custom CSS" plugin:

download the plugin

  • Install and enable it on your Joomla site.

Step #2. Upload the required image

  • FTP to your Joomla site and within its file structure upload the required image.

Step #3. Create a custom CSS file

  • In your Shack Form, go to the "Theme" tab and check what color the "Toggler tab style" setting has been set to:

find toggler tab style parameter

  • Anywhere within the file structure of your Joomla site, create an empty CSS file. Call this file as you see fit, as long as you end the file name with .css.
  • Add the following CSS code to this file:
.pwebcontact_toggler.pweb-toggler-blue, .pwebcontact_toggler.pweb-toggler-blue:hover, .pwebcontact_toggler.pweb-toggler-blue.pweb-opened { 
background-image: url("alex.png") !important; // replace here "alex.png" with the name of your own image
background-repeat: no-repeat;
background-color: white; // set this color as you see fit
padding-left: 40px;
background-position: 0 0;
  • In this code, replace the blue with the color set in your "Toggeler tab style" parameter. For example, if your "Toggler tab style" has been set to "green", your code should be as follows:
.pwebcontact_toggler.pweb-toggler-green, .pwebcontact_toggler.pweb-toggler-green:hover, .pwebcontact_toggler.pweb-toggler-green.pweb-opened {
background-image: url("alex.png") !important;
background-repeat: no-repeat;
background-color: white;
padding-left: 40px;
background-position: 0 0;
  • Save your custom CSS file.

Step #4. Add the custom CSS file to the plugin

  • In your Joomla administrator panel, go to "Extensions" > "Plugins" and find the "Add Custom CSS" plugin.

find the add custom css plugin

  • Open this plugin for editing.
  • Enter the name of your custom CSS file into the "Custom CSS File 1 Path" field:

enter the name of your custom css file

  • Click "Save" or "Save & Close"

When you check your Shack Form now, you should see that the button of your form now displays the image.