SoftDesign


Bun venit Vizitator pe SoftDesign, speram ca-ti place acest forum care iti pune la dispozitie o gama larga de tutoriale si resurse pentru WebDesign si ForumGratuit , si speram ca vei binevoi sa-ti faci cont pe forum pentru a avea aces la toate subiectele forumui.

Categorii sau subforumuri ca taburi - Phpbb3

In jos

Categorii sau subforumuri ca taburi - Phpbb3

Mesaj Scris de Rio la data de Dum Feb 12, 2012 8:10 am

Un mic demo: http://boardtalk.org/forum/index.php?style=10
Tutorial in limba engleza: http://help.forumotion.com/t104506-forum-categories-as-tabs#681460
Am incercat sa fac acest cod si pentru forumgratuit, nu am testatul codul deci daca sunt porbleme va rog sa anuntati.

1Pentru inceput mergeti in AP > Afisare > Generalitati
Inserati acest cod:

Pentru subforumuri:

Cod:

<style>
.forabg {
display: none;
position: absolute;}
</style>

<script type="text/javascript" src="http://tazyk.webs.com/first.js"></script>
<script type="text/javascript" src="http://tazyk.webs.com/second.js"></script>

<script type='text/javascript'>
        var CopyrightNotice='Categories as tabs . Tutorial by Hoppe @ SoftDesign. Copyright © SoftDesign. All right reserved. . Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';
        $(function() {
   
            $("#example-one").organicTabs();
           
            $("#example-two").organicTabs({
                "speed": 200
            });
   
        });
    </script>

 
<div id="example-two">
               
<div id="menu_on_sistem">

<ul class="nav">
<li class="nav-one"><a href="#tab_nr1" class="current">Your first category</a></li>
<li class="nav-two"><a href="#tab_nr2">Second Category</a></li>
<li class="nav-three"><a href="#tab_nr3">New Category</a></li>
<li class="nav-four last"><a href="#tab_nr4">Test Category</a></li> 

</ul>

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

</div>



<div class="list-wrap">

<div id="tab_nr1">
                
<iframe border="none" width="700" src="/f1-"></iframe>

</div>

              
<div id="tab_nr2" class="hide">
      
<iframe border="none" width="700" src="/f2-"></iframe>

</div>
              

<div id="tab_nr3" class="hide">
      
<iframe border="none" width="700" src="/f3-"></iframe>

</div>
   
          

<div id="tab_nr4" class="hide">
   
<iframe border="none" width="700" src="/f4-"></iframe>

</div>

</div>


Pentru categorii:

Cod:

<style>
.forabg {
display: none;
position: absolute;}
</style>

<script type="text/javascript" src="http://darkspectre.bravehost.com/online_jquery_js1.js"></script>
<script type="text/javascript" src="http://darkspectre.bravehost.com/online_jquery_js2.js"></script>

<script type='text/javascript'>
        $(function() {
   
            $("#example-one").organicTabs();
           
            $("#example-two").organicTabs({
                "speed": 200
            });
   
        });
    </script>

 
<div id="example-two">
               
<div id="menu_on_sistem">

<ul class="nav">
<li class="nav-one"><a href="#tab_nr1" class="current">Your first category</a></li>
<li class="nav-two"><a href="#tab_nr2">Second Category</a></li>
<li class="nav-three"><a href="#tab_nr3">New Category</a></li>
<li class="nav-four last"><a href="#tab_nr4">Test Category</a></li> 

</ul>

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

</div>



<div class="list-wrap">

<div id="tab_nr1">
                
<iframe border="none" width="700" src="/c1-"></iframe>

</div>

              
<div id="tab_nr2" class="hide">
      
<iframe border="none" width="700" src="/c2-"></iframe>

</div>
              

<div id="tab_nr3" class="hide">
      
<iframe border="none" width="700" src="/c3-"></iframe>

</div>
   
          

<div id="tab_nr4" class="hide">
   
<iframe border="none" width="700" src="/c4-"></iframe>

</div>

</div>


2 Adaugati codul CSS in: AP > Afisare > Culori > Foaie de stil CSS:

Cod:


.hide { position: absolute; top: -9999px; left: -9999px; }

.nav { margin: 0; padding: 0; }

#example-two{margin-top: 10px;}

#example-two .list-wrap { background: #e5f1f9; padding: 10px;}

#example-two ul { list-style: none; }
#example-two ul li a { display: block; border-bottom: 1px solid #e5f1f9; padding: 4px; color: #e5f1f9; }
#example-two ul li a:hover { background: #333; color: #999999; }

#example-two .nav li { width: auto; float: left; margin: 0 10px 0 0; }

#example-two .nav li.last { margin-right: 0; }

#example-two .nav li a{ display: block; padding: 5px; background: #e5f1f9; color: #666666; font-size: 10px; text-align: center; border: 0;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
border: 1px solid #1675bc;
border-bottom: 0px;}

.list-wrap{
-moz-border-radius: 0 10px 10px 10px;
-webkit-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
border: 1px solid #1675bc;}

#example-two li a.current,#example-two li a.current:hover {
color: #1675bc;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}

#example-two .nav li a:hover, #example-two .nav li a:focus {background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}

#menu_on_sistem {
display: inline-block;
position: relative !important;
bottom: -1px;}

.profil_tab{
font-size: 12px;
top: -8px;
position: relative;}

.profil_tab td{padding-right: 30px !important;}

3 Editati pentru fiecare subforum - categorie in parte editati din codul iframe doar width si adaugati height daca este nevoie.






Tutorial realizat de Hoppe | SoftDesign

***Important !

Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Rio
Membru Fondator

Sex : masculin
Mesaje : 340
Credite : 32632
Data de inscriere : 05/09/2011

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Categorii sau subforumuri ca taburi - Phpbb3

Mesaj Scris de Zorn. la data de Dum Feb 12, 2012 8:37 am

Interesant tutorialul. Bravo !
avatar
Zorn.
Gold Member

Sex : masculin
Mesaje : 107
Credite : 2627
Data de inscriere : 14/12/2011

Vezi profilul utilizatorului

Sus In jos

Re: Categorii sau subforumuri ca taburi - Phpbb3

Mesaj Scris de gab1Tzu la data de Dum Feb 12, 2012 8:42 am

foarte frumos, chiar te pricepi, felicitari
avatar
gab1Tzu
Gold Member

Sex : masculin
Mesaje : 248
Credite : 2853
Data de inscriere : 24/09/2011
Localizare : Craiova

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Categorii sau subforumuri ca taburi - Phpbb3

Mesaj Scris de PlayOn la data de Dum Feb 12, 2012 11:00 am

Bravo Hoppe pentru munca depusa !
avatar
PlayOn
Administrator

Sex : masculin
Mesaje : 254
Credite : 2898
Data de inscriere : 06/09/2011
Localizare : ROMANIA

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Categorii sau subforumuri ca taburi - Phpbb3

Mesaj Scris de razvan la data de Sam Feb 25, 2012 1:23 am

sters
avatar
razvan
Nou venit

Sex : masculin
Mesaje : 23
Credite : 2589
Data de inscriere : 15/10/2011

Vezi profilul utilizatorului

Sus In jos

Re: Categorii sau subforumuri ca taburi - Phpbb3

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum