Custom CSS

You can change backgrounds, colors, fonts, etc. entirely by uploading your own CSS file in "Look and Feel" tab.

After uploading CSS file, file name will be custom.css.

Using custom images

If you need additional images to be applied within your CSS file

  • use absolute paths to existing files, ie.
    background:url('http://yourdomain.com/images/background.jpg');
  • or create image sprite (must be PNG), upload and use path given below the "custom sprite image" field, ie.
    background:url('http://i.competizer.net/pub/g/other/customSprite.png?1');

Custom CSS file is loaded as last one, so its rules override all previous rules given for example in template and theme CSS.

How to get started with custom CSS?

  1. See Sample custom CSS file and some examples how to style some certain elements.
  2. Go to "Look and feel" tab and upload this CSS file or just empty CSS file.
  3. Click on competition title on the top to get competition opened in new window.
  4. Use Web Developer (command: edit CSS) or any text editor, change custom.css file accordingly. Add new selectors if required: look at CSS layout scheme and main classes and add your own CSS rules. Read here about some basic CSS rules: http://docs.zetaboards.com/themes/cssindex .

    If you already have a website and want to make competition pages look quite similar then grab your CSS files, find rules that can be applied. Copy and paste them to the custom.css file. Add Competizer specific attributes to make it work:
    • add #competizer to each rule for competition pages
    • add #cpage to each rule for landing pages
    • add #widgets to each rule for widgets used for promotion of the competition.

      Example:
      Add this rule to make all h2 headers in competitions green:
      #competizer h2 {color:green}
      And all h2 headers on landing page red:
      #cpage h2 {color:red}
      And all h2 headers in widgets gray:
      #widgets h2 {color:gray}
  5. Save custom.css file and upload via admin again. Prepare and add sprite image if necessary.
  6. If your are going to use external widget then also check how it looks.
  7. Refresh competition page, look on it and edit custom.css file again, and again, until you are done. Or layout. Whatever comes first. Feel free to ask for help using contact given in the footer.

 

  

Competizer Platform is the online contest software to create and manage Online Competitions.

More info at 

competizer.com