Avatar Image
Machacateclados
Machacateclados

Bueno gente, esta es mi pregunta, el desarrollador de esta pagina:

http://bluetrigger.com.ar

me la paso, y vi algo que me serviria, se trata de que justamente en su inicio, al pasar el cursor por las distintas boxs, estas se iluminan.

Se puede lograr de alguna forma en mi foro?

Gracias.

Avatar Image
@man / @woman
@man / @woman
Escrito originalmente por GM-Dero

el desarrollador de esta pagina:

me la paso, y vi algo que me serviria,  

Pues preguntale a el por el código fuente.

Avatar Image
@man / @woman
@man / @woman

Esto es fácil de lograr, pero requiere de algún trabajo que puede resultar tedioso.

Lo logras con puro estilos (CSS), y puede ser incluido en algun bloque del foro como tal; o bien con JavaScript (CSS sería lo ideal); ejemplo, con esto:

<style type='text/css'>
.tabla_texto_1:hover{background-color:#ffffcc;}
</style>

cambiarías el fondo de la mitad de los posts de un hilo cuando pases el mouse por arriba.
PD: es un ejemplo, espero no uses ese color...

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

[...]

<style type='text/css'>

.tabla_texto_1:hover{background-color:#ffffcc;}
</style>

cambiarías el fondo de la mitad de los posts de un hilo cuando pases el mouse por arriba.
PD: es un ejemplo, espero no uses ese color...

[...]

No entendi esto

Avatar Image
Moderador del foro
Moderador del foro

Lo puedes hacer ocmo dice Gestion (con el código CSS que te ha dado) o con esto:

http://soporte.miarroba.es/900272/8[....]rear-las-celdas-al-pasar-el-cursor/

Avatar Image
Machacateclados
Machacateclados
Cita

Lo puedes hacer ocmo dice Gestion (con el código CSS que te ha dado) o con esto:

http://soporte.miarroba.es/900272/8[....]rear-las-celdas-al-pasar-el-cursor/

Josepe, si ese tema lo vi, pero no lo etendi, ahora que me lo pasaste vos lo volvi a leer, no entendi algunas cosas y le envie un MP, en resumen fue esto:

Cita:

Tengo pensado instalarlo, tengo  el jQuery subido a el espacio web por que pensaba hacer algo que no hice con el.

Ademas de eso, mas abajo, lei esto:

Cita:

Los códigos del MOD pueden ser pegados donde se desee, siempre y cuando estén por debajo del fichero jQuery. Se recomienda, para una carga más rápida, agrupar siempre los códigos javascript en un único fichero y alojarlo en el espacio web. Lo mismo para todos los estilos CSS.

Se como subir cada codigo en el espacio, en txt y esas cosas. Pero lo que no vi en el codigo no se encuentra nada (ademas de que no se ponerlo) como para linkear esos TXT.

Te mande el MP por que ese tema ya estaba inactivo, espero no molestarte.

Y el me respondio esto:

Cita:

No tengo mucho tiempo, pero te contesto rápido.

Sobre el menú es mejor que preguntes en el foro. Josepepe te ayudará seguro. Por otra parte, jQuery ya viene por defecto en todos los foros. Así que bastaría que reemplazaras los $( por jQuery( y no hace falta más código. Y así lo puedes poner directamente dentro de <script>. Más dudas, como digo, al foro. Si puedo la responderé yo aunque en los próximos 10 días será difícil verme.

No se si vos podrias darme una mano con respecto a mis dudas sobre la instalacion, me aria de gran ayuda.

Avatar Image
Moderador del foro
Moderador del foro

No hay problema. Lo primero, incluyes esto en la cabecera HTML de tu foro:

<script type="text/javascript">
 function color(el,tt){
     if(jQuery(el).hasClass('tabla_texto_3')==true){
         jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_'+tt);
     }else{
         jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_3');
     }
 }
jQuery(document).ready(function(){
     jQuery('tr.tabla_texto_1').hover(
      function(){ color(this,1); },
      function(){ color(this,1); }
      );

     jQuery('tr.tabla_texto_2').hover(
      function(){ color(this,2); },
      function(){ color(this,2); }
  );

}
</script>

 De este código no tienes que tocar nada.

Por otra parte incluyes los estilos (si estás utilizando algún fichero css mételo ahí sin las etiquetas <style> y </style>, sino, lo pones al principio de la cabcera HTML tal cual te lo doy):

<style type="text/css">
.tabla_texto_3{
 font-family: verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 background: #F6F5F0;
 color: #000000;
 border-top: 1px solid #FBFAF6;
 border-left: 1px solid #FBFAF6;
 border-right: 1px solid #E5E4DB;
 border-bottom: 1px solid #E5E4DB;
}

.tabla_texto_3 a, .tabla_texto_3 a:visited, .tabla_texto_3 a:hover{
 text-decoration:none;
 color: #707E33;
}
 </style>

Esto es para definir el estilo que adquirirá la celda al pasar el cursor. Puedes leer algún manual básico de CSS para sacarle más provecho a todas sus propiedades.

¿Alguna duda?

Avatar Image
Machacateclados
Machacateclados
<script type="text/javascript">
 function color(el,tt){
     if(jQuery(el).hasClass('tabla_texto_3')==true){
         jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_'+tt);
     }else{
         jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_3');
     }
 }
jQuery(document).ready(function(){
     jQuery('tr.tabla_texto_1').hover(
      function(){ color(this,1); },
      function(){ color(this,1); }
      );

     jQuery('tr.tabla_texto_2').hover(
      function(){ color(this,2); },
      function(){ color(this,2); }
  );

}
</script>

 De este código no tienes que tocar nada.

Por otra parte incluyes los estilos (si estás utilizando algún fichero css mételo ahí sin las etiquetas <style> y </style>, sino, lo pones al principio de la cabcera HTML tal cual te lo doy):

<style type="text/css">
.tabla_texto_3{
 font-family: verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 background: #F6F5F0;
 color: #000000;
 border-top: 1px solid #FBFAF6;
 border-left: 1px solid #FBFAF6;
 border-right: 1px solid #E5E4DB;
 border-bottom: 1px solid #E5E4DB;
}

.tabla_texto_3 a, .tabla_texto_3 a:visited, .tabla_texto_3 a:hover{
 text-decoration:none;
 color: #707E33;
}
 </style>

Esto es para definir el estilo que adquirirá la celda al pasar el cursor. Puedes leer algún manual básico de CSS para sacarle más provecho a todas sus propiedades.

¿Alguna duda?

Solo una. He leido que si se sube el CSS aparte en un fichero y se lo pone en el espacio web y tan solo linkeandolo en el HTML el tiempo de la carga disminuye.

Como podria lograr eso? Entendi como instalarlo y todo bien, se como editar ese CSS si me pongo a verlo un rato, puedo poner hasta imagenes ademas de los colores de la fuente en las variantes como "hover".

Como puedo hacer para linkealo?

Avatar Image
Moderador del foro
Moderador del foro

Creas un fichero .css (pe: main.css), lo abres para editarlo y pones todos los códigos CSS (SIN las etiquetas <style type="text/css"></style>).

Lo subes al espacio web de tu foro y al principio del HTML de tu página llamas al fichero así:

<link rel="StyleSheet" href="url_fichero_css" type="text/css" />
Avatar Image
Machacateclados
Machacateclados

No funciona, hice lo siguiente, me dicen que esta mal?

<script type="text/javascript">
function color(el,tt){
    if(jQuery(el).hasClass('tabla_texto_3')==true){
        jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_'+tt);
    }else{
        jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_3');
    }
}
jQuery(document).ready(function(){
    jQuery('tr.tabla_texto_1').hover(
      function(){ color(this,1); },
      function(){ color(this,1); }
      );    jQuery('tr.tabla_texto_2').hover(
      function(){ color(this,2); },
      function(){ color(this,2); }
  );}<link rel="StyleSheet" href="https://espacioforos.miarroba.st/1530543/archivos_web/boxs.css" type="text/css" /></script>

Y el link de a lo ultimo lleva a aca:

https://espacioforos.miarroba.st/1530543/archivos_web/boxs.css

Avatar Image
Moderador del foro
Moderador del foro

La etiqueta link sácala del script. Es decir, que quede:

<link />
<script>
    //Codigo
</script>
Avatar Image
Machacateclados
Machacateclados
<link />
<script>
    //Codigo
</script>

Lo hice asi y todavia no funciona. Anoche use tu panel de creacion de skins para reacer el mio por unos problemas ademas de orden.

Ahora no puedo centrar los banners y ademas esto no anda.

Podria tener algo que ver?

Esto es el codigo de mi pagina:

Cabecera HTML:

<link rel="StyleSheet" href="https://espacioforos.miarroba.st/1530543/archivos_web/boxs.css" type="text/css" /><script type="text/javascript">
function color(el,tt){
    if(jQuery(el).hasClass('tabla_texto_3')==true){
        jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_'+tt);
    }else{
        jQuery(el).removeClass(); jQuery(el).addClass('tabla_texto_3');
    }
}
jQuery(document).ready(function(){
    jQuery('tr.tabla_texto_1').hover(
      function(){ color(this,1); },
      function(){ color(this,1); }
      );    jQuery('tr.tabla_texto_2').hover(
      function(){ color(this,2); },
      function(){ color(this,2); }
);
}</script><style type="text/css">.communityHeader{
background:URL('http://www.imagengratis.org/images/levelxlogov4.png') top center no-repeat;
height: 150px;
width: 965px;
}body{background:#000000 url('http://www.imagengratis.org/images/1de27f7a5.jpg') top center no-repeat; 
font-family:trebuchet ms; 
font-size:14px; 
color:#ffffff;
}body a{color:#008000;
} body a:hover{color:#00FF00;
} .tabla TD{border:2px solid #808080;
padding:3; 
margin:2;
} .tabla_titulo{background:#386898 url('http://www.imagengratis.org/images/879c203ebgn4tg.png') top left repeat; 
font-family:verdana; 
font-size:12px; 
font-weight:bold; 
font-style:normal; 
color:#FFFFFF; 
text-shadow:#000000 1px 1px 0px;
filter:DropShadow(Color=#000000 , OffX=1, OffY=1); 
text-align:center;
} .tabla_categorias{background:#3F3F3F url('') top left repeat; 
font-family:verdana; 
font-size:14px; 
font-weight:bold; 
font-style:normal; 
color:#FFFFFF; 
text-shadow:#000000 1px 1px 0px;filter:DropShadow(Color=#000000 , OffX=1, OffY=1); 
text-align:left;
} .tabla_texto_1{background:#FFFFFF url('http://www.imagengratis.org/images/0f9bcccec.png') center center repeat; 
color:#ffffff; 
text-shadow:none;
filter:none;
} .tabla_texto_1 a{color:#008000;
} .tabla_texto_1 a:hover{color:#00FF00;
} .tabla_texto_2{background:#EFEFEF url('http://www.imagengratis.org/images/0f9bcccec.png') center center repeat; 
color:#ffffff; 
text-shadow:none;
filter:none;
} .tabla_texto_2 a{color:#008000;
} .tabla_texto_2 a:hover{color:#00FF00;
} .tabla_texto_1, .tabla_texto_2{font-family:verdana; 
font-size:14px; 
font-weight:normal; 
font-style:normal;
} .tabla_texto_1 a:hover, .tabla_texto_2 a:hover{text-decoration:blink;
} div.mia_bloque{border:1px solid #AAA7BF;
background-color:505050;
} div.mia_bloque div.mia_bloque{background-color:707070;
} div.mia_bloque div.mia_bloque div.mia_bloque{background-color:909090;
} .tabla_input{border:1px inset #ffffff; 
background:#FFFFFF url('') top left repeat; 
font-family:verdana; 
font-size:12px; 
font-weight:normal; 
font-style:normal; 
color:#000000; 
text-shadow:none;
filter:none; 
padding:5px; 
} .tabla_boton{border:1px solid #33FF00; 
background:#000000 url('http://i764.photobucket.com/albums/xx282/DeroXDDD/boton_load.png') top left repeat; 
font-family:verdana; 
font-size:12px; 
font-weight:bold; 
font-style:normal; 
color:#FFFFFF; 
text-shadow:#000000 1px 1px 0px;filter:DropShadow(Color=#000000 , OffX=1, OffY=1); 
padding:5px; 
border-radius:4px;
-ms-border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
}.adjunto_thumbnail, .foto_thumbnail{border:2px solid #808080;
}.communityBody {
background:URL('http://www.imagengratis.org/images/08c85d406oj4qo.png') center center repeat-y;
text-align:center;
height: auto;
}</style>
    <div class="communityBody">
    <div class="communityContainer">
    <div class="communityHeader">    
    </div>

Pie HTML:

</div>
</div>
</div>

Los banners de todas las categorias (Tengo 2 categorias con diseño diferente y distinto banner) tampoco logro centrarlos, quedan a la izquierda. Y los boxs no interfieren en nada, ya esta comprobado.

Avatar Image
Moderador del foro
Moderador del foro

Pues parece que hay algún error en el código, así que hasta que EffectedCard no lo pueda revisar quita ese JS, y cambia en el CSS donde diga .tabla_texto_3 por .tabla_texto_1:hover, .tabla_texto_2:hover

De esta forma obtendrás el mismo efecto solo con CSS (como te dijo GestionXls).

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por Josepepe033

Pues parece que hay algún error en el código, así que hasta que EffectedCard no lo pueda revisar quita ese JS, y cambia en el CSS donde diga .tabla_texto_3 por .tabla_texto_1:hover, .tabla_texto_2:hover

De esta forma obtendrás el mismo efecto solo con CSS (como te dijo GestionXls).

Ya saque el codigo pero como puedo solucionar lo de mis banners? Este problema salio previo a lo del codigo de EffectedCard.

Fue cuando hice el codigo de nuevo.

Avatar Image
Colega ;)
Colega ;)

El problema de usar :hover en celdas td es que no es compatible para todos los navegadores.

De todas formas, ese código en jQuery no cuesta nada de programar. A principios de Diciembre, si me lo recuerdas por privado, puedo crearte un código para ello.

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por EffectedCard

El problema de usar :hover en celdas td es que no es compatible para todos los navegadores.

De todas formas, ese código en jQuery no cuesta nada de programar. A principios de Diciembre, si me lo recuerdas por privado, puedo crearte un código para ello.

Gracias Effected, voy a recordartelo =D

Con respecto a los errores del diseño, pude arreglarlos solo =D

Use algunas cosas que aprendi aca con algo de HTML q sabia. quedo bien. Solo que ahora estaba creando una "barra de tareas" en la web por asi decirlo, basada en la de mi iPad y me surgio un problema XD

Se encuentra en el foro de HTML Avanzado si quieren verlo.

Gracias por la ayuda =D

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Opciones:
Ir al subforo:
Permisos:
TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes
Temas similares
No se han encontrado temas similares