How to: change the widget look with CSS

You can customize the widget title, position and color with a few simple clicks in the site’s settings. However, you can also use CSS to change the widget’s shape. In this article, we’ll customize the widget to look like this:

To change the widget look:

  1. Change the widget title. Within Inline Manual portal, go to Sites -> choose the desired site -> go to the Settings tab -> choose Player languages in the left side menu -> change the Trigger title to ?. See this article for detailed instructions.

  1. Add CSS. After changing the title, you can now add a CSS code. While in the site’s Settings tab -> choose Player appearance from the left side menu -> go to the CSS tab -> paste the code and confirm with the save button.

In our example we used this code:

.inmplayer-trigger {
padding: 0;
font-size: 32px;
width: 40px;
height: 40px;
border: solid;
border-width: 3px;
border-radius: 50%;
box-shadow: 1px 2px 6px 0px rgba(0,0,0,0.4);
text-align: center;
}

Done!

Custom CSS styles don’t appear in the live preview.

Related articles

How to: change the color and position of the widget
How to: change the widget title

Trigger
Widget Title
CSS
Was this article helpful?