Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

Opencart 3.X Ürün Detayda Yeni Tabs Sitilleri Tam Tamına 6 Tane

Opencart 3 versiyonları için düzenlediğim bir birinden farklı 6 adet ürün tabs sitilleri mevcut. Opencartın 3 default yada temanıza ait ürün detaydaki tabs sitillerinden bıktıysanız yada farklı bir görsel arıyorsanız bu düzenleme tam size göre.

Dip Notlar:

1-) Test Edilen Temalar: Opencart Default Teması.

2-) Test Edilen Server: Localhost.

a-) Düzenleme default teması ve localhost'ta test edilmiştir. farklı temalarda yedekleyip test ediniz. Kendi sitenizde denemeden önce mutlaka yedek alınız, localhost yada demo sitenizde ilk denemenizi yapınız.


..... :::: TANITIM VİDEOSU :::: ....

https://www.dailymotion.com/video/x803dox

Yeni Tabs Css

Alıntı:.panel.with-nav-tabs .panel-heading{
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
background-color: #ddd;
border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f5f5f5;
border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #555;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
/********************************************************************/
/*** PANEL SUCCESS ***/
.with-nav-tabs.panel-success .nav-tabs > li > a,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > .open > a,
.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
background-color: #d6e9c6;
border-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.active > a,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
color: #3c763d;
background-color: #fff;
border-color: #d6e9c6;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #3c763d;
}
/********************************************************************/
/*** PANEL INFO ***/
.with-nav-tabs.panel-info .nav-tabs > li > a,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > .open > a,
.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
color: #31708f;
background-color: #bce8f1;
border-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.active > a,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
color: #31708f;
background-color: #fff;
border-color: #bce8f1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
background-color: #d9edf7;
border-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #31708f;
}
/********************************************************************/
/*** PANEL WARNING ***/
.with-nav-tabs.panel-warning .nav-tabs > li > a,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > .open > a,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
background-color: #faebcc;
border-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
color: #8a6d3b;
background-color: #fff;
border-color: #faebcc;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
background-color: #fcf8e3;
border-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #8a6d3b;
}
/********************************************************************/
/*** PANEL DANGER ***/
.with-nav-tabs.panel-danger .nav-tabs > li > a,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
}
.with-nav-tabs.panel-danger .nav-tabs > .open > a,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
background-color: #ebccd1;
border-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
color: #a94442;
background-color: #fff;
border-color: #ebccd1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f2dede; /* bg color */
border-color: #ebccd1; /* border color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #a94442; /* normal text color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ebccd1; /* hover bg color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff; /* active text color */
background-color: #a94442; /* active bg color */
}

Birinci Stil

Alıntı:<div class="panel with-nav-tabs panel-info">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1info" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab2info" data-toggle="tab">{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab3info" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}

</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1info">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane fade" id="tab2info"> <table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane fade" id="tab3info"><form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}</div>
</div>
</div>

İkinci Stil

Alıntı: <div class="panel with-nav-tabs panel-success">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1success" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab2success" data-toggle="tab">{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab3success" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}

</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1success">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane fade" id="tab2success">


<table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>

</div>
{% endif %}
{% if review_status %}

<div class="tab-pane fade" id="tab3success">
<form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}

</div>

</div>
</div>
</div>

Üçüncü Stil

Alıntı: <div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab2primary" data-toggle="tab">{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab3primary" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}

</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane fade" id="tab2primary"> <table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane fade" id="tab3primary"><form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}</div></div></div> </div>

Dördüncü Stil

Alıntı:<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab2default" data-toggle="tab">{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab3default" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane fade" id="tab2default">

<table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane fade" id="tab3default"><form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}

</div>
</div>
</div> </div>

Beşinci Stil

Alıntı:<div class="panel with-nav-tabs panel-warning">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1warning" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab2warning" data-toggle="tab"> {{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab3warning" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}

</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1warning">{{ description }}</div>

{% if attribute_groups %}
<div class="tab-pane fade" id="tab2warning"> <table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane fade" id="tab3warning"><form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}</div>
</div>
</div> </div>

Altıncı Stil

Alıntı: <div class="panel with-nav-tabs panel-danger">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1danger" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab2danger" data-toggle="tab">{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab3danger" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1danger">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane fade" id="tab2danger"><table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane fade" id="tab3danger"> <form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}</div>
</div>
</div> </div>