Amigos, boa tarde!
Alguém tem o código para melhorar o layout dos textos que organizam as vitrines por categoria e também o texto de Destaques, colocando dentro de fundo arredondado?
Olá, boa tarde! Segue o código para ajuste do layout
/* Vitrine destaque */
.titulo-categoria.borda-principal.cor-principal.vitrine-destaque {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}
/* Acessórios para cabelo! */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660879 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}
/* Antifrizz */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660810 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}
/* Microfibra */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660893 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}
/* Produtos veganos */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11659810 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}
/* Saude e beleza */
a.titulo-categoria.borda-principal.cor-principal.vitrine-12553577 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}
/* Toucas Banho Hidratacao */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11679765 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
}Boa tarde, Teus_G!
Faz um ajuste no código centralizando tudo, por favor!
Se possível, coloca em maiúsculo as letras de Destaques.
Fazendo esses ajustes, fica perfeito. 
1 curtida
Para fazer a modificação é bem simples, basta adicionar ao final de cada “width” (text-align: center;)
Por exemplo:
/* PRODUTOS ANTIFRIZZ */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660810 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: 250px;
text-align: center;
}e para centralizar tudo na página?
Vou fazer pra você, 1s
Prontinho!
/* Destaques */
.titulo-categoria.borda-principal.cor-principal.vitrine-destaque {
text-align: center;
text-transform: uppercase;
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}
/* Acessórios para cabelo! */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660879 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}
/* Antifrizz */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660810 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}
/* Microfibra */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11660893 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}
/* Produtos veganos */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11659810 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}
/* Saude e beleza */
a.titulo-categoria.borda-principal.cor-principal.vitrine-12553577 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}
/* Toucas Banho Hidratacao */
a.titulo-categoria.borda-principal.cor-principal.vitrine-11679765 {
padding: 15px;
color: #000000;
background-color: #ffc600;
border-radius: 40px;
width: max-content;
}Na verdade o que estou querendo é centralizar o background na página 
Eu mudei a cor para o verde, aproveita e me diz como eu faço para tirar essa sombra laranja e trocar por uma sobra preta.
Para centralizar basta utilizar os códigos acima e aplicar o margin left/right como está descrito.
margin-left: auto;
margin-right: auto;
/* Cor borda */
borda-principal, .atributos ul li a:hover, .atributos ul li.active a, .tema-scuro .nav-tabs li.active a, .elastislide-carousel ul li.active a {
border-color: #000000;
}Eu peguei o código que vc me mandou, colei separado lá do Edtitor CSS e nada aconteceu:
/* Cor borda */
borda-principal, .atributos ul li a:hover, .atributos ul li.active a, .tema-scuro .nav-tabs li.active a, .elastislide-carousel ul li.active a {
border-color: #000000;
}
O que estou querendo é colocar uma sobra assim
Teus_G, bom dia, meu amigo!
Me ajuda só com mais essa última que te mandei, por favor.
só preciso disso para deixar minha página satisfatória.
Bom dia! Essa borda está ficando por conta que já existe um atributo em alguma parte do seu código “theme.css”, recomendo dar uma verificada e retirar/modificar o código. Caso não encontrar, tente utilizar o !important, vou deixar os códigos abaixo para uma possível tentativa. Um dos códigos já enviei aqui, apenas coloquei o complemento com a sombra “box-shadow”, então basta substituir.
/* Cor borda */
borda-principal, .atributos ul li a:hover, .atributos ul li.active a, .tema-scuro .nav-tabs li.active a, .elastislide-carousel ul li.active a {
border-color: #FFFFFF;
}
/* Destaques */
.titulo-categoria.borda-principal.cor-principal.vitrine-destaque {
text-align: center;
text-transform: uppercase;
padding: 15px;
color: #ffffff;
background-color: #59bf1c;
margin-left: auto;
margin-right: auto;
border-radius: 40px;
width: 250px;
color: black;
box-shadow: 0px 4px 5px black;
}Tá ótimo! Obrigado mais uma vez. 
1 curtida
esses códigos servem para mudar os títulos do carrossel? Por exemplo eu já tenho as cores certas, mas queria criar uma vitrine para marca própria
Nesse caso vai ter que criar uma categoria amigo. Depois de criar vai em visual da loja, vitrine e coloca para exibir as categorias. Você coloca a categoria que deseja em destaque e automaticamente ela vai para página inicial.
1 curtida