ayuda para crear un cuadro con bordes y fondo para texto

  • Autor Autor pulpoenred
  • Fecha de inicio Fecha de inicio
pulpoenred

pulpoenred

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¡hola betas! que tal? quería pedir ayuda para hacer un cuadro como este, es decir, que tenga como un borde más oscuro para el texto, y un fondo clarito:
IMG_20230704_164744.webp

Estaba leyendo que es con CSS, pero he tocado poco del tema, o sea, si alguien me puede facilitar un codigo, indicarme donde colocarlo y como activarlo en ciertas partes del texto? Como es el proceso, leí que era sencillo, pero me siento perdid
Muchas gtracias de antemano,
 
Última edición:
pulpoenred dijo:
¡hola betas! que tal? quería pedir ayuda para hacer un cuadro como este, es decir, que tenga como un borde más oscuro para el texto, y un fondo clarito:
Ver el archivo adjunto 1047731
Estaba leyendo que es con CSS, pero he tocado poco del tema, o sea, si alguien me puede facilitar un codigo, indicarme donde colocarlo y como activarlo en ciertas partes del texto? Como es el proceso, leí que era sencillo, pero me siento perdid
Muchas gtracias de antemano,
Hacer clic para expandir...
Aqui tienes
CSS: 
    div{
        border: solid blue;
        background-color: rgba(178,255,255,0.8);
        padding: 5px 15px 5px 15px;
    }

Solo tienes que cambiar en vez de "DIV" el selector del contenedor o de la P donde esta el texto
 
Muchas
HeisenbergDev dijo:
Aqui tienes
CSS: 
    div{
        border: solid blue;
        background-color: rgba(178,255,255,0.8);
        padding: 5px 15px 5px 15px;
    }

Solo tienes que cambiar en vez de "DIV" el selector del contenedor o de la P donde esta el texto
Hacer clic para expandir...
Muchas gracias por responder. Este código tendría que agregarlo al al archivo style.css?
Y para activarlo en los textos que quiera dentro de las entradas, como haría? Eso es lo que me deja en muchas dudas, uso gutenberg,
 
pulpoenred dijo:
Muchas

Muchas gracias por responder. Este código tendría que agregarlo al al archivo style.css?
Y para activarlo en los textos que quiera dentro de las entradas, como haría? Eso es lo que me deja en muchas dudas, uso gutenberg,
Hacer clic para expandir...
si puedes agregarlo directamente al style.css para activarlo necesitas darle una clase o id al texto
Insertar CODE, HTML o PHP: 
.aquiclasedeltexto{
        border: solid blue;
        background-color: rgba(178,255,255,0.8);
        padding: 5px 15px 5px 15px;
    }
 
Lo que estoy haciendo para activarlo en un bloque de texto es seleccionarlo ir avanzado y clases CCS adicionales, pero no me resulta, o lo estoy haciendo mal para activarlo?
 
pulpoenred dijo:
Lo que estoy haciendo para activarlo en un bloque de texto es seleccionarlo ir avanzado y clases CCS adicionales, pero no me resulta, o lo estoy haciendo mal para activarlo?
Hacer clic para expandir...
Esta cambiando la class por la suya?
 
¿puedes poner captura de la parte donde quieres poner el cuadro? con inspeccionar elemento o poner la url de tu pagina
 
Puko dijo:
¿puedes poner captura de la parte donde quieres poner el cuadro? con inspeccionar elemento o poner la url de tu pagina
Hacer clic para expandir...
IMG-20230704-WA0029.webp

El cuadro azul es donde quisiera colocar el cuadro, mientras que otras partes del texto lo dejaría así, como sale en la equis. Lo que tendría que hacer es colocar el código en style.css, pero luego, para activarlo en partes del texto concretas, como la de la imagen, como lo activaría? Esto último es lo que no entiendo, como activarlo
 
Al 'Cuadro' dale > click derecho > inspeccionar
algo asi ...por ejemplo ... para saber el nombre de la class (<div class= ...)
2023-07-04_183354.webp
 
Puko dijo:
Al 'Cuadro' dale > click derecho > inspeccionar
algo asi ...por ejemplo ... para saber el nombre de la class (<div class= ...)
Ver el archivo adjunto 1047948
Hacer clic para expandir...
Te agradezco mucho la ayuda, la web es esta por si quieres ver lo de class porque no sé si lo identifique bien: modeloscartasjob.com/otros/modelos-cartas-para-solicitar-prestamos-o-creditos/
 
Para ponerlo como tu dices...

Esa parte de la pagina donde esta el titulo 'Carta para pedir un préstamo a un jefe en el trabajo' esta 'separado' de '[Membrete de la entidad o empresa]'

2023-07-05_174858.jpg


Si le pones el css a class 'wp-block-group' , le cambiara también al <div>/cuadro de arriba y el titulo se queda afuera del cuadro y te quedara asi...

.wp-block-group {
border: 3px solid #7379B3;
padding: 8px;
background: #F5F9FA;
}

2023-07-05_180212.jpg


para que quede como lo quieres ocupas poner un <div> con class (por ejemplo "cuadrox") antes del <h2> del titulo y el cierre del </div> donde termina el cuadro, asi...

css

.cuadrox {
border: 3px solid #7379B3;
padding: 8px;
background: #F5F9FA;
}
2023-07-05_180937.jpg

asi...

2023-07-05_184652.jpg

y ya te quedara asi ...
2023-07-05_185203.jpg


En resumen...

poner un <div> antes del titulo y su cierre (</div>) después del cierre del <div> 'wp-block-group' :

<div class="cuadrox">

<h2> ... </h2>
<div class="wp-block-group"></div>

</div>

.cuadrox {
border: 3px solid #7379B3;
padding: 8px;
background: #F5F9FA;
}
 
@Puko Te agradezco que te hayas tomado el tiempo de habermelo explicado así, muchas gracias crack,
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba