Hello, just purchased the theme and am trying to copy elements from different demos into the homepage am building.
Nice theme by the way!
So by browsing previous questions, I understand that I have to copy css from the business demo stylesheet. So my question is where do I paste this and which places do I have to reference the class (td-business) from?
Below is the block 15 css (from business demo stylesheet) that I have managed to locate. Please advise!
@media (max-width: 500px) {
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 {
min-height: 16px;
}
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .td-module-thumb {
margin-bottom: 0;
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .entry-thumb {
display: none;
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .td-module-image {
display: inline;
float: left;
}
@media (max-width: 500px) {
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .td-module-image {
width: auto;
position: relative;
}
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .td-module-image .td-post-category {
position: relative;
background-color: transparent;
padding: 0;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
@media (min-width: 768px) and (max-width: 1018px) {
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .td-module-image .td-post-category {
font-size: 12px;
}
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .td-module-image .td-post-category:after {
content: '/';
display: inline-block;
margin-left: 3px;
color: #d6d6d6;
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .entry-title {
font-size: 13px;
line-height: 18px;
}
@media (max-width: 500px) {
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .entry-title {
padding: 0;
}
}
@media (min-width: 768px) and (max-width: 1018px) {
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4 .entry-title {
font-size: 10px;
line-height: 16px;
}
}
.td-business.home .td-business-home-row .td_block_15 .td_module_mx4:hover .entry-title a {
color: inherit;
}
Hello,
In order to make the code from different demos work on another demo, you will need to adjust every piece of css as it targets that specific demo’s class. If you try to use just the business demo code, then you can add the td-business custom class on the body if the site: https://www.screencast.com/t/CyVM6G90BQ and paste the code in the custom css section
Thank you!
Just for clarification, do I have to copy the entire stylesheet of the demo or just the css of the section of the demo whose style I want to copy?
The css code I posted above refers to only the block 15 style of the business demo that I want to copy. Is it enough or I have to use the whole business demo stylesheet?
Thanks.
It is enough to copy the demo code for that specific block, but you also need to ad the custom class on the body in the custom code section. As each demo code is based on a specific body class . All the demo css starts with that body class. For the business demo the body class is td-business
Thank you!
I have done this but am not getting desired result. Maybe i am not copying the correct css for block 15, can you provide me with the css? or could it be some other issue?
thanks
If you still cannot get it to work ,you will have to get help from someone code-savvy. This represents customization and is not covered by the theme support. Usually if you need the design of a demo, you simply install that demo. If you want to replicate the design on another demo, that represents customization.
Thanks.
Come on Bogdan, this isn’t really a custom design. its part of your demo which is advertised with the theme. All the css is part of the theme files… all am asking is which section of the css to copy and where to put it.
Step by step guide, pls.
thanks
Hi,
It may require some m ore modifications. When creating the demo the team made sure that the code will only apply for that particular block, and not affect other similar type blocks.
I have modified the code (no need to enter the body class), the result is like this
– https://www.screencast.com/t/KoWO4kfScTW
Now this code once entered in the custom CSS section will apply to all blocks 15. This is the code
– https://pastebin.com/zSsr9dUb
It could be made more specific by modifying it again, for example by using the page ID in the code (it will apply only in that page)
– https://www.screencast.com/t/Xv788tPas
That page ID class will have to be entered before every line. Hope this helps.
Thanks
Yes, this is very helpful. Thank you very much.
