Disable shadow-box effect for Sparkling WordPress theme

Love the theme.

How do I disable the shadow-box effect around the sidebar and other items?

I have a child theme.

Hi @gcneal,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the style.css file of your child theme.

div.well {
    box-shadow: none;
}

Best Regards,
Movin

Thank you

This removed one of the important shadows but it seems where I have used the Easy Bootstrap Shortcake plugin code in the sidebar I still get a shadow around some elements.

I will link my site below.

Thanks again

You can try removing that shadow by using the below CSS code.

#secondary .panel {
    box-shadow: none;
}

Thanks Movin

That works for the panel. I have a list to so thought the following should work but it doesn’t seem too

#secondary .list {
    box-shadow: none;
}

thanks again

Could you please share the screenshot of that list?

Hi Movin

Please see attached

Thanks again

Hi Movin

I went back to the main sparkling theme instead of using a child theme and this is how the list shows as default.

Gaps in between the items, although its fine in the main content area.

Thanks again.

I can see the gaps between the items on your site as shown in the attached screenshot.

Could you please tell me specifically by sharing the page URL from your site where it’s not displaying correctly.

Hi Movin

The site is in the private reply high up :). If you click on the contact page you can compare a list in the main content vs a list in the sidebar.

The format seems completely different.

Thanks again.

Hi Movin

I changed to the Twenty Sixteen theme and the list seems to show like it should in the sidebar (see image below).

I changed back to the parent sparkling theme and the gaps in the sidebar bar appear again, the only active plugins active are Black Studio TinyMCE Widget and Easy Bootstrap Shortcake.

Thanks again

The site is in the private reply high up :). If you click on the contact page you can compare a list in the main content vs a list in the sidebar.

I visited the contact page on your site but i don’t see the list in the content area of that page as shared in your screenshot. See what i get in my shared screenshot.

I changed back to the parent sparkling theme and the gaps in the sidebar bar appear again

If you don’t want gaps between lists in the sidebar then just try using the following CSS code.

#secondary .widget ul li {
    margin-bottom: 0;
}

Thanks Movin

I had a column plugin used in contacts page but disable it, to see if it was causing the problem.

I had a similar code but different code which appears to give the same effect (see first image on this page) but I still get the shadow effect with your code instead.

I visited your site but didn’t see any box shadow effect there as shown in the attached screenshot.

Please advise.

Hi Movin

I can clearly see some effect around the border (maybe not shadow, it could be to related to the added space the theme seems to add to lists in the sidebar).

Again you can see a list on a normal page which out issue.

Thanks again.

It’s not the shadow effect but the double border issue which you can resolve by using the below CSS code.

#secondary .widget li:last-child {
    border-bottom: 1px solid #ddd;
}
#secondary .widget ul li {
    border-bottom: 0;
}

Thank you Movin

Thats what I was after.

Thanks again :slight_smile:

You are most welcome here :slight_smile: