Pergunta de sela do WordPress: Mova a posição da barra lateral da esquerda para a direita

Um usuário perguntou ?

Olá, me apaixonei pelo tema Sela e queria tanto customizá-lo que acabei criando meu próprio site de música no wordpress.org e senti que ele realmente se adaptava ao seu tema.

No entanto, gostaria de sua ajuda neste ponto específico: meu site está em árabe e, no nosso caso, a posição da barra lateral é padrão para a experiência do usuário no lado direito da tela. O idioma é lido da direita para a esquerda.

foi compre ao redor e obtenha tutoriais de CSS, mas como não sei, gostaria que me dissessem a localização ou as linhas de código que preciso modificar para encontrar o conteúdo do bloco do lado esquerdo da barra lateral direita.

Agradecemos antecipadamente por seu apoio;

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 7 meses atrás

Oi, vamos tentar esta solução CSS primeiro e ver o que você pensa antes de criar arquivos de tema para ajustar as coisas. Isso se concentra na página do blog, nas páginas de tipo de arquivo (arquivos de data, tags e páginas de categoria) e nas páginas de postagem individuais.

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

(@mirakitani)

2 anos, 7 meses atrás

Olá, muito obrigado pela sua rápida resposta. Eu apliquei uma solução CSS e parece ótimo.

Percebi um detalhe à esquerda: as informações do post (data + deixar um comentário) devem passar para o lado esquerdo da tela.

Como ainda é mostrado na lógica de leitura da esquerda para a direita, acaba no centro da tela e quebra o design natural.

aqui estão eles antes de y depois de capturas de tela.

Obrigado novamente por sua ajuda;

Esta resposta foi modificada há 2 anos e 7 meses.

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 7 meses atrás

Nós podemos fazer isso. Adicione isso a essa consulta média, antes do colchete curvo final.

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

(@mirakitani)

2 anos, 7 meses atrás

Olá

Obrigado pelo seu apoio.

Acho que os elementos temáticos estão começando a se espalhar por toda parte. Eles não estão alinhados e não seguem a estrutura básica do Sela.

ali está ele antes de e a de novo mais tarde.

Não tenho certeza se sou eu. Aqui está o código que colei como você disse na 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;
}
	
}

obrigado novamente

(@mirakitani)

2 anos, 7 meses atrás

Desculpe, link para o post errado

ali está ele de novo mais tarde.

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 7 meses atrás

Nossa, foi bem complicado. Subtraia o que você tem e substitua pelo próximo.

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

(@mirakitani)

2 anos, 7 meses atrás

A solução está pronta! Muito obrigado!

só não sei onde está linha Ele veio de eu verifiquei o original novamente e percebeu que não o tinha.

Esta linha torna os recursos da barra lateral e os montantes empilhados / empilhados atraentes entre si.

Se puder ser removido, será perfeito! Muito obrigado.

Entendo que precisamos editar os arquivos do tema após esta última parte?

Obrigado novamente pelo seu apoio

Esta resposta foi modificada há 2 anos e 7 meses. Esta resposta foi modificada há 2 anos e 7 meses. Esta resposta foi modificada há 2 anos e 7 meses. Esta resposta foi modificada há 2 anos e 7 meses. Esta resposta foi modificada há 2 anos e 7 meses.

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 7 meses atrás

Olá, esta linha pode ser excluída. Está no CSS original, organizado usando after seletor de mentiras. Adicione-o ao seu CSS personalizado para removê-lo.

.hentry::after {
    background: none;
}

(@mirakitani)

2 anos, 6 meses atrás

Olá, perfeito! A exibição do blog é exatamente a mesma do original.

Ocorreu um problema quando tentei navegar no blog e verificar se tudo estava consistente: quando você vai para o post em si, as informações (data + deixar um comentário) voltam para o centro da tela, como aconteceu quando fizemos. , eu queria consertar o blog.

Aqui está uma foto quando você vai para o post.

Esta resposta foi modificada há 2 anos e 6 meses.

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 6 meses atrás

Olá, eu tenho um default backend - 404 Erro ao tentar acessar seu site. Você está para baixo agora?

(@mirakitani)

2 anos, 6 meses atrás

Oi Desculpe. Esqueci que tenho um nome de domínio registrado.

Aqui está o site agora:

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 6 meses atrás

Ótimo, obrigado pelo novo link. Olhando para suas postagens individuais, ele parece ter notado isso.

Em telas maiores:

Em telas um pouco mais estreitas:

Depois que a barra lateral se move abaixo do tópico, o texto do comentário de data/saída é mantido em uma posição semelhante à imagem mais estreita acima.

(@mirakitani)

2 anos, 6 meses atrás

Olá, receio que o problema ainda não tenha sido resolvido.

A visualização do blog é perfeita, exatamente onde você está indo o trabalho em sio link informativo vai entre a barra lateral e o tópico do post (captura de tela).

Eu tentei dois computadores diferentes. O resultado que eu vinculei é sempre o mesmo.

Existe uma maneira de manter o mesmo conteúdo da página enquanto visualiza o blog inteiro?

Obrigada;

(@sentierosacro)

Engenheiro Automotivo de Felicidade

2 anos, 6 meses atrás

Desculpe, poste isso para páginas de postagem individuais.

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

(@mirakitani)

2 anos, 6 meses atrás

Obrigada!

Acho que este é o último problema: embora o layout e a distância entre a barra lateral, link permanente e posts tenham sido corrigidos, a lacuna ainda existe na seção de comentários.

aqui estão eles Captura de tela 1 com formulário de comentário / Captura de tela 2 com comentários de teste

Obrigado novamente por sua paciência e apoio!

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *