Look & Feel
Check these examples and design options to find out styling and branding solutions and to be inspired.
TIP: Before you start working on layout try to setup competition as much as possible: add title, slogan, description on home page, open submission and voting round, sign in this competition and add few entries and comment them (if you allow comments), add custom pages, set main menu, add content to footer etc.. Then you will get at least wireframe of contest site and you will se what needs to be redesigned.
Prepare images with your branding (logo, brand colours, fonts) and use them as Custom header, Competition Description and Footer as described on Setup Home Page.
Use integration tools if you want to place competition within your website (display header/footer of your website or parts of them).
You may also use custom widget (in competition Setup&Edit > Options tab) or banners for branding (i.e. if you want to have your logotype linked).
Look here on orange areas: blog.competizer.com/demo-sponsored, and think how you can use them. It's also possible to change backgrounds via CSS custom file.
In admin area go to Look&Feel tab and click on button Customize look. Use expandable options menu on the right:
Generally you can change template of the competition, which mean its layout that deals with the arrangement of elements on a page. All templates included in Competizer are responsive, which means that they adapt to the different screen resolutions. Main benefit get mobile users with smartphones and tablets as they get more comfortable experience.
Main differences between templates are within headers, gallery filters and typography and the way they are responsive. See examples of responsive contest templates here.
If you need another template and want to have it only for your competitions it is possible to assign new template to your account only. Contact with competizer team if you need this.
Themes are mainly responsible for backgrounds and fonts colours in the competition.
It is possible to assign new theme to your account only. Contact with competizer team if you need this.
Custom template and colours
If any of available templates and themes doesn't suit your need then you can make your own design:
- choose template and/or theme that will resemble something you want to achieve. Then add your custom CSS.
- you can also choose theme: None and/or template: Simple, which do only basic arrangement. Then prepare custom design. Here you can see list of elements that could be designed. Then implement your design by adding your custom CSS.
You can always ask competizer team to help with this.
Entries sizes make much difference in look&feel.
Picture options in photo competition
In photo competition user uploads photos, then they are processed to some predefined formats (sizes).
Then application serves:
- big size on entry page;
- thumbnail in gallery, home page widgets, on profile page ;
- smallest thumbnail in aside widgets.
Any format could be used in widgets for external use.
Changing images sizes can influence layout: big size photo have to fit entry page; thumbnails size determines amount of pictures in a row in galleries.
Additionally system stores original photos. They are available in Download section for admins.
For each format you can set:
- Width and height in pixels.
0-60 makes very low quality and very low in file size.
60- 85 is quite good compromise between quality and file size.
86 and above (up to 100) is best quality, but can raise file size unnecessarily.
- Keep ratio. If it's checked then photos will be scaled proportionally, but won't get given width and height, i.e. scaled portrait can be narrower, panorama can be shorter.
If "Keep ratio" checkbox is unchecked then all photos will scale exactly to given width and height.
Example: How original photo will be scaled to thumbnail if you set width and height to 120px and ratio in both ways:
- Optionally you can turn scaling off by unchecking Resize.
Maximum file size will be determined by max file size which was set up on creating new competition and choosing competition type.
Note: When you change picture options they affect only future uploads. All previously uploaded photos won't change.