topic Re: Help Removing Persistent Black Line in Custom Quote Template in Sales Hub Tools

Help Removing Persistent Black Line in Custom Quote Template

BGunning7 — Wed, 28 May 2025 21:06:46 GMT

Hi HubSpot Community,

I’m customising a quote template and have encountered a persistent black line that I cannot remove, despite extensive attempts using custom CSS.

What I’ve Identified:

The black line appears near the top of the quote.
It is rendered by a ::after pseudo-element on a <div> inside the .banner__sender container.
The styles are coming from template_main.min.css, and include:
- background-color: black
- height: 3px
- width: 45px
- position: absolute
- top: 10px
- transform: rotate(45deg)
- content: "" (empty string)
- display: block

What I’ve Tried:

I’ve used {% require_css %} in the quote template to override this element with display: none, content: none, and reset all layout and visual styles.
I’ve also targeted .banner__recipient and its pseudo-elements, in case they were contributing.
I’ve used highly specific selectors, including .hs-quotes--flow .banner__sender > div::after, and added !important to every rule.
I’ve confirmed that my CSS is being loaded, but the line still appears.

What I Need:

I’d like to completely remove this decorative line from the quote template. It appears to be hardcoded or injected in a way that prevents override via the standard template CSS block.

Has anyone successfully removed this line or encountered a similar issue? Is there a workaround or a HubSpot-supported method to suppress this pseudo-element?

Any help would be greatly appreciated!

Thanks,
Brookelynn

Re: Help Removing Persistent Black Line in Custom Quote Template

BérangèreL — Thu, 29 May 2025 12:14:28 GMT

Hi @BGunning7 and welcome, it's a pleasure to have you here! 🤗

Great question, thanks for asking the HubSpot Community!

1. Could you please share a screenshot (without sensitive data) of the quote with the black line?
2. Also, can you share the code or the link to a test quote?

The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.

For information on the topic, here is an article "Create and use customized quote templates".

I'd love to put you in touch with our CSS Experts: Hi @elizheleva, @Stephanie-OG and @alyssamwilie do you have any tips to help @BGunning7, please?

Have a lovely day and thanks so much in advance for your valuable contributions! ❤️
Bérangère

Re: Help Removing Persistent Black Line in Custom Quote Template

elizheleva — Thu, 29 May 2025 12:33:22 GMT

Hi Brookelynn,

as @BérangèreL mentioned, it would be great to have a screenshot. Or better still, to have a link to a dummy quote using the template. This way, I can audit the CSS and can provide further insight.

Thanking you,

Eli

Re: Help Removing Persistent Black Line in Custom Quote Template

BGunning7 — Mon, 02 Jun 2025 20:35:19 GMT

Hi Eli,

Thank you for your response - attached you will find the snippets of the .css code that I have tried (this was my final attempt after numerous attempts), along with a snippet of the quote template, with the Dev Tool Element name.

Please let me know if this help, or if you require anything further.

{% require_css %} <style> /* Global reset */ body.hs-quotes.hs-quotes--flow, .hs-quotes--flow, .hs-quotes--flow * { border-top: none !important; border: none !important; box-shadow: none !important; background-image: none !important; } /* Remove black line from .banner__sender > div::after */ body.hs-quotes.hs-quotes--flow .banner__sender > div::after { content: none !important; display: none !important; background: none !important; height: 0 !important; width: 0 !important; border: none !important; box-shadow: none !important; position: static !important; transform: none !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; visibility: hidden !important; } /* Remove .banner__recipient and its pseudo-elements */ body.hs-quotes.hs-quotes--flow .banner__recipient, body.hs-quotes.hs-quotes--flow .banner__recipient--left-align, body.hs-quotes.hs-quotes--flow .banner__recipient::before, body.hs-quotes.hs-quotes--flow .banner__recipient--left-align::before { display: none !important; content: none !important; background: none !important; height: 0 !important; width: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; overflow: hidden !important; pointer-events: none !important; } </style> {% end_require_css %}

Re: Help Removing Persistent Black Line in Custom Quote Template

elizheleva — Tue, 03 Jun 2025 11:50:34 GMT

Hi Brookelynn,

thank you for sharing the CSS. It will be good to see the html as well, as sometimes like you've said in your initial message, it is possible that a class is added and its inheriting the CSS, so we need the full picture. Is there a way for you to create a dummy deal and a dummy quote and then share a link to the quote here, as this way, I can see the live HTML for the quote and can do some troubleshooting.

Alternatively, is it worth us jumping on a quick call so we can see things live?

Thanking you,

Eli

Re: Help Removing Persistent Black Line in Custom Quote Template

BGunning7 — Fri, 06 Jun 2025 13:30:56 GMT

Hi Eli, @elizheleva

Thank you for your response, are you available to jump on a call tomorrow afternoon at 12:30 GMT+1, or Friday at 12:30 GMT+1, I think it is definitely worth it jumping on a call to screen share.

For the moment being, here is the HTML - keeping in mind we have over 100 lines of code - this is just a peice which I think may relate.

