Soporte » Diseño – Temas y plantillas » Hacer que no aplique un estilo CSS a una imagen en concreto.

  • Resuelto El Tio Rufi

    (@eltiorufi)


    El caso es que tengo un CSS para que todas las imágenes que incluyo en el post, le ponga un marco y una sombra.

    He instalado el plugin para poner botones sociales «Social Sharing Toolkit», y a uno de los botones, le aplica ese estilo CSS, ya que es una imagen que está en el servidor.

    Me gustaría saber como hacer para que no se lo aplique, o en su defecto como tengo que cambiar el otro para que no le afecte.

    Este es el código que tengo para el marco de las imágenes. Lo que hace es ponerselo a todas las imágenes.

    .post img {
    padding: 5px;
    background: #a7ce59 !important;
    border: 1px solid #77b900 !important;
    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
    }

    He intentado modificar el otro para que no tenga borde, pero no lo consigo,algo se me escapa.

    Un Saludo y gracias.

    Este el blog donde lo tengo instalado haciendo pruebas: http://rufi.nosolowindows.com.

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Saludos ElTioRufi.

    La causa de tu problema radica en !important. Como sabrás el código CSS es leido de arriba hacia abajo. Si tienes dos propiedades iguales, digamos:

    20 #head {color:red}
    21  .
    22  .
    23  .
    24 #head {color:blue}

    El color que tomará la id head será blue por ser este el último valor. La última regla declarada sobreescribe a la anterior. Ese es el comportamiento normal de CSS. !important, nos rompe esa regla. Si al primer #head le colocamos importante (!important) entonces nuestra id tomará el color red aún teniendo una regla que le pudiera sobreescribir.

    Colocando la regla:

    .mr_social_sharing img {
       padding: 0;
       background: none !important;
       border: none !important;
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       box-shadow: none;
    }

    Como no se el motivo por el cuál has colocado !important en el background y el border no te sujeriré que se lo elimines, aunque si estas seguro de que no son necesarios te sería mejor quitarlos. Si los eliminas de .post img no tendrás necesidad de tenerlos en .mr_social_sharing img. Eso si,debes colocar el nuevo código por debajo de tu .post img.

    Espero esto te sirva y me disculpo sinceramente si mi redacción no es muy clara del todo. Son más los días que mis dedos estan peleados con mi cerebro que lo contrario. Avisanos como te va.

    Iniciador del debate El Tio Rufi

    (@eltiorufi)

    Saludos!!

    El código que tenía insertado lo cogí de una web que te explicaba como hacer lo del tema de los marcos.

    La verdad que aunque trasteo algo con el CSS soy bastante novato. Desconocía lo de la etiqueta Important y el orden del CSS.

    Así que solo me queda darte las gracias de todo corazón. No solo me has ayudado si no que además he aprendido dos cosas nuevas.

    Una vez más, gracias de nuevo!!

    Un Saludo.

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • El debate ‘Hacer que no aplique un estilo CSS a una imagen en concreto.’ está cerrado a nuevas respuestas.