problemi di visualizzazione

[davitart]

Ciao a tutti, sono nuovo del forum.
Sto creando un piccolo blog davitart.altervista.org con WP ma ho riscontrato alcuni problemi di visualizzazione.

1. Nella pagina interna dell'editor, quando scrivo un articolo, la didascalia sotto una foto è correttamente allineata al centro mentre, nella stessa pagina pubblicata, l'allineamento della didascalia è a sx. Sapete spiegarmi il perché e come risolvere il problema?

2. Problema simile al precedente: nella pagina dell'editor quando inserisco un video da YouTube esso occupa tutto lo spazio a sua disposizione mentre sulla stessa pagina pubblicata il video appare più piccolo e allineato a sx.

Spero d'essere stato chiaro perché avrei voluto allegare qualche screenshot ma non ho capito come fare...

Ciao ciao

DT

[alemoppo]

Se non si allineano con l'apposito strumento:

1)
Se intendi queste scritte, vai su Aspetto -> CSS Personalizzato e prova incollando:

figcaption{text-align:center}

2)
Stessa cosa, incollando:

.wp-block-embed__wrapper{text-align:center}

Ciao!

[davitart]

Grazie alemoppo, ti aggiorno:
- il problema n°1 è completamente risolto;
- il problema n°2, invece, lo è solo parzialmente (il video di youtube ora è al centro ma continua ad essere piccolo e a non occupare tutto lo spazio all'interno del box bianco).

Visto che ci sono ti chiedo anche un'altra cosa: è possibile arrotondare gli spigoli dei box che racchiudono gli articoli e, magari, cambiarne pure il colore (che adesso è bianco)?

Grazie mille della disponibilità e buone feste!

Davide

[alemoppo]

Per la dimensione dei video, prova così:

.wp-block-embed__wrapper > iframe
{
  width:500px;
  height:281px
}

500 indica la larghezza; 281 indica l'altezza. Nota che quei valori sono valori di default, quindi se vuoi ingrandire dovrai aumentarli, ad esempio a 700px e 300px.

Per quanto riguarda invece lo sfondo e il bordo, prova così (dimmi se si modifica altro che non vuoi, in generale puoi escludere elementi eliminando qualche ".voce"):

.category-title, .comment-form, .comment-list > li.comment, .hentry, .navigation, .no-results, .page-header, .widget{
  border-radius: 10px 10px 10px 10px;
  background-color:#3c3;
}

I vari 10px sono la dimensione della "curva", puoi aumentarli o diminuirli a piacere.
Per quanto riguarda il colore di sfondo, modifica il #3c3 (con il colore che puoi selezionare da qui).

Ciao!