Accordian Border

[Symbiosis]

Hi there,

I want to remove all borders of accordian. Though the border shadow and border radius is set to 0 in the elements all borders are still there as seen in the screenshot “border accordian”.

So I tweaked css as follow on the page which I achieve the result as I want. But I want the .e73-10 to be leverage element to affect all accordian in the website. I tried $el (replacing .e73-10) on the same page but it didn’t work. How do I change to take effect?

.e73-10.x-acc .x-acc-item {
overflow: hidden;
border-radius: none;
background-color: rgba(255,255,255,1);
box-shadow: none;
}

Another question, can you explain with the css code in the browser as per screenshot? As mentioned I changed the border-radius to the class above to none but the border-radius is still there in the css code.

Many thanks

[lely]

Hi @Symbiosis,

The issue is CSS specificity. We need to override border set per element with !important
We can do it using an ID, but that means we still need to add an ID on each accordion element. Since you want to do it sitewide we can do it like that with !important.

You can add the CSS on Theme Options > Global CSS

.x-acc .x-acc-item {
border-radius: 0 !important;
background-color: rgba(255,255,255,1);
box-shadow: none !important;
}

You will notice I did not add element generated class to make it more general.

@Symbiosis

Another question, can you explain with the css code in the browser as per screenshot? As mentioned I changed the border-radius to the class above to none but the border-radius is still there in the css code.

It should be set to 0 and not none.

Hope this helps.

[Symbiosis]

Hi there,

Many thanks. Can you explain in more simple words the difference between using $el and no $el as a global css please? I understand that the $el is used so that if there is a change on the page it is more efficient to customise the website as the number of .exx can be changed if there is a new section or column is added onto the page. Can you add on to the global css or it is only for the specific page?

Thanks.

[friech]

Hi @Symbiosis,

Yes, you’re correct I think you already understand how the Element CSS feature works (for other users you can review that here)

In simple words the $el.x-acc .x-acc-item selector is only applicable to that specific element, and so it will only affect that element alone.

And this .x-acc .x-acc-item selector will affect all the Accordion elements on your page, so you need to add this on the Page > CSS area or Theme Options > CSS area.

Now here is the catch, this .x-acc .x-acc-item selector will not work straight away because that selector is weak, that is why Lely added the !important statement to make that selector more stronger. If you’re interested in learning CSS, you need to understand how CSS Specificity works. You can start learning CSS specificity here.

On a different note, you do not really need Custom CSS because the Accordion Element provides you the border, border-radius, and box-shadows settings.

• 

Cheers!