Cambiar fondo de sección en una entrada específica

EspErpENto Seguir

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
En realidad no es a la entrada en su totalidad.

Me gustaría saber como puedo colocar un marco con otro fondo para una parte de la entrada, vamos a suponer que la entrada es esta:


El portugués Cristiano Ronaldo, los franceses Raphael Varane y Karim Benzema y el argentino Ángel Di María se quedaron al margen de la vuelta a los entrenamientos de la plantilla del Real Madrid tras el choque amistoso disputado el sábado contra el Fiorentina en Varsovia.

El conjunto de Carlo Ancelotti enfila ya la preparación para la Supercopa de España que va a disputar los próximos martes y viernes contra el Atlético Madrid.

El plantel saltó al césped de la Ciudad Real Madrid de Valdebebas incluido el centrocampista Isco Alarcón, que fue padre hace unas horas y que fue felicitado por el resto de sus compañeros y el cuerpo técnico.

El malagueño no viajó ayer a Varsovia para disputar el último encuentro amistoso de su equipo debido al inminente nacimiento de su hijo. Ya está a disposición del preparador italiano.

Ancelotti contó con 18 jugadores sobre el terreno de juego del recinto para preparar ya los compromisos oficiales. Cristiano Ronaldo, Varane, Benzema y Di María se quedaron, igual que Jesé Rodríguez, en el interior de las instalaciones.

Los futbolistas de campo efectuaron los habituales ejercicios de calentamiento, con carrera continua y estiramientos. Después se emplearon con el balón, con trabajo de conducción y pase.

Por otra parte, los metas Iker Casillas, Keylor Navas y Pacheco se ejercitaron con el entrenador de porteros, Villiam Vecchi.


El Real Madrid volverá a los entrenamientos mañana, lunes, abierto los primeros quince minutos. Será la sesión previa al encuentro de ida de la Supercopa, que se jugará el martes en el estadio Santiago Bernabeu a partir de las 23.00 horas. La vuelta se disputará el próximo viernes, a las 22.30 en el estadio Vicente Calderón.


Entonces, me gustaría que el fondo de las letras de color rojo fueran de un color distinto al blanco, pero que las letras siguieran teniendo el mismo color que el resto de las entradas.

No se si se logra entender, tal vez con una imagen, por aquello de los mil ojos valen más que una palabra:

Marco imagen.jpg

Lo que me gustaría poder hacer es colocar esa parte de la entrada con un fondo oscuro, no se que color es, donde dice: si te ha gustado este post bla, bla,bla

No hagan la de Golum y ayúdenme.:sorrow:
 

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
Encierra todo ese texto en el div:

<div id='agregar_fondo'>
AQUI EL CONTENIDO
</div>

CSS

Insertar CODE, HTML o PHP:
#agregar_fondo{
background: #83848D;
border: 2px solid #333;
padding: 12px 10px;
color: #FFF;
}
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
Encierra todo ese texto en el div:

<div id='agregar_fondo'>
AQUI EL CONTENIDO
</div>

CSS

Insertar CODE, HTML o PHP:
#agregar_fondo{
background: #83848D;
border: 2px solid #333;
padding: 12px 10px;
color: #FFF;
}

Ya casi lo hemos logrado.:encouragement:

Pero ¿donde pego ese trozo de código?

El footer, el header, ectétera.
 

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
Ya casi lo hemos logrado.:encouragement:

Pero ¿donde pego ese trozo de código?

El footer, el header, ectétera.

Si es solo para un entrada, ahí mismo, abajo de todo

HTML:
<style type="text/css">
#agregar_fondo{
background: #83848D;
border: 2px solid #333;
padding: 12px 10px;
color: #FFF;
}
</style>
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
Encierra todo ese texto en el div:

<div id='agregar_fondo'>
AQUI EL CONTENIDO
</div>

CSS

Insertar CODE, HTML o PHP:
#agregar_fondo{
background: #83848D;
border: 2px solid #333;
padding: 12px 10px;
color: #FFF;
}

Veo que hay dos partes, entonces, debo colocar las dos partes en la entrada, solo se trata de casos puntuales, es decir, la mayoría de las entradas van normalmente.

Porque también veo algo de CSS y no me aclaro.:p7:
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
el código css que te ha dado ponlo en la hoja de estilos de tu sitio.

el div es para encerrar loq ue quieres que cambie de color.

mira como queda Link de muestra - JSFiddle

Oído cocina!!!!

