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 "¿Quién está en Línea?" en Tabs (pestañas) 2x97uModos de visualización "¿Quién está en Línea?" en Tabs (pestañas) 2x97u

"¿Quién está en Línea?" en Tabs (pestañas) UFXmlYj"¿Quién está en Línea?" en Tabs (pestañas) ZcHKMjL
(#1)
Old  Supervisor
">
Miko
Supervisor
Miko
38011372805/02/2009PeruMy dream is you.https://i.imgur.com/Nh2lbrq.png
 
icon2 "¿Quién está en Línea?" en Tabs (pestañas) - el 27/8/2010, 9:02 am

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:

"¿Quién está en Línea?" en Tabs (pestañas) Spacer"¿Quién está en Línea?" en Tabs (pestañas) Sshot-10



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 "

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

"¿Quién está en Línea?" en Tabs (pestañas) UFXmlYj"¿Quién está en Línea?" en Tabs (pestañas) ZcHKMjL
(#2)
Old  Hacha de Plata doble
">
Ketan
Hacha de Plata doble
Ketan
2526051601/09/2010España
 
icon2 Re: "¿Quién está en Línea?" en Tabs (pestañas) - el 19/11/2010, 4:53 pm

Buenisimo el Tuto... e..

Comentar con facebook:
"¿Quién está en Línea?" en Tabs (pestañas) Imagen11
 » Temas similares en otros foros
» Pestañas con jQuery
» ¿Cómo pongo el icono en la pestaña de mi foro?
» Ayuda con nombre del foro en la sección de pestaña
» Problema con el menú con varios pestañas
» No puedo cambiar el nombre de mi dominio en la pestaña
 
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