ayuda para crear un cuadro con bordes y fondo para texto

pulpoenred · 4 Jul 2023

¡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:

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,

HeisenbergDev · 4 Jul 2023

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,

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

pulpoenred · 4 Jul 2023

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

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,

HeisenbergDev · 4 Jul 2023

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,

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;
    }

pulpoenred · 4 Jul 2023

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?

juniorav · 4 Jul 2023

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?

Esta cambiando la class por la suya?

Puko · 4 Jul 2023

pulpoenred dijo:
indicarme donde colocarlo

pulpoenred dijo:
tendría que agregarlo al al archivo style.css?

pulpoenred dijo:
ir avanzado y clases CCS adicionales,

¿en que lo estas haciendo, en wordpress, blogger, etc?

pulpoenred · 4 Jul 2023

Puko dijo:
¿en que lo estas haciendo, en wordpress, blogger, etc?

En wordpress, gutenberg

Puko · 4 Jul 2023

¿puedes poner captura de la parte donde quieres poner el cuadro? con inspeccionar elemento o poner la url de tu pagina

pulpoenred · 4 Jul 2023

Puko dijo:
¿puedes poner captura de la parte donde quieres poner el cuadro? con inspeccionar elemento o poner la url de tu pagina

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

Puko · 4 Jul 2023

Al 'Cuadro' dale > click derecho > inspeccionar
algo asi ...por ejemplo ... para saber el nombre de la class (<div class= ...)

pulpoenred · 5 Jul 2023

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

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/

Puko · 5 Jul 2023

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]'

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;
}

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;
}

asi...

y ya te quedara asi ...

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;
}

pulpoenred · 7 Jul 2023

@Puko Te agradezco que te hayas tomado el tiempo de habermelo explicado así, muchas gracias crack,