Background

Hi there

It really depends on what you want to do. I have been playing around with the CSS and the dropshadows are from Elementor CSS. So, I’m convinced that it’s somewhere in Elementor.

https://ibb.co/vVxZ0Zy -> If you change the first line there “box-shadow” to what I have in my screenshot, the dropshadow goes away.

Unless you want to change the color of the dropshadow.

What I usually do in those cases is either go to the “Custom CSS” section of the Customizer and add the new CSS there or install SiteOrigin CSS and let that overwrite the CSS of my theme.

I use Astra for another website and it has a lot of options but not all options… So, it might be that Astra (at least the free version) doesn’t offer what you want to do ;).

That’s all I could figure out for you. Maybe another forum user sees something I’m overlooking. But good luck, hopefully my answer is somewhat useful to you.

Agree with @nekojonez that it depends on what changes you want to make. You’ve got 2 pieces of the puzzle to consider (Astra theme and Elementor builder). Use browser dev tools to identify the piece you want to change, find its selector and class, then modify. Place the CSS code inside the Customizer or Additional CSS (for block themes).

Two examples below are related to Elementor’s variable for background color.

For the overall background of the page, change the variable to a new color, like this:

.elementor-165080 .elementor-element.elementor-element-ee0ab3f:not(.elementor-motion-effects-element-type-background),?.elementor-165080 .elementor-element.elementor-element-ee0ab3f > .elementor-motion-effects-container > .elementor-motion-effects-layer?{
/* --- original background color used a variable --- */
/* --- background-color: var(--e-global-color-astglobalcolor5); --- */
background-color: #8fa985;
}

To change the background for the main content area:

.elementor-165080 .elementor-element.elementor-element-b7165bc:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-165080 .elementor-element.elementor-element-b7165bc > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
/* --- background-color: var(--e-global-color-astglobalcolor5); --- */
background-color: #cadee5;
}

• This reply was modified 7 months, 1 week ago by askdesign.

Hi again, I am back. I couldn’t find where the code was you mentioned but anyway I think I need to be clearer as to what I want to do.

Here is a sample page

https://thebeatbali.com/features/bali-beach-side-clubs/

I want to get rid of the entire box look of the two sections on all posts. The large main section on the left and right. So each section is without any box, just the text and image can be seen. And also being able to change the size of the section area. Make it wider or narrower.

Like the home page

https://thebeatbali.com/

Where do I find that option? I tried everywhere. Thanks

If Astra and/or Elementor don’t have the options to make these changes, you could do it with your own custom css. To modify anything, you can place the code inside the Customizer section:
Appearance > Customize > Additional CSS.

To eliminate the?boxes in the main contain area, I think you just need to get rid of the box shadow, like this:

.elementor-165080 .elementor-element.elementor-element-b7165bc > .elementor-element-populated {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
}

To eliminate the?boxes in the sidebar, try this:

.elementor-165080 .elementor-element.elementor-element-5385ed1 > .elementor-element-populated {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
}

Use browser dev tools to identify the piece you want to change, find its selector and class, then modify. Place the CSS code inside the Customizer section.