components

Ads

Ads - A default ad

Ad 1

Advertising

<div class="ads">
    <a href="#" class="ad whiteBox right">
        <img src="uploads/ad.jpg" alt="Ad 1" />
    </a>
    <p class="clear">Advertising</p>
</div>

Gallery Slider

This slider will require the plugin 'cycle2' to work and the extension 'cycle2 carousel' file. Don't forget the template pagination image within each slides containing div.

This is a small landscape image.
This is a small width landscape image, where body text can wrap around an image. Images are the same ratio as images used for article previews. This text is an example of a caption. Photo credit: Joe Bloggs 1
This is a small landscape image.
This is a small width landscape image, where body text can wrap around an image. Images are the same ratio as images used for article previews. This text is an example of a caption. Photo credit: Joe Bloggs 2
This is a small landscape image.
This is a small width landscape image, where body text can wrap around an image. Images are the same ratio as images used for article previews. This text is an example of a caption. Photo credit: Joe Bloggs 3
Prev Next 
<div style="width: 650px;">


<div class="gallery cycle-slideshow"
    data-cycle-slides="> .slide"
    data-cycle-timeout="0"
    data-cycle-prev=".gallery-prev"
    data-cycle-next=".gallery-next"
    data-cycle-fx="fade"
    data-cycle-pager=".gallery-pager"
>

    <figure class="slide" data-cycle-pager-template="<img src='uploads/gallery1.jpg' alt='This is a small landscape image.' />">
        <img src="uploads/gallery1.jpg" alt="This is a small landscape image." />
        <figcaption>This is a small width landscape image, where body text can wrap around an image. Images are the same ratio as images used for article previews. This text is  an example of a caption. <strong>Photo credit: Joe Bloggs 1</strong></figcaption>
    </figure>
    <figure class="slide" data-cycle-pager-template="<img src='uploads/gallery2.jpg' alt='This is a small landscape image.' />">
        <img src="uploads/gallery2.jpg" alt="This is a small landscape image." />
        <figcaption>This is a small width landscape image, where body text can wrap around an image. Images are the same ratio as images used for article previews. This text is  an example of a caption. <strong>Photo credit: Joe Bloggs 2</strong></figcaption>
    </figure>
    <figure class="slide" data-cycle-pager-template="<img src='uploads/gallery3.jpg' alt='This is a small landscape image.' />">
        <img src="uploads/gallery3.jpg" alt="This is a small landscape image." />
        <figcaption>This is a small width landscape image, where body text can wrap around an image. Images are the same ratio as images used for article previews. This text is  an example of a caption. <strong>Photo credit: Joe Bloggs 3</strong></figcaption>
    </figure>
</div>
<div class="gallery-pager cycle-slideshow"
    data-cycle-slides="> img"
    data-cycle-timeout="0"
    data-cycle-prev=".gallery-prev"
    data-cycle-next=".gallery-next"
    data-cycle-caption=".custom-caption"
    data-cycle-fx="carousel"
    data-cycle-carousel-fluid="true"
>
    <span class="icn gallery-prev"><span>Prev</span></span>
    <span class="icn gallery-next"><span>Next</span></span>
</div>


</div>
<div class="clear"></div>

Language Selector

The drop down language selector toggle. Please note, this should be contained in a relative positioned container and by default has white text for the active language.

  • EN
  • GR
  • FR
  • IT
  • AU
  • GR
  • FR
  • IT
  • AU
  • GR
  • FR
  • IT
  • AU
<div style="position:relative; background-color: #222; padding: 20px;">
    <ul class="languageSelect listReset left clearfix">
        <li class="active"><span class="icn icn-flag-eng"></span>EN</li>
        <li><span class="icn icn-flag-eng"></span>GR</li>
        <li><span class="icn icn-flag-eng"></span>FR</li>
        <li><span class="icn icn-flag-eng"></span>IT</li>
        <li><span class="icn icn-flag-eng"></span>AU</li>
        <li><span class="icn icn-flag-eng"></span>GR</li>
        <li><span class="icn icn-flag-eng"></span>FR</li>
        <li><span class="icn icn-flag-eng"></span>IT</li>
        <li><span class="icn icn-flag-eng"></span>AU</li>
        <li><span class="icn icn-flag-eng"></span>GR</li>
        <li><span class="icn icn-flag-eng"></span>FR</li>
        <li><span class="icn icn-flag-eng"></span>IT</li>
        <li><span class="icn icn-flag-eng"></span>AU</li>
    </ul><!-- .languageSelect -->
</div>

Leaderboard

The leaderboard located on the homepage

UWW Global Team Ranking Last updated 21st May 2014
  • Iran
  • Russia
  • Ukraine
  • USA
  • Turkey
View full leaderboard 
<div style="width:400px;">

    <div class="leaderboard">
        <div class="title">
            <i class="icn icn-logo-emblem"></i>
            <strong>UWW Global Team Ranking</strong>
            <span class="meta">Last updated 21st May 2014</span>
        </div>
        <div class="list">
            <ul class="listReset clearfix shadowBox">
                <li class="up">Iran<i class="icn"></i></li>
                <li class="up">Russia<i class="icn"></i></li>
                <li class="down">Ukraine<i class="icn"></i></li>
                <li class="up">USA<i class="icn"></i></li>
                <li class="down">Turkey<i class="icn"></i></li>
            </ul>
        </div>
        <a href="#" class="clear readmore right">View full leaderboard <i class="icn icn-arrow-right"></i></a>
    </div><!-- leaderboard -->

</div>

Pagination

Default pagination bar. Text align center the parent container

<div class="col-md-12 margin text-center">
    <ul class="pagination listReset">
        <li><a href="#">&lt;</a></li>
        <li class="disabled"><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&gt;</a></li>
    </ul>
</div>

Photo Wall

A section containing photo wall. Elements use the same format of markup as captioned images.

Photo 1 of wall
England's CHINU accepts the cheers of a packed house after earning his Commonwealth Games bronze medal with a 12-1 victory over Hollis Ochineng MKANGA (KEN) Wednesday in the Wrestling Hall at the SECC Arena in Glasgow. (Photo: T.R. Foley, FILA-Wrestling.com)
Photo 1 of wall
England's CHINU accepts the cheers of a packed house after earning his Commonwealth Games bronze medal with a 12-1 victory over Hollis Ochineng MKANGA (KEN) Wednesday in the Wrestling Hall at the SECC Arena in Glasgow. (Photo: T.R. Foley, FILA-Wrestling.com)
<section class="photoWall clearfix row no-pad">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <figure>
            <img src="uploads/photoWall1.jpg" alt="Photo 1 of wall" />
            <figcaption>England's CHINU accepts the cheers of a packed house after earning his Commonwealth Games bronze medal with a 12-1 victory over Hollis Ochineng MKANGA (KEN) Wednesday in the Wrestling Hall at the SECC Arena in Glasgow. (Photo: T.R. Foley, FILA-Wrestling.com)</figcaption>
        </figure>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
        <figure>
            <img src="uploads/photoWall1.jpg" alt="Photo 1 of wall" />
            <figcaption>England's CHINU accepts the cheers of a packed house after earning his Commonwealth Games bronze medal with a 12-1 victory over Hollis Ochineng MKANGA (KEN) Wednesday in the Wrestling Hall at the SECC Arena in Glasgow. (Photo: T.R. Foley, FILA-Wrestling.com)</figcaption>
        </figure>
    </div>
</section><!-- .photoWall -->

Schedule

Table styling for a default content table. Don't forget the caption. Add a .hidden class to the caption to have it hidden.

  • 6 September 2014 Dimanche / Sunday

    • 19:00
      Inscriptions dwfinitives pour LL Cat
      Final entries for FS Cat 57-70-86-125kg
    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg

  • 6 September 2014 Dimanche / Sunday

    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg
    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg

  • 6 September 2014 Dimanche / Sunday

    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg
    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg

  • 6 September 2014 Dimanche / Sunday

    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg
    • 19:00
      Inscriptions dwfinitives pour LL Cat 57-70-86-125kg
      Final entries for FS Cat 57-70-86-125kg 
<ul class="schedule">
    <li class="active">
        <p class="title"><strong>6 September 2014</strong> Dimanche / Sunday</p>

        <ul class="striped">
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        Inscriptions dwfinitives pour LL Cat<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        Inscriptions dwfinitives pour LL Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
        </ul>
    </li>
    <li class="active">
        <p class="title"><strong>6 September 2014</strong> Dimanche / Sunday</p>

        <ul class="striped">
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        <strong>Inscriptions dwfinitives pour LL</strong> Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        Inscriptions dwfinitives pour LL Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
        </ul>
    </li>


    <li>
        <p class="title"><strong>6 September 2014</strong> Dimanche / Sunday</p>

        <ul class="striped">
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        <strong>Inscriptions dwfinitives pour LL</strong> Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        Inscriptions dwfinitives pour LL Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
        </ul>
    </li>

    <li>
        <p class="title"><strong>6 September 2014</strong> Dimanche / Sunday</p>

        <ul class="striped">
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        <strong>Inscriptions dwfinitives pour LL</strong> Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
            <li>
                <div class="row">
                    <div class="col-md-3">
                        <strong>19:00</strong>
                    </div>
                    <div class="col-md-9">
                        Inscriptions dwfinitives pour LL Cat 57-70-86-125kg<br/>
                        Final entries for FS Cat 57-70-86-125kg 
                    </div>
                </div>
            </li>
        </ul>
    </li>

