Un utente ha chiesto informazioni su Sela di Wordpress

Spostare la posizione della barra laterale da sinistra a destra

Un utente ha chiesto 👇

Ciao,
Mi sono innamorato del tema di Sela e volevo personalizzarlo così tanto che ho deciso di aprire il mio sito web di musica su wordpress.org e ho sentito di aver davvero soddisfatto il tuo tema.

Tuttavia, vorrei il tuo aiuto su questo punto particolare: il mio sito web è in arabo e, nel nostro caso, la posizione della barra laterale standard per l’esperienza utente è sul lato destro dello schermo. La lingua si legge da destra a sinistra.

ero guardarsi intorno e ottenere tutorial CSS, ma poiché non ne sono a conoscenza, vorrei che mi indirizzassi al punto o alle righe di codice che dovrei cambiare per trovare il contenuto del blog sul lato sinistro della barra laterale destra.

Grazie in anticipo per il vostro sostegno;

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 10 mesi fa

Salve, allora, proviamo prima questa soluzione CSS e vediamo cosa ne pensate prima di creare i file del tema per modificare le cose. Ciò si concentra sulla pagina del blog, sulle pagine di tipo archivio (archivio della data, tag e pagine delle categorie) e sulle singole pagine dei post.

@media screen and (min-width: 850px) {
body.rtl.blog .site-content #secondary, body.rtl.archive .site-content #secondary, body.rtl.single .site-content #secondary {
	float: right;
}
body.rtl.blog .site-content #primary, body.rtl.archive .site-content #primary, body.rtl.single .site-content #primary {
	float: left;
}
}

Lanciatore di thread

(@mirakitani)

2 anni, 10 mesi fa

Ciao,
Grazie mille per la tua rapida risposta. Ho applicato una soluzione CSS e sembra davvero buona.

Ho notato un dettaglio a sinistra: le informazioni sul post (data + lasciare un commento) dovrebbero spostarsi sul lato sinistro dello schermo.

Poiché è ancora visualizzato nella logica di lettura da sinistra a destra, finisce al centro dello schermo e interrompe la disposizione naturale.

Eccoli prima e dopo screenshot.

Grazie ancora per il tuo supporto;

Questa risposta è stata modificata 2 anni, 10 mesi fa da.

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 10 mesi fa

Possiamo farlo. Aggiungi questo a quella query media, prima della parentesi curva finale.

.entry-body {
float: right;
padding-right: 0;
padding-left: 146px;
}
.entry-meta {
left: 0;
right: auto;
}

Lanciatore di thread

(@mirakitani)

2 anni, 10 mesi fa

Ciao,

Grazie per il vostro sostegno.

Penso che gli elementi del tema stiano iniziando a diffondersi ovunque.
Non sono allineati e non seguono la struttura di base di Sela.

Ecco il file prima e il nuovo dopo.

Non sono sicuro che sia io. Ecco il codice che ho incollato come hai detto nella SEC:

@media screen and (min-width: 850px) {
body.rtl.blog .site-content #secondary, body.rtl.archive .site-content #secondary, body.rtl.single .site-content #secondary {
	float: right;
}
body.rtl.blog .site-content #primary, body.rtl.archive .site-content #primary, body.rtl.single .site-content #primary {
	float: left;
}
	
.entry-body {
float: right;
padding-right: 0;
padding-left: 146px;
}
.entry-meta {
left: 0;
right: auto;
}
	
}

Grazie ancora

Lanciatore di thread

(@mirakitani)

2 anni, 10 mesi fa

Spiacenti, sbagliato dopo il collegamento

Ecco il file nuovo dopo.

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 10 mesi fa

Wow, questo è stato un po ‘complicato. Sottrai quello che hai e sostituiscilo con il seguente.

@media screen and (min-width: 850px) {
body.rtl.blog .site-content #secondary, body.rtl.archive .site-content #secondary, body.rtl.single .site-content #secondary {
	float: right;
}
body.rtl.blog .site-content #primary, body.rtl.archive .site-content #primary, body.rtl.single .site-content #primary {
	float: left;
}
	
