Integrity boxed theme - Remove outside border+shadow

[maomadsen]

Hi

I’m working on https://rubow-test.one

With the X theme and Integrity. I have chosen Boxed site layout, but I would like the outer border and shadow to disappear.

Please advise.

BR M

[marc_a]

Hi Mads,

Thanks for reaching out.

To remove the outer border and box-shadow, you need to add this CSS code in your X > Theme Options > CSS.

.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
    border: 0;
    box-shadow: none;
}

Hope that helps and let us know how it goes.

Thank you.

[maomadsen]

Hi @cramaton

Thank you for the fast response! Worked like it should.
I would also like to remove the shadow around the top menu. Can you help with that as well?

/M

[prakash_s]

Hello @maomadsen

Thanks a lot for the appreciation it helps us to serve you better.

To remove the shadow of the menu you need to add this CSS code in your X > Theme Options > CSS.

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
}

Thanks

[davidalexander]

Hey @cramaton!

I’m also using the Integrity Stack on my site and would like to remove the box-shadow and the border. I have added the above custom CSS code but it hasn’t worked.

Please, would let me know what I’m missing.

Ultimately, I would love to achieve the clean style of the Crafty Demo site, which uses the Integrity stack.

Please advise.

Thanks,
David

[christian]

Hey David,

That’s because the area you want to remove the box-shadow is different so you need a different code. The following code should do the job but please note that we do not provide theme customization as part of theme support. If you need further styling that could not be achieved by the theme options and builders, you will need to learn CSS and also learn how to use a browser’s element inspector so you can get the selectors that you need.

In the near future though, we will be having a Layout Builder which will enable you to create and style your own archive and single post templates without coding. More details about the Layout Builder was posted in our June Status Report here: https://theme.co/content/status-report-june-02-2020

.entry-featured,
.entry-wrap {
    box-shadow: none;
}

Hope that helps and thank you for understanding.

[davidalexander]

Hey @christian!

Thanks for the prompt reply!

Sorry, mate! I’ve added the new Custom code provided, but it’s made no change.

Have I entered it in the wrong place?

Please advise.

Thanks,
David

[christian]

Hey David,

I don’t see the code added in the page. Global CSS codes should be added in Theme Options > CSS.

If it doesn’t help still once placed in the Global CSS, the most probable cause of that is syntax error in other custom CSS. If this is the case, remove all other CSS and add the code I provided.

You can then paste all your CSS in CSS validation tools like http://csslint.net/. That will tell you if you have errors in the CSS.

Please note that we can’t provide more help with CSS codes as that is beyond the scope of our theme support. If you need more customizations, please consider learning CSS and usage of the browser tools.

Thanks.

[davidalexander]

Hey @christian!

C’mon, don’t be that guy!

If we all learn CSS, who would you have as customers? And what then is the purpose of a support forum?

Just imagine… if Apple said to all of their customers who purchased a MacBook or an iPhone, learn to program?

Sorry to have been a bother, mate! But just like Apple’s Genius Bar, I thought this Forum was set up to provide a similar form of support for customers who have purchased one of your products.

Have I got it all wrong? – Please, set me straight if I have!

Thanks,
David

[ruenel]

Hello @bbigdave,

If you are looking to remove the box shadow for your header, you will need to edit your custom header and remove the box shadow in the bar settings.

And if you want to remove all the borders and box shadows that you have in your page, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. So basically you will have to update the code given by @Christian which would likely be like this:

.entry-featured,
.entry-wrap,
.widget ul, .widget ol,
.widget ul li, .widget ol li,
.entry-footer a,
.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a {
    box-shadow: none;
    border: none !important;
}

Any other borders and box shadows like what you have in " About David Alexander " should be removed by editing your global block.

Best Regards.

[davidalexander]

Hey @ruenel!

I’m so sorry but I do believe this one request has somehow gone all over the place.

Ultimately, all I was hoping to get some help with is getting my site using the Integrity Stack to look as clean as the Crafty Demo, with no shadows and or borders around recent post and pages.

If this is a complicate task, then please let me know and I would be happy to leave it as is until I have Learned HTML and CSS.

Thanks,
David

[ruenel]

Hi @bbigdave,

Thanks for the clarification. Yes, it would be best that you also have a basic background about HTML and CSS so that you can easily apply whatever changes are necessary to fulfill what you have in mind. Just one thing to remember is that the Crafty home page is using the default header with a custom page built with Cornerstone (Pro Editor). In your site, you are using a custom header with the blog index as your homepage which is why this needs custom HTML and some CSS to override the default Integrity styling.

Hope this explains your issue briefly.

[maomadsen]

Hi @PrakashS

Sorry for the late reply. Unfortunately this didn’t solve my problem. There is still a shadow around the menu. Any thoughts?

/M

[maomadsen]

Hi @PrakashS

Figured it out. No need for help

Thank you.

/M

[marc_a]

Hi Mads,

We are glad that you are able to fix your issue.

Thank you.