</ul>

Search

The search form is found in the header for desktop and in the sidebar for mobile.

A single page variant

<form class="search left" action="#" method="post">                 
    <div class="field">
        <label for="searchInput" class="infield">Search</label>
        <input id="searchInput" name="Search" type="text" />
    </div>
    <button type="submit" class="icn icn-search"><span>Search</span></button>
</form>
<div class="clear"></div>

<p>A single page variant</p>
<form role="form" class="pageSearch">
    <div class="form-group">
        <label for="pageSearchInput" class="infield">Search</label>
        <input type="text" name="search input" class="form-control" id="pageSearchInput">
    </div>
    <button type="submit" class="btn orange">Search</button>
</form>

Share bar

<div class="row share-bar">
    <div class="col-xs-1">
        <img src="uploads/bio-tim.jpg" alt="mugshot: Tim Foley" class="img-circle">
    </div>
    <div class="col-xs-6">
        By Tim Foley, UWW Expert<br/>
        <div class="share">
            <span class="share-label">Share</span>
            <a href="#"><i class="icn icn-share-facebook"><span>Facebook</span></i></a>
            <a href="#"><i class="icn icn-share-twitter"><span>Twitter</span></i></a>
            <a href="#"><i class="icn icn-share-pinterest"><span>Pinterest</span></i></a>
            <a href="#"><i class="icn icn-share-linkedin"><span>LinkedIn</span></i></a>
            <a href="#"><i class="icn icn-share-share"><span>share</span></i></a>
        </div>
    </div>
    <div class="col-xs-5">
        <p class="meta text-right">
            Friday 1 August 2014 <span class="divider-dot">&bull;</span> 1AM<br/>
            <a href="#" class="comments">43 comments</a>
        </p>
    </div>
</div>

Sidebar menu

The sidebar menu on static pages. Just add 'hasSubnav' on nested items.

<div style="width: 250px;">

    <nav>
        <ul class="menu listReset shadowBox">
            <li class="title">Generic Sub Nav</li>
            <li class="hasSubnav">
                <a href="#">Menu Item</a>
                <ul>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                </ul>
            </li>
            <li class="hasSubnav active">
                <a href="#">Active Menu Item</a>
                <ul>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                </ul>
            </li>
            <li class="hasSubnav">
                <a href="#">A menu item that takes up two lines</a>
                <ul>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                </ul>
            </li>
            <li class="hasSubnav">
                <a href="#">Menu Item</a>
                <ul>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                    <li><a href="#">Sub menu item</a></li>
                </ul>
            </li>
        </ul>
    </nav>

</div>
<div class="clear"></div>

Tags

Tag examples

Tag Name Tag Name Tag Name Tag Name Tag Name Tag Name
Tags:Olympic GamesDavid Safaryan#GoldenGrandPrixgoldmedal 
<div class="tags clearfix">
    <span class="tag orange">Tag Name</span>
    <span class="tag navy">Tag Name</span>
    <span class="tag pearl">Tag Name</span>
    <span class="tag purple">Tag Name</span>
    <span class="tag peach">Tag Name</span>
    <span class="tag dark">Tag Name</span>
</div>

<div class="clear"></div>

<small class="tags-list"><strong>Tags:</strong><a href="#">Olympic Games</a><a href="#">David Safaryan</a><a href="#">#GoldenGrandPrix</a><a href="#">gold</a><a href="#">medal</a></small>

Title Bar

Title bars

Latest from the 2014 Greco Roman World Cup

More stories

Titlebar on fancy background

Events

See all events 
<div class="titleBar">
    <div class="wrapper clearfix">
        <h3 class="title left">Latest from the 2014 Greco Roman World Cup</h3>
        <a href="#" class="right">More stories</a>
    </div>
</div>

<p>Titlebar on fancy background</p>

<div class="fancyBG">
    <div class="fancy titleBar">
        <div class="wrapper clearfix">
            <h3 class="title left">Events</h3>
            <a href="#" class="right">See all events</a>
        </div>
    </div>
</div>