Hi, I searched the forum/documentation a lot and couldn’t find an answer to this. In the blocks that have the titles overlaid on the picture (Big Grid, Block 14, etc.) there is a shading gradient so the white post title text can be read. Unfortunately this really dulls down the pictures and makes them look dark. Especially when compared to a non shaded block like Block 5.
Is there a way to stop the gradient from going so far up the pic and just be behind the title or a way to just have a solid color background for the text?
thanks!
Brad
Hi,
I’m not sure if you are referring to the background gradient or opacity, so I provide to you the default css code:
.td-big-grid-overlay:after{
height: 100%;
opacity: 1;
background: linear-gradient(45deg, rgba(205, 132, 36, 0.1) 0%, rgba(25, 166, 124, 0.1) 100%);
}
.td-image-gradient:before{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}Please change it like you wish in Live Css Editor from Chrome and add the result to Theme Panel > Custom Css: http://screencast.com/t/7z6tHgshi
I also give you a solution maybe you like it: http://screencast.com/t/wApIMEk58
.td-big-grid-overlay:after{
opacity: 0.7;
}
.td-image-gradient:before{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 90%);
}If you want to add background to the title please use this css code: http://screencast.com/t/CvtX6DMEAcpe
.td-big-grid-post .entry-title a{
background-color: red;
}Hope this helps!
Awesome, thank you! What are the equivalent (.td-big-grid-overlay and .td-big-grid-post) entries for the blocks? Is it something like .td-block-15-overlay?
thanks for the support!
Brad
One other question. When adding the background behind the title is there css to put some padding at the front and end of the title so it doesn’t start and stop right with the word?
UPDATE: FIGURED IT OUT!!
Relating to
.td-big-grid-post .entry-title a{
background-color: red;
padding-left: 4px;
padding-right: 4px;
}
thanks!
Hi,
Glad that you managed to solve this!
Thanks!
Sorry, Alin, that was just referring to the title background padding.
I still haven’t figured out how to apply the css to module MX1 or module 1, 2, 3, etc.
Can you provide the correct tags for editing any of the modules/blocks? Similar to this…bolded part is what I need.
.td-big-grid-overlay:after{
opacity: 0.7;
}
.td-image-gradient:before{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 90%);
}
thanks!
Brad
Hi,
Please use Chrome and inspect blocks/modules that you want to change: http://screencast.com/t/Kqn6OMhPM
For example like above block 14: http://screencast.com/t/Vc2v5mcs
.td_module_mx1 .td-module-thumb a:last-child:before{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 90%);
}Thanks!
I didn’t think about that. Thanks, Alin. I was able to customize exactly how I want it!
Hello! I have gone back to using the Big Grid element on Newsmag and the CSS provided no longer works. I assume with the 2.xx rewrite some of the module and block names were changed. Can you please help provide the proper syntax I should use to replicate this from before
.td-big-grid-overlay:after{
opacity: 0.7;
}
.td-image-gradient:before{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 90%);
}
Thank you!
Brad
Hi,
Please try this custom css and see if it works:
.td-grid-style-1 .td-module-thumb a:last-child:before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 90%);
}
It works on Big Grid style 1.
Thanks!
Alin this worked great! Thank you!!!
