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

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



.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



                

                        

                            {{ tab_description }}

							{% if attribute_groups %}

                            {{ tab_attribute }}

							    {% endif %}

            {% if review_status %}

                            {{ tab_review }}

							 {% endif %}

                            

                        

                

                

                    

                        {{ description }}

						{% if attribute_groups %}

                         
                {% for attribute_group in attribute_groups %}







                {% for attribute in attribute_group.attribute %}





                {% endfor %}


                {% endfor %}


                
                  
                    {{ attribute_group.name }}
                  
                
                
                
                  {{ attribute.name }}
                  {{ attribute.text }}
                
                  
              

            

            {% endif %}

            {% if review_status %}

                        

                

                {{ text_write }}

                {% if review_guest %}

                

                  

                    {{ entry_name }}

                    

                  

                

                

                  

                    {{ entry_review }}

                    

                    {{ text_note }}

                  

                

                

                  

                    {{ entry_rating }}

                        {{ entry_bad }} 

                    

                     

                    

                     

                    

                     

                    

                     

                    

                     {{ entry_good }}

                

                {{ captcha }}

                

                  

                    

                  

                

                {% else %}

                {{ text_login }}

                {% endif %}

              

            

            {% endif %}

{{ attribute_group.name }}
{{ attribute.name }}	{{ attribute.text }}

İkinci Stil



            

                

                        

                            {{ tab_description }}

							 {% if attribute_groups %}

                            {{ tab_attribute }}

							{% endif %}

							  {% if review_status %}

                            {{ tab_review }}

							{% endif %}

                             

                        

                

                

                    

                        {{ description }}

						 {% if attribute_groups %}

                        

						

						

						  
                {% for attribute_group in attribute_groups %}







                {% for attribute in attribute_group.attribute %}





                {% endfor %}


                {% endfor %}


                
                  
                    {{ attribute_group.name }}
                  
                
                
                
                  {{ attribute.name }}
                  {{ attribute.text }}
                
                  
              

			  

						

						{% endif %}

            {% if review_status %}

			

                        

						

                

                {{ text_write }}

                {% if review_guest %}

                

                  

                    {{ entry_name }}

                    

                  

                

                

                  

                    {{ entry_review }}

                    

                    {{ text_note }}

                  

                

                

                  

                    {{ entry_rating }}

                        {{ entry_bad }} 

                    

                     

                    

                     

                    

                     

                    

                     

                    

                     {{ entry_good }}

                

                {{ captcha }}

                

                  

                    

                  

                

                {% else %}

                {{ text_login }}

                {% endif %}

              

            

            {% endif %}

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

{{ text_write }}

{{ text_write }}

{{ text_write }}

{{ text_write }}

{{ text_write }}

{{ text_write }}

Üye Girişi Yap