CSS cambiar color del enlace cuando se selecciona otro….

Diseño y Posicionamiento Web con Joomla Foros General Joomla en General CSS cambiar color del enlace cuando se selecciona otro….

Mostrando 12 respuestas a los debates
  • Autor
    Entradas
    • #80088
      DimarDimarR
      Participante

      En mi plantilla tengo este trozo de codigo:

      body.blue a:visited {
      color: #4581BC;
      font-weight: bold;
      }
      body.blue a:hover { color: #ffffff; }

      Ahora bien,

      Esta linea: body.blue a:link: Es el que llama al link.
      y este color: #4581BC; su color.

      Esta linea: body.blue a:visited {: Es el que llama al link pero cuando YA FUE 🙁 visitado
      y este color: #990000; su color.

      y este: body.blue a:hover { color: #ffffff; }: Es el que cambia cuando el puntero del mouse se coloca encima del enlace.

      Ahora bien, segun ese codigo, que sintaxis tengo que utilizar, para que:

      Esta accion: body.blue a:visited {: que llama al link pero cuando YA FUE 🙁 visitado, No se quede con el mismo color cuando se selecciona otro enlace?? :dry:

      Exitos!!! 😉

    • #80101
      daggetkim
      Participante

      Quita el valor de a:visited por a:active eso hará que solo el activo cambie de color.

    • #80102
      DimarDimarR
      Participante

      jejejeejeeje vengaaa!!! gracias Dagget!!

      Exitos!! 😉

    • #80117
      DimarDimarR
      Participante

      Hola dagget mmmmmmm cuando te respondi el otro post y me propuse a utilizar la variante que me dijiste, no me funciono, despues desidi revisar eso con mas calma y no encuentre manera de que haga lo que quiero. Con esa variante, aun siguen quedando los enlaces como ya visitados pero ahora con el color morado, color que no esta pre configurado en el archivo .CSS sino que es el color estandar del navegador cuando un enlace a sido visitado.

      Para que no quede duda de que pudiera hacer algo mal, explico lo que hago:

      body.blue a:link, body.blue a:actived {
      color: #4581BC;
      font-weight: bold;
      }
      body.blue a:hover { color: #ffffff; }

      No hace ni falta decir que fue lo que hice jejejejejeeje

      Me interesa lograr hacer esto, ya que la pagina tendra muchos enlaces en el menu (sub menu), entonces el Usuario al darle a un enlace y leer el articulo o ver lo que desea, y luego que termina le quiere dar al que le sigue, se perdera, porque no sabrá donde le dio antes.

      Alguna otra idea, otra variante¡? :dry:

      Exitos!!! 😉

    • #80121
      daggetkim
      Participante

      No sera que al tratarse de un menú esta definido en la plantilla algo como:

      .moduletable_menu a:visited {
      color: “morado”;
      }

      ¿y por eso sale el morado ese que dices?

      Piensa que el valor obtenido del css sera el último que lea y normalmente en los templates primero se definen los tags del layout y luego los estilos propios de joomla.

    • #80122
      DimarDimarR
      Participante

      Que va no doy aun con la solución. Revise eso que dices dagget y nada, busque variantes parecidas a las que comentas y no aparece nada.

      Sucede que el menu que utilizo es una extension de Sistema de Menu desplegable, crei que con solo la variante a:active me daria resultado, pero nada, se lo e aplicado a la plantilla, y me coloca los enlaces morados, si se lo aplico al componente y su respectivo archivo CSS no pasa nada, es como si no leyera la variante.

      E eliminado por aqui puesto por alla y no doy :dry:

      Seguiré intentando. Si hay alguna otra posible solución, comentais por va!!!

      Exitos!!

    • #80182
      daggetkim
      Participante

      No se, pega la parte del css que hace referencia al menú aquí a ver si damos con una solución.

    • #80183
      DimarDimarR
      Participante

      Gracias dagget

      Bueno te explico que tengo:

      en la plantilla tengo este troso de codigo, los selecciono por numeros porque son independientes:

      1ro.

      a:link , a:visited {
      color: #CCE7FF;
      font-weight: bold;
      }

      a:hover {
      color: #CCE7FF;
      }

      2.do

      body.green a:link, body.green a:visited {
      color: #B4DCFF;
      font-weight: bold;
      }
      body.green a:hover { color: #ffffff; }

      3ro.
      body.pink a:link, body.pink a:visited {
      color: #B4DCFF;
      font-weight: bold;
      }
      body.pink a:hover { color: #ffffff; }

      4to.
      body.orange a:link, body.orange a:visited {
      color: #B4DCFF;
      font-weight: bold;
      }
      body.orange a:hover { color: #ffffff; }

      5to.
      body.blue a:link, body.blue a:visited {
      color: #B4DCFF;
      font-weight: bold;
      }
      body.blue a:hover { color: #ffffff; }

      Cada uno de ellos funciona independiente, el primero es el por default y es cuando se entra al index, los demas son secciones diferentes, que poseen un color diferente en general sobre la plantilla (sobre el color del titulo del modulo), y para que el Modulo que utilizo como Menu Desplegable tenga el mismo aspecto cuando se entra a cada seccion, tengo que configurar los 5 iguales.

      Ahora bien, el modulo que utilizo como menu desplegable, tiene este codigo, en el unico archivo CSS que posee:

      @charset “utf-8”;
      /* CSS Document mod_praiseshow*/

      div.menuContainer
      {
      background-color: #182d43;
      padding: 0px;
      margin: 0px;
      border-top: 1px solid #182d43;
      border-bottom: 1px solid #182d43;
      border-right: 1px solid #182d43;
      border-left: 1px solid #182d43;
      opacity: 0;
      filter: alpha(opacity = 0);
      }

      /*Borde superior*/
      div.horizontalMenuContainer, div.verticalMenuContainer, div.sub-horizontalMenuContainer, div.sub-verticalMenuContainer, div.sub-singleMenuContainer
      {
      background-color: #416C95;
      position: absolute;
      left: 0px;
      top: 0px;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
      opacity: 0;
      filter: alpha(opacity = 0);
      z-index: 100;
      }

      ul.horizontalMenuContainer, ul.verticalMenuContainer, ul.singleMenuContainer
      {
      margin: 0px;
      padding: 0px;
      list-style: none;
      overflow: hidden;
      }

      ul.horizontalMenuContainer
      {
      border-left: 1px solid #CCC;
      border-bottom: 1px solid #CCC;
      border-top: 1px solid #CCC;
      border-right: 1px solid #FFF;
      }

      /*Borde interno de los lados Izquierdo, derecho e inferior*/
      ul.verticalMenuContainer
      {
      border-left: 1px solid #182d43;
      border-right: 1px solid #182d43;
      border-bottom: 1px solid #182d43;
      }

      ul.singleMenuContainer
      {
      border-left: 1px solid #CCC;
      border-right: 1px solid #CCC;
      border-top: 1px solid #CCC;
      border-bottom: 1px solid #CCC;
      float: left;
      }

      ul.singleMenuContainer ul.singleMenuContainer
      {
      border: 0px;
      }

      #menuContainer li.horizontalMenuItem
      {
      float: left;
      }

      #menuContainer li.verticalMenuItem
      {
      float: none;
      display: block;
      clear: both;
      }

      #menuContainer li.singleMenuItem
      {
      font-weight: bold;
      display: inline;
      float: left;
      }

      #menuContainer li.singleMenuItem li.singleMenuItem
      {
      font-weight: normal;
      display: block;
      clear: both;
      }

      a.horizontalMenuItemText, a.verticalMenuItemText, a.singleMenuItemText
      {
      /* We need the background color here for IE7. If not, the links do not fill horizontally and MouseOver fires */
      background-color: #1E3752;
      margin: 0px;
      padding: 3px;
      text-decoration: none;
      display: block;
      font-variant: small-caps;
      }

      a.horizontalMenuItemText
      {
      border-right: 1px solid #CCC;
      border-left: 1px solid #FFF;
      }

      a.verticalMenuItemText
      {
      border-bottom: 1px solid #182d43;
      border-top: 0px solid #182d43;
      }

      a.singleMenuItemText
      {
      }

      Llegue a cambiar las 5 lineas de codigo que coloque al principio y las pegue en la del Modulo de menu desplegable, y con la sintaxis a:active
      e igual me sucede lo mismo del morado en los enlaces.

      A ver si se puede hacer algo.

      Gracias por tu ayuda!!!

      Exitos!!!!

    • #80184
      daggetkim
      Participante

      Es raro, o no lo se ver o aquí no hay un color morado en ningún sitio…si el sitio esta en producción ¿podría verlo “in situ”?

      De todas formas hay una orden en css que quizás te ayude…prueba a poner al final de tu hoja de estilos:

      a:visited {
      color: “color_deseado” !important;
      }

      donde “color_deseado” es el valor hexadecimal que se corresponda al color que desees en el a:visited.

      La cláusula !important marca la regla que le antecede como la única importante a tener en cuenta, en principio no sería necesario que estuviese al final de la plantilla pero de esta forma además nos aseguramos que sea la última orden que recibe el template para a:visited.

    • #80187
      DimarDimarR
      Participante

      La estoy realizando en local. :dry:

      Sobre lo que me dices, fijate ahora lo que pasa. si utilizo:

      a:visited {
      color: “ROJO” !important;
      }

      Todos los enlaces me los coloca del color ROJO, segun valla visitando enlaces, los va colocando de ese color.

      Si utilizo:

      a:active {
      color: “ROJO” !important;
      }

      Pasa lo siguente: Al darle al enlace un click, se pone rojo solo cuando le hago clic (como un parpadeo) luego vuelve a su estado normal del enlace. Si lo selecciono y lo arrastro como si lo fuera a llevar a otra parte, hay si se queda del color rojo, pero si le doy clic no. Que absurdo :huh:

      Voy a montar la pagina como esta actualmente para que logres fijarte mejor, y puedas ayudarme, y gracias por el interes en ayudarme.

      Exitos!!!

    • #80214
      DimarDimarR
      Participante

      Una pregunta:

      Como saber si un archivo JavaScript esta embebecido para cambiar las hojas de estilo CSS. (nose si esta bien formulada la pregunta)

      Yo nunca me e metido en el tema de los archivos o codigo embebecido. Desconozco :S e estado buscando info por google, pero no hay un tema certero que me aclare el tema ó estoy buscando mal.

      Exitos!!! 😉

    • #80218
      daggetkim
      Participante

      Tanto en php como en javascript se puede emebeber estilo css dentro del código…

      Imagina que tienes que hacer que una posición modular tenga una medida de 350px si no existe un módulo cargado a su derecha y en caso contrario ocupar la posición midiendo 700px.

      Con php podrías hacer algo asi:

      <div id="user1" countModules(‘user4’) && $this->countModules(‘user1’)) { echo “style=’width: 345px;”; } else { echo “style=’width: 700px;'”; } ?>>

      ya de esta forma no aparece un width en la hoja de estilos.

      Algunas veces algún módulo o plugin hace lo propio con el código javascript, he buscado un ejemplo con el que me encontré pero ya no recuerdo que extensión fue, de hecho con javascript se puede definir una clase y su comportamiento sin pasar por el css.

      tags.H1.color = “green”;
      tags.P.fontSize = 10;
      tags.P.marginLeft = 20;

    • #80219
      DimarDimarR
      Participante

      A ver si entendi para que es la “funcion” embebecer (si se puede decir de alguna manera).

      Si yo tengo un estilo en un archivo CSS de un modulo de 350px de ancho, el cual se mantiene de ese diámetro a pensar de que tiene espacio a los lados, si yo agarro el archivo .php que llama a ese modulo, y al embebecerlo con el codigo apropiado a 700px (como el tuyo me imaguino) entonces este modulo se apliara aun mas, HASTA LLEGAR AL PROXIMO o hasta que llegue a la medida colocada en este caso 700px?? y ya no agarraria el estilo del archivo CSS sino del .PHP??

      Disculpa, es un tema que nunca le tuve interes en aprender, hasta ahora. 🙂

      Gracias por la leccion, muy apreciada.

Mostrando 12 respuestas a los debates
  • Debes estar registrado para responder a este debate.
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad