topic Re: Changing style for calcite block headings in ArcGIS JavaScript Maps SDK Questions

Changing style for calcite block headings

TheGamer — Wed, 15 Feb 2023 21:23:35 GMT

I'm trying to change the calcite heading to bold. I looked through the CSS property and found there is a property called -for changing it to bold:

--calcite-font-weight-bold:600

But I'm not sure how to make the following headings bold: Heading 1, heading 2

@Sage_Wall

Re: Changing style for calcite block headings

Sage_Wall — Wed, 15 Feb 2023 23:48:29 GMT

Hi @TheGamer , I'm not really sure but I'm checking around to see if I can get you an answer :). It's not one of the css variables listed in the doc. https://developers.arcgis.com/calcite-design-system/components/block/#styles

Re: Changing style for calcite block headings

TheGamer — Thu, 16 Feb 2023 15:42:53 GMT

Hi @Sage_Wall, is it possible to change the color of the heading container, so the calcite block for heading 1, and heading 2 is set so specific color

Re: Changing style for calcite block headings

Sage_Wall — Thu, 16 Feb 2023 16:49:23 GMT

Hi @TheGamer , I apologize but I'm not that familiar with customizing and styling calcite components. I think I'm going to blindly tag @BenElan and see if he might be able to help. He knows a lot more about calcite than I do.

Re: Changing style for calcite block headings

jdyerLACSD — Thu, 04 May 2023 17:02:44 GMT

Because of the shadow DOM, changing CSS variable values is the easiest way to go. Calcite block headings' font weights use the variable --calcite-font-weight-medium, so you just need to change it's value in your CSS.

I added the class "main-block" to your Heading 1 and Heading 2 blocks, and I added the class "sub-block" to your Subheading blocks. Then I just changed the value of the CSS variable for the .main-block blocks and set it back to default for the .sub-block blocks, since those are nested and thus affected by the .main-block changed variable. Note that if you had other calcite elements inside your .main-blocks that referenced this CSS variable, you'd have to explicitly change those back to default too, similar to the .sub-blocks.