body.rtl.blog .entry-body {
  float: right;
  padding-right: 0;
  padding-left: 146px;
	width: calc(100% - 196px);
	position: relative;
}
body.rtl.blog .entry-meta {
  left: 0;
  right: auto;
	text-align: right;
}
body.rtl.blog .without-featured-image > .entry-header {
margin-right: 0;
margin-left: 146px;
}
}

Lanciatore di thread

(@mirakitani)

2 anni, 10 mesi fa

La soluzione è sul posto ora! Vi ringrazio molto !

Tranne che non so dove questa linea venire da?
io ho controllato l’originale di nuovo e ho capito che non ce l’avevi.

Quella linea fa sembrare le caratteristiche della barra laterale e dei post affollate / sovrapposte e obbligatorie l’una sull’altra.

Se può essere rimosso, sarà perfetto! Grazie mille.

Capisco che dobbiamo modificare i file del tema dopo quest’ultima parte?

Grazie ancora per il vostro sostegno

Questa risposta è stata modificata 2 anni, 10 mesi fa da. Questa risposta è stata modificata 2 anni, 10 mesi fa da. Questa risposta è stata modificata 2 anni, 10 mesi fa da. Questa risposta è stata modificata 2 anni, 10 mesi fa da. Questa risposta è stata modificata 2 anni, 10 mesi fa da.

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 10 mesi fa

Ciao, quella linea può essere rimossa. È nel CSS originale, corretto usando after selettore di menzogne. Aggiungilo al tuo CSS personalizzato per rimuoverlo.

.hentry::after {
    background: none;
}

Lanciatore di thread

(@mirakitani)

2 anni, 10 mesi fa

Ciao,
Perfetto! La visualizzazione del blog è esattamente come quella originale.

Un problema è stato riscontrato quando stavo cercando di navigare nel blog e assicurarmi che ogni cosa fosse coerente:
Quando vai al post stesso, le informazioni (data + lascia un commento) tornano al centro dello schermo, in modo simile a quello che è successo per la prima volta quando stavamo cercando di impostare il blog.

Ecco una foto quando vai al post.

Questa risposta è stata modificata 2 anni, 10 mesi fa da.

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 10 mesi fa

Salve, ricevo un default backend - 404 errore durante il tentativo di accedere al tuo sito. È giù adesso?

Lanciatore di thread

(@mirakitani)

2 anni, 10 mesi fa

Ciao, scusa. Ho dimenticato di avere un nome di dominio registrato.

Ecco il sito web in questo momento: http://www.mirayasami.com/

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 9 mesi fa

Ah, bene, grazie per il nuovo collegamento. Guardando i tuoi singoli post, sembra che tu l’abbia notato.

Su schermi più ampi: https://cldup.com/7mkK7gNI3N.png

Su schermi leggermente più stretti: https://cldup.com/9Qa6eiFvnL.png

Dopo che la barra laterale si sposta sotto l’oggetto, il testo del commento di data / partenza rimane in una posizione simile all’immagine più stretta sopra.

Lanciatore di thread

(@mirakitani)

2 anni, 9 mesi fa

Ciao,
Temo che il problema non sia ancora risolto.

La visualizzazione del blog è perfetta, proprio dove vai il lavoro stesso, il collegamento delle informazioni va al centro tra la barra laterale e l’oggetto del post (immagine dello schermo).

Ho provato due computer diversi. Il risultato a cui mi sono collegato rimane lo stesso.

C’è un modo per mantenere il contenuto della pagina lo stesso di come visualizzi l’intero blog?

Grazie;

(@sacredpath)

Ingegnere automatizzato della felicità

2 anni, 9 mesi fa

Ah, scusa, Pubblica questo per le pagine del singolo post.

@media screen and (min-width: 1170px) {
  .single .entry-meta {
	 width: 100%;
	 text-align: right;
	 position: initial;
  }
	.single .entry-header {
		margin-right: 0 !important;
	}
	.single .entry-body {
		padding-right: 0;
	}
}

Lanciatore di thread

(@mirakitani)

2 anni, 9 mesi fa

Grazie !

Penso che questo sia l’ultimo problema: anche se la disposizione e la distanza tra la barra laterale, il permalink e i post sono stati risolti, il divario esiste ancora nei commenti.

Eccoli Screenshot 1 con modulo di commento / Screenshot 2 con commento di prova

Grazie ancora per la vostra pazienza e tutto il supporto!

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *