CSS codes are typically used to make additional changes for contests that involve public gallery and voting (video contest, photo contest, essay contest, Instagram contest). For these contests, CSS codes can be inserted into the CSS editor on the top right of the design page. 

Make sure that you are inserting the code to the CSS editor, not the Javascript editor. 

CSS codes can be used to change most design elements on the contest page. But the most common used case would be to hide elements within the gallery, and below is the list of codes that's used most often: 

1. To Hide ‘Most Votes’ Filter Option

.controls .form-control option[value="2"] {display: none; }

2. To Hide Entries

.entries {display: none; }

3. To Hide Search Bar

.controls .row .col-sm-4:nth-of-type(1) {display: none; }

4. To Hide Sort by Option

.controls .row .col-sm-4:nth-of-type(2) {display: none; }

5. To Hide Countdown Timer

.countdown {display: none; }

6. To Hide Number of Entrants

.entrants {display: none; }

7. To Hide Vote Count

.count {display: none; }

If you are looking to hide elements that's not on the page, open your browser console to inspect the elements. On Chrome, this would be mouse right click -> Inspect. 

select an element by clicking the hover button from the left of the console, and hover over the elements to obtain the element ID. Use this as a selector to make CSS changes on the custom CSS editor.

8. To change color of field placeholder text
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;

::-ms-input-placeholder { /* Microsoft Edge */
color: red;
Was this article helpful?
Thank you!