Hi Guys, I’m using tagDiv Newspaper 12.3 with tagDiv Composer 3.9 and have added a custom box shadow to the theme wrap using the following CSS.
.td-theme-wrap {box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);}
On another of my sites, I’m using tagDiv Newspaper 12.4 with tagDiv Composer 4.1 and the same CSS rule has no effect.
Have there been any changes between the two setups that would stop this from working?
The closest I can get on the site running tagDiv 12.4 is a drop shadow on the main container using the following.
.td-container-wrap {box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);}
But I need the drop shadow to be the full height of the website container including the header and the footer.
Thanks
Matt
Hello Matt,
You need to use a custom code css to have shadow for all header content, footer.
You need to have set background color and check to be boxed; after you need to use this custom code, you can add it in a raw css -> https://i.imgur.com/f8523bu.png -> https://i.imgur.com/9gbDLmF.jpg
.td-header-desktop-wrap .tdc_zone {
box-shadow: 0 -13px 10px 3px rgba(0, 0, 0, 0.12);
}
.td-main-content-wrap {
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.12);
}
.td-footer-wrap .tdc_zone {
box-shadow: 0 13px 10px 3px rgba(0, 0, 0, 0.12);
}
.td-main-page-wrap {
overflow: visible !important;
}
Thank you!
Hi Anamaria,
I’ve added the suggested CSS to my custom stylesheet but it still doesn’t work for the header or footer. The only way I can get it to render properly is if I add the additional CSS, otherwise, the header and footer wrap is full width and the drop shadow renders outside of the full browser width.
.td-header-desktop-wrap {width:1164px; margin:auto;}
.td-footer-wrap {width:1164px; margin:auto;}
I have the website background colour set to #ffffff and have the boxed layout selected.
I also have the rows in the cloud header and footer templates set to ‘Default’ so they should be obeying the boxed layout setting from the theme panel but they aren’t.
The shadow works fine for the .td-main-content-wrap.
Thanks
Matt
Hi Anamaria, the workaround I’ve found is as follows.
.td-header-desktop-wrap .tdc_zone {max-width:1164px;margin:auto; box-shadow: 0 -10px 10px 2px rgba(0,0,0,0.1) !important;}
.td-main-content-wrap {box-shadow: 0 0 10px 2px rgba(0,0,0,0.1) !important;}
.td-footer-wrap .tdc_zone {max-width:1164px;margin:auto; box-shadow: 0 10px 10px 2px rgba(0,0,0,0.1) !important;}
.td-main-page-wrap {overflow: visible !important;}
The .tdc-zone needed a max-width of 1164px to remain at the boxed width along with auto margins to centre align it. This seems to have done the trick.
Is tagDiv Composer 3.9 different to tagDiv Composer 4.1? What’s caused the difference between the two sites, I’m intrigued.
Thanks
Matt.
Hi,
Yes, there are differences, but depends on how style you have on the page.
I’m glad that now the problem is resolved.
Have a great day!
