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 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 :x: You haven't declared .infoCardHeadline classes for the text :x: You haven't declared the attributes correctly for the text - .infoCardHeadline :x: You haven't declared the attributes values correctly for the text - .infoCardHeadline :x: You haven't 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 haven't declared .infoCardContainer--vintage classes for the Vintage infocard :x: You haven't declared the correct css attributes for the Vintage Infocard - .infoCardContainer--vintage :x: You haven't declared the correct css attributes values for .infoCardCallActionContainer :global(.vtex-button) :x: You haven't 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 haven't declared the attributes values correctly for the button hover - .infoCardCallActionContainer :global(.vtex-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 y el poder de la personalización de bloques
:sparkles: Branch: csshandles
Introducción
Si echa un vistazo a su tienda actual, podrá ver que todos los componentes tienen estilos parecidos, incluso si usted no ha realizado ninguna personalización.
Todos estos, incluyendo el Info Card recién configurado, comparten valores preestablecidos para fuente, color de fondo, color principal, formato de los botones, etc.
Esto se debe al
style.json
, archivo responsable de declarar valores genéricos de personalización para toda tienda del Store Framework.Para crear una identidad propia para los componentes de su tienda, puede sobrescribir estos valores a través de personalizaciones de CSS.
Analizando el recipe para personalizaciones de tienda por CSS, percibimos que serán necesarios algunos pasos para aplicar el estilo propio que usted desea, como:
CSS
con el nombrevtex.{AppName}.css
.:global(vtex-{componentName})
.Personalizando el Info Card
Para descubrir los CSS Handles de un componente, como el Info Card, basta con acceder a la sección
Customization
de su documentación.De acuerdo con la descripción de CSS Handles y con el recipe de personalizaciones de tienda por CSS, pudimos implementar un ejemplo de Info Card personalizado, cambiando su título y la configuración del botón call to action al agregar el siguiente código al archivo
vtex.store-components.css
dentro de/styles/css
:Puedes comprobar el efecto de los cambios realizados ejecutando el comando
vtex link
.En seguida, añadiremos un estilo específico al info card Vintage. Para empezar, agregue la prop
blockClass
en elinfo-card#button-right
como se muestra a continuación:Y entonces declare un
background-color
para este info card específico en su archivo de css:Observe el efecto alcanzado al enlazar su app.
Actividad
vtex.store-components.css
, copie el código anterior para usarlo en el archivo CSS de su tema, siguiendo el recipe sobre personalizaciones de tienda por CSS.max-width
) de todos los info cards en1260px
, el margin en0 auto
y el padding en0
.black
.bold
) .white
.vintage
, aplique un nuevo block class llamadometal
en el info cardinfo-card#button-left
y aplique el color de fondo de#e1e1e1
en este.:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.