CMS Development

TMerkel
Contributor

Default Blockquote Styles

SOLVE

Hi everyone,

 

when styling my blog content via css i don't want to use inline css with rich text editor and i don't wanna add redundant css styles to blockquotes.

 

I was wondering if there is a way to style all e.g. blockquote elements in html in design-manager? As i am using tailwind css framework it would be easy to style it with classes:

 

<blockquote class="text-xl italic font-semibold text-gray-900 dark:text-white">
    <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
</blockquote>

 

0 Upvotes
1 Accepted solution
himanshurauthan
Solution
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Default Blockquote Styles

SOLVE

Hello @TMerkel 

You can style all blockquote elements in HTML using CSS in HubSpot's design manager, and using Tailwind classes makes it even easier. Here's how you can do it:

In your HubSpot design manager, navigate to your CSS file and open it.

Add a CSS rule that targets all blockquote elements on your website:

blockquote {
  /* your CSS styles here */
}


Within the curly braces of the CSS rule, you can add Tailwind classes to apply the desired styles to all blockquote elements:

blockquote {
  @apply text-xl italic font-semibold text-gray-900 dark:text-white;
}


Save the CSS file.

Now, all blockquote elements on your website will inherit the styles defined by the Tailwind classes specified in your CSS rule. You won't need to use inline styles in your rich text editor, and you won't need to repeat the same styles for each individual blockquote element.


Thanks & Regards
Himanshu Rauthan

Digital Marketing & Inbound Expert In Growth Hacking Technology

View solution in original post

2 Replies 2
himanshurauthan
Solution
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Default Blockquote Styles

SOLVE

Hello @TMerkel 

You can style all blockquote elements in HTML using CSS in HubSpot's design manager, and using Tailwind classes makes it even easier. Here's how you can do it:

In your HubSpot design manager, navigate to your CSS file and open it.

Add a CSS rule that targets all blockquote elements on your website:

blockquote {
  /* your CSS styles here */
}


Within the curly braces of the CSS rule, you can add Tailwind classes to apply the desired styles to all blockquote elements:

blockquote {
  @apply text-xl italic font-semibold text-gray-900 dark:text-white;
}


Save the CSS file.

Now, all blockquote elements on your website will inherit the styles defined by the Tailwind classes specified in your CSS rule. You won't need to use inline styles in your rich text editor, and you won't need to repeat the same styles for each individual blockquote element.


Thanks & Regards
Himanshu Rauthan

Digital Marketing & Inbound Expert In Growth Hacking Technology
TMerkel
Contributor

Default Blockquote Styles

SOLVE

Hi Himanshu, thanks for your quick reply!

Not sure why, but the @apply rule withing the css does not work for me. And https://caniuse.com/sr_css-apply looks like we should search for a better solution 😞

0 Upvotes