All Collections
Embed
Embed Custom Styles
Embed Custom Styles

Using Custom CSS to tweak your embedded Rosters and Artist Profiles

Frances Zibulski avatar
Written by Frances Zibulski
Updated over a week ago

Hello, you little keyboard ninja you! Props for finding your way to the deep end. We recently added lots of options to the interface for you to make changes to things like background color and border width, but if you want to go one step further, today I'm going to break down Custom Styles a little bit so that you will be able to tweak any additional items to your embed as you see fit.
​
You can get to the embed settings by hitting your agency Settings in the top right of your screen > Embed > then you can select Roster or Profile. In this example I will be showing you changes to the Roster in Grid view.

Anything that is added to the Custom Styles text area on the Styles tab of the Embed will be added to the HTML for the booking code inside <style> </style> tags.
​
This is how the border width, padding, and other customization options in the interface are loaded as well. If you take a look at the code you will see that there are two <style> </style> sections. The customer code loads into the first, and the styles selected in the Gigwell interface load into the second.

In the above picture you can see I added .gigwell-roster-container {max-width: 690px} to the Custom Styles. The default is 1024px. Since your current style settings have the grid view display set to 225px and there are three columns, the pictures only take up (225 x 3) = 675px. I changed the width to 690px to push the images closer together:
​
Before

After

If you want to change the vertical spacing, one thing you could do is change the margin-top above the Artist name. It is currently set to 10px. You could add something like .gigwell-roster-view-grid.gigwell-roster-artist-title { margin-top: 5px }.

Shoot us a message if you are having any troubles!
​
Cheers,
Brian

Did this answer your question?