hello,
I’ve used custom CSS for transparent page with black demo into my website.
http://www.screencast.com/t/TzpjlSfXyjy
.td-header-header {
border-bottom: 1px solid #353535;
}
.td-black .td-video-template-bg {
background-color: rgba(0,0,0,0.4);
}
.td-black .td-video-template-bg-small{
background-color: rgba(0,0,0,0.7);
}
.td-black .td-smart-list-dropdown-wrap .td-smart-next,
.td-black .td-smart-list-dropdown-wrap .td-smart-back {
color:#fff;
}
.td-black .post {
background-color: transparent;
}
.td-black .td-video-template-bg
.td-black .td-video-template-bg-small
{
background-color: rgba(0,0,0,0.8);
}
.td-black .td-main-content-wrap,
.td-black .td-category-grid,
.td-black .td-category-header,
.td-black .td-big-grid-post .td-module-thumb,
.td-black .td_module_14 .td-module-meta-holder,
.td-black .td-post-template-4 .td-post-title,
.td-black .td-post-template-6 .td-post-header-holder,
.td-black .td-post-template-8-box,
.td-black .td-smart-list-dropdown-wrap .td-smart-list-dropdown,
.td-black .td_module_mx3 .td-module-meta-info {
background-color: rgba(0,0,0,0.6);
}
.td-black .td-page-content,
.td-black .td-post-content,
.td-black .wpb_text_column,
.td-black .td_block_text_with_title,
.td-black .woocommerce #tab-description {
color: #bbb;
}
But the problem/awkward thing shows in video template.
The body seems so naked.
http://www.screencast.com/t/R04M1yxIMgI
Kindly need your help to make it looks like another post page.
Thank you.
Hi,
That post seems to be of a higher transparency then the other one you mention. I could take a look if you could provide a link to that post. Some modifications in that code will have to be made, specify how exactly you want it to look and I will try to give you a solution.
Thanks
Hi Simion,
Please take a look:
homepage: https://www.liqlo.com/
naked page: https://www.liqlo.com/renungan/archives/9272 or every page that use video template
Thank you.
So you want that to not be transparent, remove this code
– https://www.screencast.com/t/uHCVtNF7
If you want it to be like the other posts, not fully transparent, use a code like this instead
– https://www.screencast.com/t/JyWxJFsyoa
So either replace that part of the code and enter this one, or modify it with the new background property
.td-black .post {
background-color: rgba(0,0,0,0.6);
}
Dear Simion,
I’ve remove what you said, and use below code
.td-black .post {
background-color: rgba(0,0,0,0.6);
}
and it works to video template, but it makes another page looks bad
https://www.screencast.com/t/l79pg3Hxd7Rz
need help.
this is whole thing in my custom CSS:
.td-header-header {
border-bottom: 1px solid #353535;
}
.td-black .td-video-template-bg {
background-color: rgba(0,0,0,0.4);
}
.td-black .td-video-template-bg-small{
background-color: rgba(0,0,0,0.7);
}
.td_module_9 .td_quote_on_blocks {
font-size: 16px;
line-height: 20px;
font-weight: 300;
font-style: italic;
text-align: center;
text-transform: none;
margin-top: 10px;
}
.td-black .td_quote_box .single_template_11 {
background-color: rgba(33,33,33,0.5);
}
cite {
font-size: 12px;
color: #bbb;
}
.td-black .td-smart-list-dropdown-wrap .td-smart-next,
.td-black .td-smart-list-dropdown-wrap .td-smart-back {
color:#fff;
}
.td-black .td-smart-disable:hover {
background-color: transparent !important;
}
.td-post-sub-title {
text-align: center;
}
.td-black .post {
background-color: rgba(0,0,0,0.6);
}
.td-black .td-main-content-wrap,
.td-black .td-category-grid,
.td-black .td-category-header,
.td-black .td-big-grid-post .td-module-thumb,
.td-black .td_module_14 .td-module-meta-holder,
.td-black .td-post-template-4 .td-post-title,
.td-black .td-post-template-6 .td-post-header-holder,
.td-black .td-post-template-8-box,
.td-black .td-smart-list-dropdown-wrap .td-smart-list-dropdown,
.td-black .td_module_mx3 .td-module-meta-info {
background-color: rgba(0,0,0,0.6);
}
.td-black .td-page-content,
.td-black .td-post-content,
.td-black .wpb_text_column,
.td-black .td_block_text_with_title,
.td-black .woocommerce #tab-description {
color: #bbb;
}
You could try another solution, remove the code I provided and enter the previous one, the one that you used. Now the normal posts will be as before. Since the problem is for video posts enter this code along the initial code you used
.td-black .post.format-video {
background-color: rgba(0,0,0,0.6);
}
It will affect only video posts.
Dear Simion,
It works!
Thank you very much