{% require_css %}
<style>
{% if module_data|attr('banner_image')|attr('hidden') &&
module_data|attr('logo')|attr('hidden') &&
module_data|attr('quote_name')|attr('hidden') &&
module_data|attr('recipient_company')|attr('hidden') &&
module_data|attr('recipient_contacts')|attr('hidden') &&
module_data|attr('sender_company')|attr('hidden') &&
module_data|attr('sender_user')|attr('hidden')
%}
.hs-quotes--flow .banner { display: none; }
{% endif %}

{% if module_data|attr('numbered_heading')|attr('hidden') &&
module_data|attr('summary')|attr('hidden') &&
module_data|attr('description')|attr('hidden') &&
module_data|attr('text_with_subheading_1')|attr('hidden') &&
module_data|attr('list_1')|attr('hidden') &&
module_data|attr('list_2')|attr('hidden') &&
module_data|attr('text_with_subheading_2')|attr('hidden')
%}
.hs-quotes--flow .executive-summary { display: none; }
{% endif %}

{% if module_data|attr('numbered_heading')|attr('hidden') &&
module_data|attr('summary')|attr('hidden')
%}
.hs-quotes--flow .executive-summary .section-head { display: none; }
{% endif %}

{% if module_data|attr('list_1')|attr('hidden') &&
module_data|attr('list_1')|attr('hidden')
%}
.hs-quotes--flow .executive-summary .list__container { display: none; }
{% endif %}

{% if module_data|attr('numbered_heading_2')|attr('hidden') &&
module_data|attr('summary_2')|attr('hidden') &&
module_data|attr('paragraph_1')|attr('hidden') &&
module_data|attr('paragraph_image_1')|attr('hidden') &&
module_data|attr('paragraph_image_2')|attr('hidden') &&
module_data|attr('paragraph_2')|attr('hidden') &&
module_data|attr('resources_header')|attr('hidden') &&
module_data|attr('resource')|attr('hidden') &&
module_data|attr('testimonials_header')|attr('hidden') &&
module_data|attr('testimonial')|attr('hidden')
%}
.hs-quotes--flow .our-story { display: none; }
{% endif %}

{% if module_data|attr('numbered_heading_2')|attr('hidden') &&
module_data|attr('summary_2')|attr('hidden')
%}
.hs-quotes--flow .our-story .section-head { display: none; }
{% endif %}

Re: Help Removing Persistent Black Line in Custom Quote Template

BGunning7 — Wed, 04 Jun 2025 07:27:09 GMT

Hi Eli,

If we could jump on a call and I can take you through the HTML and .CSS file, that would be great - it may also be quicker. Are you available tomorrow at 12:30? Or, Friday at 12:30?

Re: Help Removing Persistent Black Line in Custom Quote Template

BGunning7 — Fri, 06 Jun 2025 08:56:58 GMT

Hi Eli,

If we could jump on a call and I can take you through the HTML and .CSS file, that would be great - it may also be quicker. Are you available on Monday at 12:30? Or, Tuesday at 12:30?

Re: Help Removing Persistent Black Line in Custom Quote Template

elizheleva — Mon, 09 Jun 2025 11:00:14 GMT

Hi Brookelynn,

Send me a calendar invite for today or tomorrow, I've sent you my email on DM. My availability for today and tomorrow is quite good, so send it for a time that works for you and let's get this sorted. 🙂

Thanking you,

Eli

Re: Help Removing Persistent Black Line in Custom Quote Template

BérangèreL — Wed, 11 Jun 2025 15:00:08 GMT

Hi @elizheleva, I hope that you are well!

Thanks so much for your help and message ❤️

The HubSpot Community is a shared space of connection and learning.

Help make the HubSpot Community a richer place by sharing your expertise here, on this public space please, so that other Community Members can get help too!

Thank you very much!

Have a lovely day!
Bérangère

Re: Help Removing Persistent Black Line in Custom Quote Template

elizheleva — Wed, 11 Jun 2025 15:28:34 GMT

Hi Bérangère,

Thank you for the prompt to share the outcome. We only had the call yesterday and will be finalising things tomorrow hence I've not published the official solution.

What seems to have happened though is that the template that was cloned was using an html file from the marketplace theme. This meant that even though the css could have had the right definitions, the html file was referencing a different css file.

A simple solution that worked in the end was to clone the proposal.html file from the marketplace theme to a child theme, then within the quote template UI we selected "customise quote template" and selected the template we had just cloned. Then within that we ended up removing a class on one of the divs that was pulling this line given that for the purpose of what Brookelynn wanted to do, none of the styling was needed.

Should we find anything else, I'll update the post 😊🙏

Thanking you once again for thr tag.

Here to help,

Eli

Re: Help Removing Persistent Black Line in Custom Quote Template

BérangèreL — Thu, 12 Jun 2025 07:05:46 GMT

Hi @elizheleva, thank you so much for taking the time to share the solution with the Community!

This will be extremely helpful for many other Community Members who find this thread! ⭐

I love to read your valuable insights and thanks again for all your help, it is much appreciated! ❤️

Have a great day!
Bérangère

Re: Help Removing Persistent Black Line in Custom Quote Template

elizheleva — Thu, 12 Jun 2025 09:30:27 GMT

Always a pleasure 🎉