Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: Check Css Classes - Image :white_check_mark: Check Css Attributes - Image :x: You havent declared the attributes values correctly for the image - .infoCardContainer :white_check_mark: Check Css Classes - Text :white_check_mark: Check Css Attributes - Text :white_check_mark: Check Css Attributes values - Text :white_check_mark: Check Css Classes - Button :white_check_mark: Check Css Attributes - Button :white_check_mark: Check Css Classes and Metal blockClass :white_check_mark: Check Css Attribute Values - Metal blockclass :white_check_mark: Check Css Classes and Vintage blockClass :white_check_mark: Check Css Attribute Values - Vintage :white_check_mark: Check Css Attributes values - Button :white_check_mark: Check Css Classes - Button Hover :white_check_mark: Check Css Attributes - Button Hover :white_check_mark: Check Css Attributes values - Button Hover
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: First test - Code compilation :white_check_mark: Check Css Classes - Image :white_check_mark: Check Css Attributes - Image :white_check_mark: Check Css Attributes values - Image :white_check_mark: Check Css Classes - Text :white_check_mark: Check Css Attributes - Text :white_check_mark: Check Css Attributes values - Text :white_check_mark: Check Css Classes - Button :white_check_mark: Check Css Attributes - Button :white_check_mark: Check Css Classes and Metal blockClass :white_check_mark: Check Css Attribute Values - Metal blockclass :white_check_mark: Check Css Classes and Vintage blockClass :white_check_mark: Check Css Attribute Values - Vintage :white_check_mark: Check Css Attributes values - Button :white_check_mark: Check Css Classes - Button Hover :white_check_mark: Check Css Attributes - Button Hover :white_check_mark: Check Css Attributes values - 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.