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:

But what if you would like to spice it up with an 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:

• 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:

• 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.

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

• 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.