Shopify themes, liquid, logos, and UX
Hi community,
I would like to change the layout ot the contact us to this:
In the base.css file I changed the the following parts:
The following removes the all around border and adds the border at the bottom (input fields):
.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
pointer-events: none;
content: '';
position: absolute;
top: var(--inputs-border-width);
right: var(--inputs-border-width);
bottom: var(--inputs-border-width);
left: var(--inputs-border-width);
/* REMOVE BORDERS FROM INPUT IN FORMS
border: 0.1rem solid transparent;
border-radius: var(--inputs-radius);
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));*/
/* ADD BOTTOM BORDER FROM INPUT IN FORMS*/
border-bottom: 1px solid black;
transition: box-shadow var(--duration-short) ease;
z-index: 1;
}
and the following to add the all around border to the text area:
.text-area {
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
min-height: 10rem;
resize: none;
/* REMOVE BOTTOM BORDER FROM TEXT AREA IN FORMS*/
border-bottom: none;
/* ADD BORDER TEXT AREA IN FORMS*/
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
}
The problem is that I get a double bottom border now in the text area because I cannot unset the field setting.
Any help would be appreciated...
Solved! Go to the solution
This is an accepted solution.
Hi @MaBa
if you don't want to remove the border of the text area, you can replace the code with this
.field__input,
.field input,
.field:after {
box-shadow: none!Important;
}
.text-area.field__input {
border: 1px solid black;
}
Hi @MaBa
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
Hi @MaBa
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
.field__input,
.field input,
.field:after {
box-shadow: none!Important;
}
It didn't work because removed the all around border from the text area (see picture)
This is an accepted solution.
Hi @MaBa
if you don't want to remove the border of the text area, you can replace the code with this
.field__input,
.field input,
.field:after {
box-shadow: none!Important;
}
.text-area.field__input {
border: 1px solid black;
}
User | RANK |
---|---|
227 | |
154 | |
64 | |
50 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023