Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Image with left alignment and 50% width

Place for credits

Because it's a responsive skin (and also written in HTML5) adding images differs from the usual way a little. To add an image you need to use figure,img and figcaption tags. The figure tag must have width defined. It may be relative (e.g.: 50%), or absolute (e.g.: 250px). The image inside will scale automatically to fit the frame (specified by figure tag), so it should have responsive class specified. Classes alignleft and alignright responsible for the image floating from left to right side. These classes are not used by the mobile versions, because images are never float there.

<figure style="width: 50%;" class="alignleft full-width-mobile thin">
 <img alt="" class="responsive" src="/portals/responsivedark/" />
 <figcaption>Place for credits</figcaption>
</figure>

Image with right alignment and 250px width

Place for credits

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing consequat sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. In turpis. Pellentesque posuere. Praesent turpis. Pellentesque auctor neque nec urna. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.

<figure style="width: 250px;" class="alignright full-width-mobile thin">
 <img alt="" class="responsive" src="/portals/responsivedark/" />
 <figcaption>Place for credits</figcaption>
</figure>

Social icons

<div class="widget widget-social">
<ul>
 <li>
  <img alt="" src="/portals/responsivedark/content/img/bright/social/vimeo.png" />
  <a href="#vimeo" title="Watch my videos">Vimeo</a>
 </li>
</ul>
</div>

Horizontal social icons


<div class="widget widget-social">
<ul class="horizontal">
 <li>
  <img alt="" src="/portals/responsivedark/content/img/bright/social/vimeo.png" />
  <a href="#vimeo" title="Watch my videos">Vimeo</a>
 </li>
</ul>
</div>

Image with thin border and caption

Place for credits
<figure class="full-width-mobile thin">
 <img src="/portals/responsivedark/" class="responsive" alt="">
 <figcaption>Place for credits</figcaption>
</figure>

Buttons

<button class="small">Small button</button>

<button>Button</button>

<button class="icon-16">
<span>
<img src="/portals/responsivedark/16/heart.png">
</span>
Button</button>

<button class="icon-32">
<span>
<img src="/portals/responsivedark/32/sign-in.png" alt="">
</span>
Button</button>

Image with thick border and lightbox

<figure class="full-width-mobile thick">
 <a href="URL" title="Place for caption" class="fancybox">
  <img alt="" src="/portals/responsivedark/" class="responsive" />
 </a>
</figure>

Unordered list with pretty icons

<ul class="list check">
    ...
</ul>

The classes and icon's names are the same (like invoice.png). So you can use them as button's icons as well. Find more icons in content/img/icons/16[32] folder.

  • class="invoice"
  • class="collaboration"
  • class="refresh"
  • class="calendar"
  • class="lock"
  • class="flag"
  • class="free-for-job"
  • class="heart"
  • class="home"
  • class="project"
  • class="bestseller"
  • class="issue"
  • class="paypal"
  • class="zoom"
  • class="tag"
  • class="contact"
  • class="check"
  • class="config"
  • class="attibutes"
  • class="brainstorming"
  • class="star"
  • class="photography"
  • class="cv"
  • class="home"
  • class="basket"
  • class="billing"
  • class="busy"
  • class="sitemap"
  • class="pencil"
  • class="illustration"
  • class="comment"
  • class="edit"
  • class="order"

Social media share buttons

<ul class="social clear">
 <li>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="..." data-text="..." data-count="horizontal">Tweet</a>
 </li>
 <li>
  <div class="fb-like" data-href="..." data-send="false" data-layout="button_count"></div>
 </li>
 <li>
  <div class="g-plusone" data-size="medium" data-href="..."></div>
 </li>
</ul>

Optional box configuration

Optional box

This is an optional box which can be closed by site visitors. If you change content of this box, it will be displayed again even if user closed it before. More

<section data-expires="0" class="box" id="optional-box-1">
<h1>Optional box</h1>
<p>This is an optional box which can be closed by site visitors.
 <a class="more" href="/responsive/Features/shortcodes.aspx">More</a>
</p>
</section>

Fill the attributes:
id - any, unique id for the box,
data-expires - number of days, after which the box will be visible again after being closed by user (if you use 0 , it will be visible again after browser's restart).

Both attributes are required. If you miss any of them, the closing "X" will not appear on the box.

Header ad

<div class="vertical ad">
 <div>
  <a href="#_">
   <img alt="" width="468" height="60" src="/portals/responsivedark/content/bright/ad-468x60.png" />
  </a>
 </div>
</div>