Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::x::x::x::x::x::x::x::x::x::x::x::x::x::x::x::x:
:white_check_mark: First test - Code compilation :x: You havent declared .infoCardContainer classes for the image :x: You havent declared the attributes correctly for the image - .infoCardContainer :x: You havent declared the attributes values correctly for the image - .infoCardContainer :x: You havent declared .infoCardHeadline classes for the text :x: You havent declared the attributes correctly for the text - .infoCardHeadline :x: You havent declared the attributes values correctly for the text - .infoCardHeadline :x: You havent declared .infoCardCallActionContainer :global(.vtex-button) classes for the button :x: You haven't declared the correct css attributes for the button - .infoCardCallActionContainer :global(.vtex-button) :x: You haven't declared [object Object] classes and blockClass :x: You haven't declared the correct css attributes values for the Metal infocard - .infoCardContainer--metal :x: You havent declared .infoCardContainer--vintage classes for the Vintage infocard :x: You havent declared the correct css attributes for the Vintage Infocard - .infoCardContainer--vintage :x: You havent declared the correct css attributes values for .infoCardCallActionContainer :global(.vtex-button) :x: You havent declared .infoCardCallActionContainer :global(.vtex-button):hover classes for the button hover :x: You haven't declared the correct css attributes for the button hover - .infoCardCallActionContainer :global(.vtex-button):hover :x: You havent declared the attributes values correctly for the button hover - .infoCardCallActionContainer :global(.vtex-button):hover
CSS Handles e o poder da customização de blocos
:sparkles: Branch: csshandles
Introdução
Dando uma rápida olhada na sua loja atual, você conseguirá perceber que todos os componentes possuem estilos parecidos, mesmo que nenhuma customização tenha sido feita por você.
Todos eles, incluindo o Info Card recém configurado, compartilham valores pré-estabelecidos para fonte, cor de fundo, cor principal, formato dos botões, etc.
Isso se deve ao
style.json
, arquivo responsável por declarar valores genéricos de customização para toda loja do Store Framework.Para criar uma identidade própria para os componentes da sua loja, você pode sobrescrever esses valores por meio de customizações de CSS.
Analisando a recipe para customizações de loja por CSS, percebemos que alguns passos serão necessários para aplicar o estilo próprio desejado por você, como:
CSS
com o nomevtex.{AppName}.css
:global(vtex-{componentName})
.Customizando o Info Card
Para descobrir os CSS Handles de um componente, como o Info Card, basta acessar a sessão
Customization
da sua documentação.De acordo com a descrição dos CSS Handles e com a recipe customizações de loja por CSS, conseguimos implementar um exemplo de Info Card customizado, alterando seu título e as configurações do botão call to action ao adicionar o código a seguir no arquivo
vtex.store-components.css
dentro de/styles/css
:Você pode conferir o efeito das mudanças feitas por você executando o comando
vtex link
.Em seguida, vamos adicionar um estilo específico para o infocard Vintage. Para começar, adicione a prop
blockClass
noinfo-card#button-right
como mostrado abaixo:E então declare uma
background-color
para este infocard específico no seu arquivo de css:Observe o efeito atingido linkando sua app.
Atividade
vtex.store-components.css
, copie o código acima para usá-lo no arquivo CSS do seu tema, seguindo a recipe sobre customizações de loja por CSS;max-width
) de de todos os infocards para1260px
, a margin para0 auto
e o padding para0
.black
;bold
);white
.vintage
, aplique um novo block class chamadometal
no infocardinfo-card#button-left
e aplique a cor de fundo#e1e1e1
nele.:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.