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 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 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.
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
Embed Font Customization for Wix Websites
Once your embedded Roster or Profile is appearing on your Wix website, but you would like to change the font, simply add this line of code to your embed:
## This is the line of code you are adding:
style="font-family: Open Sans, Helvetica Neue, Arial, sans-serif"
## Here is where to add your code (underneath agency):
<!-- Place this tag where you want the roster to render. -->
<gigwell-embedded-roster
agency=""
style="font-family: Open Sans, Helvetica Neue, Arial, sans-serif"
button-text-color=""
## Leave everything else as is, save changes.
This customization will change the font back to the Gigwell default, Open Sans, but you replace this with the font of your choice if you don't want to change your widget skin.
Restyling an embedded roster
The embedded roster comes with a set of built-in styling options, and anything beyond those is handled with your own CSS.
Use the built-in styling options
Go to Settings.
Open Embed.
Select Roster.
Open Code.
From here you can set image shape, field labels, colors, buttons, hover effects and fonts. Adjust those first — they cover most of what agencies want to change, and they survive updates without any maintenance on your side.
Go further with custom CSS
Anything the built-in options don't cover goes in Custom Styles as CSS, on the same panel. Make one change at a time and check it on your live page as you go, so you can see which rule is doing what.
If that doesn't work
If a styling change looks right in Gigwell but not on your site, the site builder you're embedding into is usually the reason — not every builder supports every embed feature, and some strip or override custom CSS. Check your builder's own documentation on custom HTML and CSS in embeds before assuming the embed code is at fault.
If it still won't behave, start a chat from the messenger, tell us which site builder you're using and what you're trying to change, and we'll help you work out what's possible.
Good to know
You can publish more than one embedded roster. If you tag your artists by genre or region, you can specify a tag when generating the embed code so the page shows only that subset — see the article on tagging and segmenting your roster.
What appears on each artist's card and page comes from the artist profile, so if a photo or bio looks wrong on your site, fix it on the profile rather than in the embed styling.
Artist Name Removal for Wordpress Websites
You can see in the above screenshot an example of when you would want to remove the artist name from the embedded Artist Profile on a Wordpress site. Luckily this is a quick fix!
To get rid of the Artist Name here we are going to use the "Additional CSS" editor built into Wordpress core.
1. While logged in, view your site.
2. Click "Customize" on the top navigation bar [or from your Dashboard, by Dashboard > Appearance > Edit CSS].
3. Click on "Additional CSS" on the bottom if it does not open automatically.
4. Once in this menu, simply copy and paste this code:
.gigwell-profile-headline { display: none }
You will see the artist name disappear. Publish changes. Viola!
If you have any questions or need additional help, please reach out to support@gigwell.com or use the chat widget on your screen.