Custom Designing Your Contests with Stylesheets

We already have a default look for your contests included, but most likely you will want to customize the look of your contests. We’ve allowed you to customize your own design right within WP Contest Creator to save you time. By creating stylesheets you can customize the look of your contests using either our built in tools or using your own custom CSS for advanced users.

Stylesheets can be created and re-used for a single contest or as many contests as you choose. Let’s say you want to keep branding the same across all contests, you can do just that by re-using stylesheets and assigning them to your templates at anytime.

Creating your stylesheet

1. Create a new stylesheet - First, you will need to add a new stylesheet by going to the Stylesheet tab while in the Contests Admin. Then on the stylesheets screen click “Create a new stylesheet” at the top to add a new stylesheet.

2. Customize - You can now customize the stylesheet to your needs on this screen using the following options:

Duplicate option – You can select a current stylesheet you have already made or the default stylesheet and duplicate it in one click. This allows you to save time if you want to keep some of the elements the same but only change a few things for your new contest.

Stylesheet name –This will be the name of your stylesheet for your reference only within Wordpress.

Logo Image – Here you can upload your own logo to be displayed on contest templates that include the logo tag. Just click select to choose your logo from your files.

Header Image – Upload your default header image to display on contest pages with your stylesheet. Header will only show on layouts that have a header tag. Click “select” and choose your logo from your files on your computer. Recommended header image size is 500px x 200px.

Button Style Options– Here you can customize your button style for the different steps of the contest. You can either upload images you have created. It is important that you enter the width and height of your button in the width and height fields. Recommended button size is 355px x 86px.

*Note about creating custom CSS Buttons:  For advanced users, if you prefer to style custom CSS buttons you may enter button text here that will display on the contest. Then you can style the texts and buttons how you desire. The style tags for the buttons you need to target are “#next1” and “#next2”.  “#next1” is the button displayed in the first survey step, and “#next2” is the second button when capturing user information.

Text Styles – With text styles you can edit the text that is displayed on your contests. You can edit the Headlines, Subheadlines, and other paragraph text including Font family, Font Color, Font Size, or add Bold and Italic styling.

Background Settings – You can easily customize the backgrounds of your contest by using the background settings options. Here you can select a custom background color with the color picker tool and/or select a background image from your computer. If you choose to have an image as your background you may also select if you want to repeat the background and also the positioning of the image. This is perfect if you want to repeat a patterned background or upload a large background image to display in the center without repeating.

Custom CSS – Of course we also allow advanced users to customize the contests design how they want with the Custom CSS field. Here you can target specific elements of your choice, and anything entered will take priority over the default styles.

Save Stylesheet – Of course don’t forget to save your work by using the save stylsheet button which will add this stylesheet to your list of stylesheets to be used for any of your contests.

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk