Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

[SOLUCIONADO] a muchos nos sirve - barra similar a wibiya

Estas en el tema de a muchos nos sirve - barra similar a wibiya en el foro de WordPress en Foros del Web. Hola, llevo unos dias tratando de implementar una barra similar a la de Wibiya, en mi tema (FlexSqueeze) y me ha ido mal, digo similar ...
  #1 (permalink)  
Antiguo 05/01/2013, 14:21
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Exclamación a muchos nos sirve - barra similar a wibiya

Hola, llevo unos dias tratando de implementar una barra similar a la de Wibiya, en mi tema (FlexSqueeze) y me ha ido mal, digo similar porque no me agrada tener algo externo y por lo que he leido alenta mucho la carga de wordpress y, ademas, porque deseo que tenga algunos botones personalizados con acceso a mis paginas, en vez de que sea tanto una barra social. De momento he probado todos estos plugins y ninguno me ha servido

The WordPress Bar
WP-Super Bar
WP External Links Bar
Wibiya Bar
Meebo Bar
Apture
Quick Navigation Panel
Hello Bar
ViperBar
Attention Bar
Easy Heads Up Bar
Notification Toolbar
Quick Notice Bar
FooBar (Premium)
Attention Grabber (Premium)
WP Top Bar
Social Toolbar

Pero la mayoria solo sirve para poner acceso a las redes sociales o para poner uno que otro link en el blog, ademas de que algunos no permiten cambiarle el lugar.

Se que con codigo (html – css y script) se puede crear una similar y se que no le agregaria peso adicional a la carga de la pagina (como sucede con wibiya), pero la informacion que he encontrado es simple aplicada a blogspot, pero poco para wordpress. Yo se que a mas de alguno le sale facil pero yo llevo enredandome varios dias y por lo que he leido no soy el unico que tiene este problema, muchos quieren barras similares y personalizables, pero no hay informacion disponible (ninguna con la que yo pudiera dar) y yo se que la mayoria aqui sabe bastante.

La otra que me llama bastante la atencion (y de la que muchos hablan, pero nadie sabe como implementar) es la que aparece en mashable.com, supongo que esa sera algo mas compleja de implementar pero estaria muy pro, poder lograrla pero a mi me sirve que flote abajo.

Cualquier orientacion, ayuda, patrocinio, etc, sirve .

Gracias

Saludos

*****

Bueno segui buscando y encontre el tutorial (en ingles) posiblemente a muchos les servira ya que esta muy bien explicado

http://wp.tutsplus.com/tutorials/add...ordpress-blog/

Pueden usarlo como base para modificar todo lo que quieran...

Saludos

Última edición por JOKEROBSCURO; 05/01/2013 a las 21:36 Razón: encontre la solucion
  #2 (permalink)  
Antiguo 08/01/2013, 12:30
 
Fecha de Ingreso: enero-2013
Mensajes: 29
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: a muchos nos sirve - barra similar a wibiya

Lo mejor que puedes hacer es implementarlo manualmente, hacer el código tu mismo en HTML y CSS, yo he implementado una barra en este sitio:

http://worldanime.tv

Si es lo que buscas, pues te guío a hacer algo parecido, logos en tu barra, hasta widgets.
  #3 (permalink)  
Antiguo 09/01/2013, 00:32
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

me gusta Rokumetal, dime cuando empezamos, pero a mi me interesaria abajo, no arriba :)

Gracias por responder
  #4 (permalink)  
Antiguo 09/01/2013, 22:37
 
Fecha de Ingreso: enero-2013
Mensajes: 29
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: a muchos nos sirve - barra similar a wibiya

Si la quieres abajo, tienes que editar el archivo footer.php de tu wordpress, la posición de la barra va depender del como esté acomodado tu código en tu archivo footer.php, todo esto va constar de CSS y HTML. Me imagino que tienes algo de experiencia en eso.

Tenemos que poner el código siguiente (este lo pones hasta arriba del archivo, no estoy seguro aquí de se vaya a posicionar, ya veremos):

Código:
<div class="barra-footer">
</div>
Ahora, vamos a crear la clase correspondiente del div que hemos puesto, tendrás que poner esto en tu style.css, o el archivo CSS que estés usando:

Código:
.barra-footer{
	width:100%; 
	height:40px; 
	background:red;
	bottom:0;
	left:0;
	position:fixed;
}
Por ahora, has eso, y fíjate ahora como aparece en tu página web. Ten en cuenta, que los valores que puse en la clase .barra-footer los puedes modificar a tu gusto a excepción de width, bottom, left y position, que son los que posicionan correctamente la barra, si quieres cámbialos y has tus comparaciones.

Me avisas, para poder seguir.
  #5 (permalink)  
Antiguo 14/01/2013, 04:04
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

RokuMetal he estado corto de tiempo, pero la pruebo lo antes posible y te comento :). Sorry por la demora en responder...

Jokerobscuro
  #6 (permalink)  
Antiguo 13/02/2013, 02:30
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

Genial Rokumetal, me funciono C: y carga rapidisimo y no sobrecarga la pagina, ahora supongo que el siguiente paso seria poner una tabla dentro de <div></div> y poder introducir botones y cosas asi?

Sorry por la demora, tuve que arreglar el tema que uso que me arrojaba un error y varias otras cosas mas...

Hay alguna forma para que se oculte presionando un boton? creo que hay un comando hidden creo, pero mi conocimiento de programacion todavia esta en pañales

Estuve haciendo una pruebas tratando de agregar una barra similar en header.php pero no me resulto ¿se agrega en algun otro lugar?

Código:
<div class="barra-header">
</div>
Código:
.barra-header{
	width:100%; 
	height:40px; 
	background:red;
	bottom:0;
	left:0;
	position:fixed;
}
Eso fue lo que hice ¿Esta mal?

Saludos

Última edición por JOKEROBSCURO; 13/02/2013 a las 02:42 Razón: agregar pregunta
  #7 (permalink)  
Antiguo 13/02/2013, 16:37
 
Fecha de Ingreso: enero-2013
Mensajes: 29
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: a muchos nos sirve - barra similar a wibiya

Hola, que bueno que te resultó, ahora, si quieres que la tabla aparezca arriba debes modificar el CSS que te puse, para ser exactos:

bottom:0;

En ves de bottom:0, le pones "top:0;"

Dentro de los <div></div>, ahí se ponen las cosas que necesitas poner, eso si, vas a tener que manejar listas <li> dependiendo de cuantas cosas quieras meter, porque si no se te irán hacia abajo.

Para quitar la barra al presionar un botón, eso se hace con algo de JQUERY, si tu barra estará en en footer, tendrás que meter el código Jquery en footer.php:

En este enlace te menciona algo parecido a lo que quieres: http://www.w3schools.com/jquery/jquery_hide_show.asp

Esto es a prueba y error, estamos al pendiente.
  #8 (permalink)  
Antiguo 06/03/2013, 12:56
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

Hola RokuMetal, he estado aprendiendo css y jquery para hacer la barra, finalmente hice una barra en css y me funciona bien en mi computador, pero tengo un problema.

La barra será utilizada en varios sub-dominios, por lo que hice una carpeta en "public" llamada "archivos" y dentro puse el archivo css de la barra llamado "estilobarraprincipal.css". La barra la he puesto en el header y en el footer y sigue sin funcionar.

Para enlazar la barra, al <div class="barra-header">, escribo lo siguiente

<link type="text/css" rel="stylesheet" href="archivos/estilobarraprincipal.css">

o tambien

<link type="text/css" rel="stylesheet" href="www.midominio.com/archivos/estilobarraprincipal.css">

He puesto esto dentro del <div class="barra-header"> y fuera de él, lo he puesto dentro y tambien el <head>, arriba y abajo de <meta... etc>, arriba y abajo de <title... etc>

