CSS structure

Main classes

body.competizer - all competizer pages, landing pages and widgets
body#competizer - only competition pages
body#widgets -only competizer widgets
body#cpage - only competizer landing pages

Competition website

Main containers





.article .article_1col|.article_2col|.article_3col



General classes

.header - main headers, legend

.dataLabel - labels like "by", "Comments", use on <span>
.counter - any counter like: number of votes, comments, photos, use on <span> 

Classes for displayed entries

.entries - used on container in galleries and widget, where many entries are going to be displayed one after another
.entry - used on container ie. on entry page, where only one entry is going to be displayed separately
.hmedia - whole entry with description
.sthumb,. thumb, .tmp, .zoom, .big - used on photo entries on a or container, 
.photo - any size, also user image (avatar), used on <img>
.textentry - used on text entry
.fn - entry title (or user name)

.figcaption - entry description

.rating - number of votes
.vote - used on container
.vote-for - used on <a> or <button>
.shares - counter
.sharethis - share button(s)
.comments - counter
.category - entry category
.description - entry description or review of winner entry
.created - creation date
.report_abuse - with link to send entry to moderation
.favorites - contains link to add to favorites
.sharethis - contains Addthis widget

Classes used for displaying participant

.vcard - user description
.contributor - author of given entry, could be nickname or name
.nickname -used on <span>
.fn - name, used on <span>
.adr - address, used on container or span
.note - any other description
.userImage - additionaly with .photo, use on <img>


HTML that displays entries: photos or text

This is template for displaying contest entries on entry page, in galleries, widgets, profile page, winners page etc.. Some tags could be skipped.

<ul class="entries|entry">
 <li class="box" width="from CMS settings">
<div class="hmedia"> <!--optional header--> <h2 class="header fn">Photo title</h2>
<!--A or DIV tag for entry-->
<a rel="enclosure" type="image/jpeg" href="" class="sthumb|thumb|tmp|zoom|big"> <img class="photo" alt="Photo title" src="" /> </a>
<a rel="enclosure" type="text" href="" class="textentry">Text</a>
<!--entry description--> <ul class="figcaption"> <li class="report_abuse" src="#"> <a href="#" class="ico ico_report_abuse" id="link-1" src="#">report abuse</a> </li> <li class="vcard" src="#"> <img alt="" class="photo userImage" src="#"> <span class="dataLabel" src="#">by </span> <span class="contributor fn" src="#"><a href="#" src="#">User nickname</a></span> </li> <li class="favorites" src="#"> <a href="#" class="ico ico_addToFavs" src="#">add to favorites</a> </li> <li src="#"><fb:like ></fb:like></li> <li class="sharethis" src="#"> <span class="dataLabel" src="#">Share</span> <div class="addthis_toolbox addthis_default_style" src="#"></div> </li> <li class="rating"> <span class="dataLabel accesible ico">votes:</span> <span class="counter">22</span> </li> <li class="vote"> <a rev="vote-for" href="#" title="Vote for this photo!" class="vote-for">Vote</a> </li> <li class="category" src="#"> <span class="dataLabel" src="#">Category:</span> <a href="#" src="#">Category name</a> </li> <li class="description"> <span class="dataLabel">Description:</span> Participant's description of an entry. </li> <li class="created"> <span class="dataLabel">Added:</span> 13 Mar 2012 </li> </ul> <!-- end of entry description--> </div>
</li> <!--end of one entry--> </ul>



General class for all banners


IDs for banners:


Styling external widgets

External widgets are displayed as iframes with customized content. They use Theme CSS choosen for competition page and custom CSS file the same as in the competition page.

While customizing custom CSS file:

  • use #widgets to affect only on widgets
  • some main containers IDs are different then on competition page, so competition styling should not affect them
  • entry containers and descriptions have the same ID and classes as on competition page, so they will be styled the same as on competition page, unless they are redefined in custom.css file explicitely.


Scheme of photo widget

<body id="widgets" >
 <div id="container" style="width:XXXpx;">
  <div id="content">
   <div class="content">
    <div class="aside">
     <h1 class="header">Competition title</h1>
     <h3>Gallery title</h3>
     <ul class="horizontal_menu tabbs nav">
<a href="" id="widget-top-trg" class="current" target="_blank">Top entries</a>
     <div id="widget-top" class="tabbed">
     <ul class="entries">
      <li class="box" style="width:XXpx">
       <div class="hmedia">
<a href="" class="sthumb" target="_blank">
<img src="" class="photo" alt="entry title" id="entry_xxx" />
        <ul class="figcaption">
         <li class="fn">Etnry title</li>
         <li class="vcard">
<span class="dataLabel">by </span>
<span class="contributor fn" >nickname</span>
          <li class="votes" title="votes">
<span class="dataLabel accesible">votes</span>
<span class="counter">X</span>
   <a href="" target="_blank" class="nav">more entries</a></div>