Changing H6 case and padding for accordion use

[bmahoney59]

Hi-

On this page https://www.bostonhypnosis.com/x/content/4939 and other on my site, I’d like to make H6 lowercase and take the padding/line break out for use in the classic accordion dropdown.

I went into the CSS and added:

body h6, body .h6 {
text-transform: none;
padding: 0
}

Worked for the case but it didn’t work for the padding/line break. Can you tell me how I can fix this? I’m a novice with very little coding skills. I’m doing it to get headline status for SEO purposes.

Also, is there a way to change the lines/dropshadow on the new version of the accordion?

Thanks.

-Brian

[prakash_s]

Hello Brian,

Thanks for writing to us.

The heading tag doesn’t render padding. It renders the margin on the browser. To remove the margin and make the text lowercase you need to add custom CSS code under X/Pro —>Theme option —>CSS.

h6 {
    margin: 0;
    text-transform: lowercase;
}

Regretfully, there is no option to remove the box-shadow of the accordion. It would require custom CSS code to remove the box-shadow.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[bmahoney59]

Great. Thanks for that. I’m still not clear if I can get this to do what I want, though.

Is there a way I can get the first (custom H6 line) to not line break after the + sign? If so, can you tell me how (sorry to ask for CSS example code, but again I’m a newbie and would rather not hire a developer for just this one quick thing). Any help you can offer much appreciated!

-Brian

[ruenel]

Hello @bmahoney59,

The heading tag h6 display as block. And by the way, you are only allowed to insert plain text. Adding an HTML tag will create issues with the styling.

Best Regards.

[bmahoney59]

Sorry if I’m being dense here. Is there a way I can have the displayed text for each accordion item tagged as H6 in either the classic or new accordion? Without a line break after the plus sign/arrow? If so, can you tell me how I could do that? Thanks.

[ruenel]

Hello @bmahoney59,

Use the new Accodion element instead. With the new accordion element, you have more element controls and it is possible to insert the <h6> tag in the accordion item titles. Just insert this:

<h6 class="man">Accordion Item 1</h6>

Best Regards.

[bmahoney59]

Great. Thank you!

[prakash_s]

You are welcome @bmahoney59