I’ve noticed that when using the allow_custom_border_sides parameter, the HubL output will still use the default border values from the fields.json regardless of the sides that have been set in the theme settings.
For example, in this screenshot I have set the default border as a solid gray on all sides:
Then in the theme settings I’ve set the custom border sides to only have the bottom border:
In my stylesheet I have:
But then what actually gets rendered is this:
It’s only outputting border-bottom-color of the correct value, rather than outputting the entire snippet for the border. I’ve tried changing the HubL to output each side individually but it still grabs the default values from the fields.json and ignores the allow_custom_border_sides parameter. I know someone might say don’t have default borders then, but say you are uploading a marketplace theme you will want to showcase forms with a default field with a normal border and a custom border presumably, so it’s not an option to simply remove the default values.
Has anyone else come across this before?
@SBurnett28 in what CSS file are you overwriting the defaults from the fields.json?
I overwrite borders all the time, usually in a child.css though and not directly within a theme CSS file (could be your hierarchy of CSS files not allowing the overwrite).
Typically I overwrite the borders directly without allow_custom_border_sides though.
Can you share a page with the form where you’re trying to overwrite the borders?
I’m using the same file structure as HubSpot does in their boilerplate theme. Like so:
It’s nothing to do with the CSS getting overwritten or not as the only rules that affect field styles are in that screenshot in my opening post. It’s not that I’m trying to overwrite any CSS, the issue is the HubL output from the .css property is not as expected.
E.g.
“Border fields have a .css property that returns CSS based on the field’s value.”
“Generated CSS
Some style fields provide a way to output css directly based on the field’s value. This is especially helpful with fields that can control more complicated styling like gradients.”
What I would have expected as an output using that parameter is this:
border-top: 0;
border-right: 0;
border-bottom: 1px solid #659B91
border-left: 0;
Instead of getting something like this, I get the default values from the fields.json being pulled in (border: 1px solid #494a52) instead of getting overwritten by the field values in the theme settings, not in the stylesheet.
I want to use the allow_custom_border_sides as it should do the job it’s intended to do, which is to allow custom border sides without me needing to create custom individual border sides options using several different fields for style, width, and colour for each side.
Hey @SBurnett28
Your screenshot and assumption might be misleading you. The screenshot indicates that we’re looking at the style tab in the browser. Which will show the most recently rendered CSS, or the last sheet that’s cascaded.
I’d venture to bet that the styles are being overwritten else where.
Would you be able to show use the output CSS in the design manager and the computed styles from the inspector?
Here is the computed styles from the inspector:
Here is the output CSS in the design manager:
The border top/right/left should be 0, as the field in my theme settings is set to allow custom borders and only the bottom border is selected.
I could be misunderstanding how this parameter works as I imagined it would output something like this:
border-top: 0;
border-right: 0;
border-bottom: 1px solid #659B91
border-left: 0;
Hey @SBurnett28
"I could be misunderstanding how this parameter works as I imagined it would output "
I think this is the case. If you don’t zero out the border values in the theme settings HS will not do it for you. Thus allowing the default values to be rendered.
HubSpot has done a very good job of ensuring that you must be explicit when working with the style fields.
If you have any questions please don’t hesistate to reach out!
For what purpose would I need to be this explicit in setting borders, when it should be clear (at least from my perspective) that if I’m selecting custom sides and only selecting the bottom side that I obviously (obvious from my perspective) want to clear the default values and use the field values instead?
In that case, I’m hazarding a guess that I would need to flip this on its head and provide a default for only the bottom border then give the option of all 4 sides rather than the way I would prefer to do it.
@SBurnett28 yes, you would set the default to what you want it to be, with the option to change it on all sides. It’s backward to you as a developer, it’s marketer-centric though and designed to make it easy for them to use your defaults or modify via theme settings.
