How to do I add CSS Snippets to my GalaBid Campaign?

Incorporating CSS snippets into your campaign serves as an effective means to infuse a personalized and distinctive character into your campaign, making it more visually appealing for participants.

It is noteworthy that the majority of the CSS Snippets we provide can be readily employed through a straightforward copy-and-paste operation into either the CSS section located within the 'Branding' tab or the Custom CSS section within the projector display.

Nevertheless, certain CSS snippets may need additional customization.

There are 2 CSS sections on your campaign:

Campaign CSS Edits: To access this section, navigate to the 'Branding' tab, scroll down to the page's bottom, and select 'Show advanced options.' This is where you should paste CSS snippets.

‍

‍

Projector Display CSS Edits: The second section is available within your projector display/leaderboard, accessible by clicking 'Custom CSS' in the toolbar. CSS snippets relevant to the projector display should be inserted within this designated area.
‍

‍
To incorporate CSS snippets effectively, begin by entering the CSS section that requires modification. Next, select the appropriate CSS snippet from our collection of CSS articles and apply it by copying and pasting it into your chosen CSS section.

For instance, in the following example, we will utilize the 'Change Side Menu Color' snippet:

/* Change side menu colour */

.gb-sidenav .app-sidenav {
   background-color: black !important;
   
}

Make sure when copying the text you don't include the large bold title above the CSS.
‍

Once copied, paste it in to the CSS section.
‍

It is possible that, during pasting, the code may appear as a single line. In such cases, reformat the code to align with the provided example image by utilizing the 'backspace' and 'spacebar' keys on your keyboard.

It is crucial to acknowledge that certain CSS snippets may require further refinements. In the case of the snippet we just utilized, it becomes imperative to specify the desired color for the side menu.

The existing code specifies 'background-color: black,' signifying that the side menu is presently configured in black.
‍

To alter the color to your preference and replace 'black,' simply input the name of your desired color, as demonstrated in the image below where 'Grey' is utilized.
‍

Afterward, save your changes by clicking the 'save' button at the page's bottom, and the CSS modifications will take effect.

‍

‍
For greater precision in color selection, you may employ hexadecimal color codes, such as '#39a081,' which corresponds to the green hue featured in the GalaBid banner.
‍

‍

By replacing the color name with the corresponding hex code, you ensure precise color replication.
‍
‍

For your convenience, we recommend utilizing the following website to obtain the hex codes: HTML Color Codes.
Here, you can effortlessly identify and copy the appropriate hex code for your desired color.

We have a variety of different CSS snippet articles for you to choose from.

Branding

Text Edit

Widget

Projector Display

If you have any questions feel free to reach-out to us here