WP settings interfere with Accordion shortcode item title size

Hi everybody,

I have another question about Accordion shortcode plugin. Is it possible to change the cursor into a pointer or hand for clicking on the title of the writing to open the (hidden) accordion script? That would make it clearer that there’s script behind that can be read.

Besides that I am very happy with the way the plugin works. It really makes the site easier to read! Thanks!

You can easily change the default heading tag used like this (note the lowercase h3):

[accordion tag="h3"]
... Accordion items go here
[/accordion]

I’m not sure what you mean by page builder widget though. So that might be interfering with this plugin.

• This reply was modified 8 years ago by philbuchanan.
• This reply was modified 8 years ago by philbuchanan.

Thanks Phil for your reply. I had already tried what you suggested, but that did not work, probably because of the settings in de Site Origin Page Builder.
I’ll try to copy what I found here:

SiteOrigin Page Builder

Widgets

Widget Title HTML:
<h2 class=”widget-title”>{{title}}</h2>
The HTML used for widget titles. {{title}} is replaced with the widget title.

Could I add something here to solve the issue or would that completely mess up the lay-out of the site??
My theme is Catch Evolution, I’m working with WP 4.7.2 currently.
Thanks Phil.

I don’t really know anything about SiteOrigin Page Builder, but you could try replacing the <h2>...</h2> with <h3>...</h3>. If it doesn’t work, you can always change it back.

Hi Phil,
I am still trying to solve this last issue before I can launch my first website. The page builder widget setting was not the problem. I tried your suggestion to change <h2> in <h3> but nothing happened.
Could you advise me what CSS to add to the stylesheet to change the accordion-item title size (each used for a different writing on the page) to h3. I read your sample CSS. Could it be part of that?

I think I need to specify that the Accordion-item titles are titles of subsections in the script. Could that be it? Now it seems to read the accordion-title item as page title (too big).
I would very much appreciate your help here. Thanks!

/* Accordion Styles */
.accordion {
border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;

}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}

Changing the font size of the title is pretty easy. You can use this:

.accordion-title {
  font-size: 20px;
}

Simply change the 20px to whatever font size you want to use.

Hi Phil, I tried your last suggestion as well and still no luck, but in the meantime I’ve done some element inspecting and I found the following css for the Accordion-item title:

.entry-content h3 {
font-size: 28px;
font-weight: bold;
margin: 0 0 0.8125em;
}
So it is actually h3, but 28px is far too big. I would like it set to 20 or even 16px. Could you tell me how to do this?

The css for the content script is as follows:
.entry-content{
color: #444;
font-size: 15px;
font-weight: 300;
line-height: 1.62em;
font-family: Arial, Helvetica, sans-serif;

Hope you can help me out? Thanks very much.

You seem to have a CSS specificity issue then. Setting a font size on .accordion-title won’t work because .entry-content h3 is more specific. Can you provide a link to the page so that I can take a look?

Thanks for your answer Phil! I cannot yet send you a link to the page, as the website is not online yet. Could I somehow send you a print screen of the page?

I was thinking wouldn’t it be possible to just change the actual Accordion-title css, being:
. entry content h3{
etc.
etc.
}

into the already existing css: .entry-content{ (so without the h3):

.entry-content{
color: #444;
font-size: 15px;
font-weight: 300;
line-height: 1.62em;
font-family: Arial, Helvetica, sans-serif;

Could that be a solution? I feel that could work fine for me as Accordion-title.
Thanks for your help!

Without seeing the link at this point, I’m not going to be able to help. A screenshot won’t help much either as I need to dig around in the web inspector.

If you think your suggesting will solve it, why not give it a shot?

Thanks Phil for your help! I did manage to change the font size finally!
I added, when creating the accordion instead of H3, H4 or other, tag=div.
Then I changed the font size in the added css for the accordion-title in 15px and it worked this time.
I don’t know which of the two actions (or both) was successful, but I’m very happy with the outcome!

Cheers!