Hi, I am trying to figure out which class name has the (for example) module 16 for its background?
1. It is similar to this example:
.td_module_14 .td-module-meta-holder {
background-color: rgba(255,255,255, 0.9);
}
instead of the ” .td-module-meta-holder ” there has to be a class for module background? How is it called?
2. Also I need to know class name for inside-distance between module and block, because I am trying to make that distance smaller and transparent while the module contain its new background color form issue No.1.
3. Correct me if I am wrong, but I am trying to make a gap between blocks (same time preserving module image sizes) so that a page background image can be visible between all blocks while the modules stay with their given background colors.
Something like this: http://prntscr.com/9hhsm5
There, on the picture, you can notice some nice gaps between elements/blocks while the modules inside contain the ‘white’ background color.
I would like to do the same with Newspaper theme, but at the moment it seems imposible without these css classes.
Or there is another CSS method?
Thanks
Hello matijakurusic,
This module does not have a specific class for the background. By default, this background is transparent one and takes the background color of the main container, like this:
.td-container {
background-color: red;
}
The result: http://screencast.com/t/GkhkjExE1eKr
or
.td_module_16 {
background-color: red;
}
The result: http://screencast.com/t/OtNtkZWEvf
For your second request, you should use padding-bottom for to make difference between modules/blocks, like this:
http://screencast.com/t/xBRSPy7jG
.td_module_16 {
padding-bottom: 70px;
}
Also, for your third request, you have to use paddings and margins, like this:
http://screencast.com/t/drTuwyEH -> Here you can see an example. You should adjust this advice to your website.
If is not what you mean, please provide more details so I can be able to provide a more accurate response.
Hope this helps!
Thank you for the message!
Hey, thank you for help.
Yes basicly I wanna make it look similar to this: http://prntscr.com/9hmdm7
http://goo.gl/P9MvtZ
You see how every element/block have its own ‘white space’ container, slightly rounded corners and bottom (i think) 1px shadow. Very elegant.
Even better example here http://goo.gl/MsYZZE …every little block is in its own white container while there is grey lines from the background between them.
Hello matijakurusic,
Unfortunately, our theme hasn’t been designed to have this style that you have presented above. You can get this style, but it is necessary to know a bit of CSS to make this customization. Below I gave you an example for a block/module on my page. Please check this code and try to implement for your website. It is not a simple task and is required more time to achieve as you wish. If you are not aware of all steps wich you will have to follow, we recommend hiring a freelancer/developer to do this for you because we cannot provide custom work for the moment, sorry.
.td-module-thumb img {
border-radius: 20px!important;
}
.td-main-content-wrap {
background-color: lightgrey;
}
.td_block_wrap {
padding: 20px;
background: #FFF;
margin-bottom: 20px;
border-radius: 2px;
border-bottom: 2px solid #e8e8e8;
}
.td_block_wrap .td-next-prev-wrap, .td_block_wrap .td-load-more-wrap {
margin-bottom: -7px;
}
The result you should see here: http://screencast.com/t/msnGzJsZ
Hope this helps!
Thank you for the message!
Hey, this is very helpfull and with this examples you’ve provided I belive I will be fine on my own tuning everything to my desire. I have all css classes I need.
Thanks for all the help.
