Open github-learning-lab[bot] opened 3 years ago
:white_check_mark::white_check_mark::x::x::x::white_check_mark::white_check_mark::x::white_check_mark::white_check_mark::x::x::white_check_mark::x::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file :white_check_mark: First test - Code compilation :x: You haven't declared .infoCardContainer classes for the image :x: You haven't declared the attributes correctly for the image - .infoCardContainer :x: You haven't declared the attributes values correctly for the image - .infoCardContainer :white_check_mark: Check Css Classes - Text :white_check_mark: Check Css Attributes - Text :x: You haven't declared the attributes values correctly for the text - .infoCardHeadline :white_check_mark: Check Css Classes - Button :white_check_mark: Check Css Attributes - 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 :white_check_mark: Check Css Classes and Vintage blockClass :x: You haven't declared the correct css attributes for the Vintage Infocard - .infoCardContainer--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::x::x::x::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: Getting the file :white_check_mark: First test - Code compilation :x: You haven't declared .infoCardContainer classes for the image :x: You haven't declared the attributes correctly for the image - .infoCardContainer :x: You haven't declared the attributes values correctly for the image - .infoCardContainer :white_check_mark: Check Css Classes - Text :white_check_mark: Check Css Attributes - Text :x: You haven't declared the attributes values correctly for the text - .infoCardHeadline :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:
:white_check_mark: Getting the file :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:
Criar um novo arquivo dentro da pasta
CSS
com o nomevtex.{AppName}.css
Usar o CSS Handle do componente que será customizado dentro deste arquivo seguindo o formato abaixo:
Na falta de CSS Handles, aplicar CSS Selectors permitidos, como é o caso do
:global(vtex-{componentName})
.Para aplicar CSS em um bloco específico e não a todos os blocos daquele tipo, usa-se o recurso de blockClass, que aparece ao lado dos handles de css ao inspecionar seu código. As blockClass devem ser declaradas como uma prop no bloco em questão, e então referenciado no arquivo de estilo como mostrado abaixo:
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.