- - - Actualizado - - -
[MENTION=39954]memoadian[/MENTION], [MENTION=81006]kanikase[/MENTION]

Funciona!!!!

Pero cambió el color de las palabras, es decir, mientras el resto de las palabras tienen color negro, la parte que he resaltado con el código, tiene las palabras en blanco.

¿Cómo se puede mantener el mismo color para ambas partes de la entrada?, es decir, la resaltada y la normal.

Gracias.
 

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
de los estilos elimina color: #FFF;
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
de los estilos elimina color: #FFF;


jajajajjajajjajajjajjajaajjajajajaajajaja, ya vas a entender porque me río.

Lo siento por darte tanta molestia, pero rizando el rizo:

Si quisiera dos resaltados, es decir dos colores distintos de fondo, un como el que me has dado y otro con fondo rojo, por ejemplo, ¿qué debo hacer?

Gracias nuevamente.
 

memoadian

Épsilon
Programador
Verificación en dos pasos activada
Desde
8 Feb 2013
Mensajes
940
creo que requieres unas clases de css :fatigue:

solo hace falta copiar el código, yo preferiría usar una clase

HTML:
.fondo_naranja{
background: #83848D; //este es el color de fondo en código hexadecimal
border: 2px solid #333; //este es el ancho y color del borde
padding: 12px 10px; //este es el espacio entre el borde del div y su contenido
color: #FFF; //este es el color del texto del div
}
el color del naranja es #ff9900;

solo cambia esos valores y agrega esto al div en el que quieras usarlo class="fondo naranja"
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
creo que requieres unas clases de css :fatigue:

solo hace falta copiar el código, yo preferiría usar una clase

HTML:
.fondo_naranja{
background: #83848D; //este es el color de fondo en código hexadecimal
border: 2px solid #333; //este es el ancho y color del borde
padding: 12px 10px; //este es el espacio entre el borde del div y su contenido
color: #FFF; //este es el color del texto del div
}
el color del naranja es #ff9900;

solo cambia esos valores y agrega esto al div en el que quieras usarlo class="fondo naranja"

[MENTION=81006]kanikase[/MENTION], memoadian

Algo debo estar haciendo mal.

Ahora tengo pegado los dos trozos de código, es decir, el tuyo y el de kanikase.

El tuyo lo he pegado tal cuál, es decir : este es el color de fondo en código hexadecimal, esta parte: class="fondo naranja" la he pegado en la entrada, de esta forma: <div class="fondo naranja" id='agregar_fondo'>

Pero se mantiene el fondo gris oscuro.

¿Me ayudan? por favor.

Gracias.
 

memoadian

Épsilon
Programador
Verificación en dos pasos activada
Desde
8 Feb 2013
Mensajes
940
[MENTION=81006]kanikase[/MENTION], memoadian

Algo debo estar haciendo mal.

Ahora tengo pegado los dos trozos de código, es decir, el tuyo y el de kanikase.

El tuyo lo he pegado tal cuál, es decir : este es el color de fondo en código hexadecimal, esta parte: class="fondo naranja" la he pegado en la entrada, de esta forma: <div class="fondo naranja" id='agregar_fondo'>

Pero se mantiene el fondo gris oscuro.

¿Me ayudan? por favor.

Gracias.

debes quitar la parte id="agregar_fondo" por que esta sobreescribiendo el css por lo mismo.
 

EspErpENto

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
16 Feb 2013
Mensajes
3.328
creo que requieres unas clases de css :fatigue:

solo hace falta copiar el código, yo preferiría usar una clase

HTML:
.fondo_naranja{
background: #83848D; //este es el color de fondo en código hexadecimal
border: 2px solid #333; //este es el ancho y color del borde
padding: 12px 10px; //este es el espacio entre el borde del div y su contenido
color: #FFF; //este es el color del texto del div
}

el color del naranja es #ff9900;

solo cambia esos valores y agrega esto al div en el que quieras usarlo class="fondo naranja"


debes quitar la parte id="agregar_fondo" por que esta sobreescribiendo el css por lo mismo.

Veamos a ver si al final he logrado entender la idea:


Pego:

.fondo_naranja{
background: #83848D; //este es el color de fondo en código hexadecimal
border: 2px solid #333; //este es el ancho y color del borde
padding: 12px 10px; //este es el espacio entre el borde del div y su contenido
color: #FFF; //este es el color del texto del div
}

En el style.css

Luego en la entrada coloco:

<div class="fondo naranja" > entrada</div>

¿Esa es la idea?

Gracias.
 
Arriba