Nastavení vzhledu

index.html

<div class="container" >
<form class="form-horizontal">
  <legend>Přizpůsobit vzhled</legend>
  <div class="form-group">
    <label class="col-md-2 control-label nazvyPoli">URL vašeho TaskPool:</label>
    <div class="col-md-4">
      <input type="text" class="form-control" value="helpdesk.cooper.cz">
    </div><!-- /col -->
    <div class="col-md-6">
      helpdesk pro zákazníky: <a href="//helpdesk.cooper.cz">helpdesk.cooper.cz</a>
      <br />pracoviště řešitele: <a href="//helpdesk.cooper.cz/task">helpdesk.cooper.cz/task</a>
    </div><!-- /col -->
  </div><!-- /form-group -->
  <div class="form-group">
    <label class="col-md-2 control-label nazvyPoli">Logo:</label>
    <div class="col-md-4">
      <div id="logo" class="btn-group tripple" data-toggle="buttons-radio">
        <button class="btn btn-default btn-small">Prvek na výběr loga</button>
      </div>
    </div><!-- /col -->
    <div class="col-md-6">
      <span class="fa-stack fa-lg info-icon">
        <i class="fa fa-circle-o fa-stack-2x"></i>
        <i class="fa fa-stack-1x">i</i>
      </span>
      <div class="info-text">
        <i>Velikost loga: 150 x 75 pixelů, přesně. Formát: doporučujeme použít bezeztrátový formát *.png nebo *.gif s průhledným pozadím. Logo se do aplikace promítne po přechodu na pracoviště.</i>
      </div><!-- /info-text -->
    </div><!-- /col -->
  </div><!-- /form-group -->
  <div class="form-group">
    <label class="col-md-2 control-label nazvyPoli">Výchozí jazyk systému:</label>
    <div class="col-md-4">
      <select class="form-control">
        <option>CZ</option>
        <option>SK</option>
        <option>EN</option>
      </select>
    </div><!-- /col -->
    <div class="col-md-6">
      <i>Zákazníci i řešitelé si mohou při návštěvě jazyk přepnout. řešitelé a registrovaní zákazníci si ve svém profilu mohou i zvolit svůj výchozí jazyk.</i>
    </div><!-- /col -->
  </div><!-- /form-group -->
</div><!-- /form -->
</div><!-- /container -->

<div class="pageComments">
  <ul>
    <li>Poznámky: Info ikona v tomto návrhu bohužel nefunguje. Zorazuje se jen i. Má vypadat takto: <a href="http://codepen.io/tintera/pen/gpZmZB">http://codepen.io/tintera/pen/gpZmZB</a></li>
    <li>Stránka řeší i zobrazení na užších obrazovkách.</li>
  </ul>
</div>

Nastavení vzhledu.markdown

Nastavení vzhledu

A Pen by Tomáš Tintěra on CodePen.

License.

style.css

.btn-group.tripple .btn, .btn-group.double .btn {
  width: 121px;
}
.border { border: 1px solid lightgreen; }
textarea.licenceFile { height: 10em; }
hr.noBottom { margin-bottom: 0px; }
.nazvyPoli { font-weight: normal; }
body { background-color: #F9F9FF; color: #222; }

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet" />
<link href="//codepen.io/tintera/pen/0dde25ffff403bfaac1c45cc0ecb5b25" rel="stylesheet" />