El <div class="barra-header"> esta compuesto por lo siguiente:

<div class="barra-header">
<div>la div que contiene el menu
<ul>
<li>las listas del menu</li>
</ul>

</div>

</div>

En mi pc se ve y funciona muy bien, pero es en el momento de insertarlo en el sitio web donde tengo problemas ¿Que crees que estoy haciendo mal?

Jokerobscuro.
  #9 (permalink)  
Antiguo 06/03/2013, 18:21
 
Fecha de Ingreso: enero-2013
Mensajes: 29
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: a muchos nos sirve - barra similar a wibiya

Intenta importar el estilo CSS con el siguiente código:


<STYLE TYPE="text/css" MEDIA="all">
<!--
@import url(http://www.htmlhelp.com/style.css);
-->
</STYLE>

Prueba con ese, si no funciona pues duplica el archivo css en los otros subdominios.

Última edición por RokuMetal; 06/03/2013 a las 18:26
  #10 (permalink)  
Antiguo 09/03/2013, 00:07
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

Hola Rokumetal, gracias a ti esta casi todo resuelto, la barra me funciona bastante bien, salvo por un pequeño detalle... Por alguna razon no queda sobre todo, es decir, al parecer algunas capas dentro de los temas de wordpress son mas relevantes que la capa de la barra y al bajar se pierde entre los botones y banners cuando bajo.

Como hago para que quede sobre todo lo demas, probe moverla desde el footer al index y luego al header, pero no funciono ¿Sabes como solucionar el problema?

****

Respecto a los problemas de importacion del archivo css desde otra carpeta, descubri que el problema lo ocasionaba un plugin de chat, una vez que lo saque, pude instalar la barra sin problemas...

Jokerobscuro.
  #11 (permalink)  
Antiguo 09/03/2013, 00:18
 
Fecha de Ingreso: enero-2013
Mensajes: 29
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: a muchos nos sirve - barra similar a wibiya

Ya veo, que bien que se solucionó tu problema de la importación.

Ahora, para que la barra salga encima de todos los objetos de tu web tienes que agregar un atributo a tu div principal de la barra, o sea:

<div class="barra-footer"></div>

A esa clase llamada "barra-footer" le agregas:

z-index: 99999;

Lo que hace ese atributo es definir que capas estarán encima o debajo de otras, obviamente, le estas metiendo un valor tremendo, "99999", con eso solucionas tu problema.

Avisame que onda, aquí ando.
  #12 (permalink)  
Antiguo 09/03/2013, 00:29
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

Funciono perfecto, gracias Rokumetal, creo que ya se puede dar por terminado el tema :).

De todas maneras lo guardare en favoritos porque no creo que sea la unica barra que haga... espero que sigamos en contacto

Jokerobscuro.
  #13 (permalink)  
Antiguo 09/03/2013, 00:33
 
Fecha de Ingreso: enero-2013
Mensajes: 29
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: a muchos nos sirve - barra similar a wibiya

Que bien que ya quedó!!

Ahora si lo único que has agregado es puro HTML en la barra, trata de poner código PHP dentro de la barra para implementar un cuadro de inicio de sesión u otra cosa que se te ocurra.

Nos vemos pronto, y acá seguimos!
  #14 (permalink)  
Antiguo 09/03/2013, 00:35
 
Fecha de Ingreso: febrero-2008
Mensajes: 101
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: a muchos nos sirve - barra similar a wibiya

En PHP me metere pronto, pero necesitaba sacar la barra lo antes posible porque tengo que terminar la pagina... pero esta entre mis planes inmediatos... aprender mas sobre programacion, el tema me parece interesante pero siempre me faltaba tiempo...

Ahora se que sabiendo hacer las cosas me demoro mucho menos en terminarlas...

nos vemos pronto... eso es seguro c:

Jokerobscuro.

Etiquetas: barra, similar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 09:17.