Help removing drop shadows

Support
#1

Hello,

I have a few sections that have drop shadows, and I’m uncertain how to remove them. I labeled them (1-3) toward the top of the page. Please assist, as we want to stick with a flat look.

Also, I’m looking for X/Pro demo content, similar to the “OUR CLIENTS LOVE US” section of this theme (very bottom of this page): http://treethemes.net/themes/maple/demo1/ Could you recommend where I could find something similar? I have combed through most all of the X/Pro’s demo content and I haven’t been able to find something suitable.

Thank you!

#2

Hi Mary,

Thank you for writing in, to remove the shadow from those image grid, please add this to Theme Options > CSS

.x-bnb-image-grid > a {
	box-shadow: none !important;
}

To remove the shadow on the Accordion element, please inspect your accordion and under the items tab, set the box shadow color to transparent.



The closest to that element is the Tabs element, but then you still need to customize the heading label to replace it with an image.

Hope it helps,
Cheers!

#3

Thank you, those options worked for removing the drop shadows.

Would you have a suggestion how I could customize the heading label of the tabs to be similar to that style? Or if there is a demo block on any page that you could recommend, I could try there.

#4

Hi There,

This only works with the V2 Tabs element. Use an image tag on the tab’s label

<img src="IMAGE URL HERE" />

Use an image with the right size. You might need custom CSS for positioning the label images,

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

#5

I created an example, located at the very top of our page. It looks bad on mobile, the images are very small, and I’m unsure how to remove the drop shadows and boxes’ outline, I would like the design to be accurately centered, and I’m unsure how to add the auto select when hovered over. Please assist with some suggestions.

#6

Hi @marymmccauley,

Please try adding this CSS to your accordion’s element CSS.

$el .x-tabs-panel { 
  box-shadow: none !important; 
}

Hope this helps.

#7

That did help remove the box shadow, thank you! But I would also like to remove the black outline around the bottom text’s area, and would like each section to be auto selected when hovered over, and the images look very small on mobile, so I need some assistance on how to achieve this. I really appreciate your help.

#8

Hi again,

  • To remove the border too just replace the previous code with the following one:
$el .x-tabs-panel {
    box-shadow: none !important;
    border: none;
}
  • To auto select the tab on hover, add the following code in the Theme Options > JS: 
jQuery(document).ready(function($){
	$(".x-tabs-list ul[role='tablist'] li > button").hover(function(){
		$(this).click();
	})
});
  • To increase the size of the images in smaller devices, add the following code in the Theme Options > CSS: 
@media screen and (max-width: 767px) {
    .x-tabs-list ul[role='tablist'] li > button img {
        min-width: 50px;
        min-height: 50px;
    }
}

Please note that increasing the size of the images will bring out the horizontal scrollbar for the navigation.

Hope this helps!

#9

That was so helpful. One last question, is there a way to center the tabs? They’re aligned slightly to the left.

#10

Nevermind, I think I got it!

#11

Hello There,

We are just glad that you have figured it out a way to correct the said issue.

Best Regards.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.