Cargando...
Notificaciones Password  Username

Regresar CPortada - Mas que un foro, tu Comunidad.  » Recursos para Forumotion - Foroactivo » PUNBB
Actualizar esta página "¿Quién está en Línea?" en Tabs (pestañas)
Nombre de Usuario:
Contraseña:
   

Responder al tema
 
Herramientas Modos de visualización

  
(#1)
Old  Supervisor
">
Supervisor
Miko
3379942805/02/2009Peru
 

Este tutorial es un poco avanzado y requiere de:
-Leer este tema antes de iniciar
-Tener un conocimiento medio de HTML y CSS
-------->Si no sabes, puedes empezar unas clases en: W3Schools Online Web Tutorials


Nombre:"¿Quién está en Línea?" en Tabs (pestañas)


Autor: BlAcKDoZzEr666


Descripción:Poner en Tabs Las secciones de ¿Quién está en línea?: Usuarios en línea, Estadísticas, ChatBox y lo que quieras agregar.


Dificultad: *****

Como hacerlo:

Primero lo primero, es necesario editar templates para poder tener esta característica funcionando correctamente.
Ir a: PA - Visualizacion - Templates - General
Abrir: index_body

Buscar:

Código:
[/b][b]<div id="pun-info" class="main">
    <div class="main-content">
        <div id="stats">
            <p class="right">{TOTAL_POSTS}</p>
            <p>{TOTAL_USERS}</p>
            <p>{NEWEST_USER}</p>
        </div>
        <div id="onlinelist">
            <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
            <p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
            <p>{TOTAL_USERS_ONLINE}<br />
            {RECORD_USERS}
           
            <br />
            {LOGGED_IN_USER_LIST}
           
            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <div class="clear"></div>
           
            <p>{LEGEND} : {GROUP_LEGEND}</p>
           
        </div>
        <!-- BEGIN switch_chatbox_activate -->
        <div id="onlinechat">
            <p class="page-bottom">
            {TOTAL_CHATTERS_ONLINE} : 
            {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                </script>
            <!-- END switch_chatbox_popup -->
            </p>
        </div>
        <!-- END switch_chatbox_activate -->
    </div>
</div>[/b][b]


Reemplazar con:


Código:

 
<div id="pun-info" class="main">
    <div class="main-content-stats">
<div class="simple-tabs">
  <ul class="simpletabs">
    <li><a href="#onlinelist">Usuarios en línea</a></li>
    <li><a href="#stats">Estadisticas</a></li>
    <li><a href="#onlinechat">ChatBox</a></li>
<!-- aqui se pueden agregar mas pestañas con el formato: <li><a href="#miID">Mi pestaña</a></li>, pero tambien deben agregarse un div en el tab_container: <div id="miID">contenido</div>  -->
  </ul>
<div class="tab_container">
        <div id="onlinelist" class="divwhite">
            <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" title="¿Quién está en línea?" />
            <p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p>
            <p>{TOTAL_USERS_ONLINE}
            <br />
            {LOGGED_IN_USER_LIST}
           
            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
            <div class="clear"></div>
           
            <p>{LEGEND} : {GROUP_LEGEND}</p>
           
        </div>
 
 
        <div id="stats" class="divwhite">
            <p>{RECORD_USERS}</p>
            <p>{TOTAL_POSTS}</p>
            <p>{TOTAL_USERS}</p>
            <p>{NEWEST_USER}</p>                 
        </div>
 
 
        <div id="onlinechat" class="divwhite">
        <!-- BEGIN switch_chatbox_activate -->
            <p class="page-bottom">
            {TOTAL_CHATTERS_ONLINE} :&nbsp;
            {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                </script>
            <!-- END switch_chatbox_popup -->
            {CHATBOX_BOTTOM}
            </p>
        <!-- END switch_chatbox_activate -->
        </div>
</div <!-- fin tab_container -->
</div><!-- fin SimpleTabs -->
        </div>
</div>


El Script

Código:

/**************************************************
* Codigo perteneciente a SOH de [url=http://www.sohtanaka.com]http://www.sohtanaka.com[/url]           
* [url=http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/]http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/[/url]
***************************************************/
$(function() {
    //Al cargar la pagina...
    $("div.divwhite").hide(); //Oculta todo el contenido
    $("ul.simpletabs li:first").addClass("active").show(); //Activa la primera pestaña
    $("div.divwhite:first").show(); //Muestra el contenido de la primera pestaña
 
    //Al hacer click
    $("ul.simpletabs li").click(function() {
 
        $("ul.simpletabs li").removeClass("active"); //Remueve la clase "active" de los elementos de la lista.
        $(this).addClass("active"); //Agrega la clase "active" a los elementos de la lista
        $("div.divwhite").hide(); //Oculta todo el contenido
 
        var activeTab = $(this).find("a").attr("href"); //Busca el atributo "href" para identificar la pestaña activa mas el contenido
        $(activeTab).fadeIn(); //Efecto de aparición al contenido de la pestaña activa.
        return false;
    });
});
 

Habiendo ya editado los templates es hora de darle un diseño porque si no se vera muy feo xD
Para integrar el código a nuestro CSS, ir a:
PA - Visualización - Colores - CSS Stylesheet.
Agregar después de tu código, el siguiente código:

/**************************************
*Estadisticas en Pestañas
*Tutorial y CSS creado por BlAcKDoZzEr666
**************************************/
div#onlinelist img {padding-right:5px;}
div#onlinelist, div#onlinechat {border-style: none;}
.pun .main .main-content-stats {background-color: transparent;}

div.simple-tabs{
width:100%;
}
div.tab_container{
border: 1px solid #12A3EB;
padding: 5px;
background-color: #E6F4FF;
font-size:12px;
-moz-border-radius-bottomleft : 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
min-height:150px;
}
ul.simpletabs{
list-style-type: none;
margin: 0;
padding-left: 30px;
padding-bottom: 25px;
font: 11px verdana, arial, sans-serif;
}
ul.simpletabs li{
float: left;
height: 21px;
background-color: #E4E4E4;
color: #666;
margin: 2px 5px 0 2px;
border: 1px solid #7ccafc;
}
ul.simpletabs li, ul.simpletabs li a{
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topright:6px;
-webkit-border-top-right-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
ul.simpletabs li a{
border-bottom:1px solid #12A3EB;
}
ul.simpletabs li:hover {
background:#E6F4FF;
color:#12A3EB;
border:1px solid #12A3EB;
}
ul.simpletabs li.active {
border:1px solid #12A3EB;
}
ul.simpletabs li.active a {
background:#E6F4FF;
color:#12A3EB;
border-bottom:1px solid #E6F4FF;
}
ul.simpletabs li a:hover {
background:#E6F4FF;
color:#12A3EB;
}
ul.simpletabs a:link,
ul.simpletabs a:visited,
ul.simpletabs a:active {
width:auto;
padding:4px 5px 4px 5px;
height:14px;
display:block;
font-weight:bold;
text-decoration:none;
text-align:center;
color: #000;
background-color: #fff;
}




CSS Original:


/**************************************************
* Codigo original por SOH de http://www.sohtanaka.com
* http://www.sohtanaka.com/web-design/sim ... ss-jquery/
***************************************************/
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

En el CSS editaran todo lo que esta en negrita, que son los anchos, colores de fuente, colores de fondo, colores y estilo de borde, etc. Ver las referencias para una mejor comprension.

Referencia de propiedades:

border, border-style, border-bottom, etc.: se refiere a los bordes
background, background-color: color de fondo
border-radius, -webkit-border-radius, border-radius-bottom-left, etc.: Son las esquinas redondeadas de los bordes
color: el color del texto
font-size: tamaño de texto
padding: margen interior

Referencia de clases:

Referencias de Clases : .pun .main .main-content-stats, div.simple-tabs: contenedores principales de las tabs
div.tab_container: contenedor del contenido de las tabs
ul.simpletabs, ul.simpletabs li: pestañas inactivas
ul.simpletabs li a enlaces en las pestañas inactivas
ul.simpletabs li:hover, ul.simpletabs li a:hover al pasar el cursor en las pestañas inactivas
ul.simpletabs li.active, ul.simpletabs li.active a pestaña activa
ul.simpletabs a:link, visited y active: link normal, link visitado y al hacer click


Resultado:




http://www.sohtanaka.com/web-design/examples/tabs/

Saludos!



Quisiera borrarte de mi memoria...creer que no existe tu persona,
pero es imposible que yo lo crea...
por que eres imagen que a mi se revela...
no puedo seguir con esta angustia...e ir sin ti es mi castigo
yo se que es pecado amarte a ciegas...y desde hoy he jurado…

" Un corazon Solitario no es un corazon "

  
(#2)
Old  Hacha de Plata doble
">
Hacha de Plata doble
Ketan
2516011501/09/2010España
 

Buenisimo el Tuto... e..

Comentar con facebook:
 
Permisos de este foro:
No puedes responder a temas en este foro.

 Los Códigos BB están Activado
 Los Emoticonos están Activado
 Código [IMG] está Activado
 Código HTML está Activado