Search Results for 'css'

Hi,
It’s not that simple. If it were, all you’d need to do is take the code from there.
I hope this code does what you need and doesn’t break anything.
.td_woo_product_module .td-module-container .td-module-meta-info {
display: block;
text-align: center;
}
body .tdc-content-wrap div.td_woo_products_block .star-rating
Specificity: (0,3,2)
{
margin: 0px 10px;
}
div.td_woo_products_block div.td_woo_product_module .price {
text-align: right;
margin-right: 10px;
}

For shadow on css code:
body .tdc-content-wrap .td-module-container {
box-shadow: -1px 1px 3px 1px gray;
}
Just change the box-shadow

Hi,
For the category, you can set a border like this – https://i.imgur.com/6XLnF6m.png https://i.imgur.com/LysNRdO.png and for the other | you need to use a css like this one:
body .td-module-meta-info .td-post-author-name span {
display: none;
}
.td-module-meta-info .td-post-author-name a {
margin-right: 8px;
padding-right: 10px;
border-right: 2px solid #aaa;
}
The cs can be set in a raw css element from the tagDiv Composer and it will apply only on the page where it is set. https://i.imgur.com/cnJ0g1Q.png https://i.imgur.com/UCDbctw.png

Hi,

Item 3: I’ll review this and let you know what I’m able to do as soon as I have an update.

Item 4: It’s not possible to display both options at the same time. The option shown will depend on the item’s status:
– If the item is out of stock, “Read More” will be displayed.
– If the item is available, the “Add to Cart” button will appear. (This behavior applies only to WooCommerce Blocks.)

Regarding the shadow effect, you can check how CSS shadows work by following this guide:
https://www.w3schools.com/css/css3_shadows_box.asp

Thank you!

Please try this custom css:

body .td_block_template_9 .td-block-title {
text-align: right;
}
body .td_block_template_9 .td-block-title:after {
right: 0;
left: auto;
}

Hi,
Please provide a link to your website where I can investigate the header style and create a css for you.
Thank you!

Hi,
If you are using the header style 1, then you can use this custom css:
body .td_block_template_1 .block-title {
text-align: right;
}
Set teh code in the theme panel > custom code> custom css and all block headers that use the header style 1 will be aligned to the right.
Thank you!

Hello,

1. That is only a notice and is not an interference or an effect on the website.

2. For that, replace teh last part of css I provided (this one)
body .tdc-content-wrap .td-module-container {
background: #f9f9f9;
border-radius: 0 0 10px 10px;
padding-bottom: 10px;
}
with this one:
body .tdc-content-wrap .td-module-container {
background: #f9f9f9;
border-radius: 10px;
padding-bottom: 10px;
border: 1px solid gray;
box-shadow: 1px 1px 5px 1px gray;
}
you can adjust the code after your needs.

3. To align the stars and the price on the same line, it is necessary to change somewhere halfway through the css code above.

4. For this you need to use tagDiv Composer on the pages where you have blocks and see if the blocks you have on the website have the option to display the “View/read more” button https://i.imgur.com/eeiflV4.png

Thank you!

Hi,
I understand you are referring to the icons in the menu and where they are located, for this the easiest way is to use a plugin. Please check our documentation for how to do this – https://forum.tagdiv.com/how-to-add-icons-in-menu/
If you want to add icons without using an extra plugin, then you can do it as on News Magazine Pro where the icons are set using HTML and css https://imgur.com/C6U8BQ4 and those classes display the icons. Just make sure that you have in the header any element that is using an icon, because without it, it is possible that the HTML icons set with classes will not render on your website.
Thank you!

Hi,
Normally, you should use the Theme Builder to edit the block layout. Once you have adjusted one block, you can copy and paste the styles to the other blocks.

If you prefer to proceed using CSS, you can try something like this:
.tdc-content-wrap .td-excerpt{
padding-bottom: 16px;
border-bottom: 2px solid #e7f0f1;
}
html body .tdc-content-wrap div.star-rating {
float: left;
}
.tdc-content-wrap .td-module-meta-info{
border-radius: 0 0 10px 10px;
}
body div.td_woo_products_block .tdc-content-wrap div.td_woo_product_module .price{
margin-bottom: 0;
}
body .tdc-content-wrap div.td_woo_products_block .star-rating {
margin: 6px 0;
}
body .tdc-content-wrap .td-module-container {
background: #f9f9f9;
border-radius: 0 0 10px 10px;
padding-bottom: 10px;
}
The CSS should be added in Theme Panel > Custom Code > Custom CSS. Be sure to check all pages to confirm that it displays correctly and does not break the layout of any blocks.

Thank you!

Hi bounama17,
If you want to add icons without using an extra plugin, then you can do it as on News Magazine Pro where the icons are set using HTML and css https://imgur.com/C6U8BQ4 and those classes display the icons. Just make sure that you have in the header any element that is using an icon, because without it, it is possible that the HTML icons set with classes will not render on your website.
Thank you!

Hi,
If the template is editable with tagDiv Composer, edit it and set the class from the image on the block (cls-wpb), then make sure that the css is also loading on that template if not, then set it in a css element from tagDiv Composer.
Thank you!

Hi,
If you can provide a copy of the page where the problem can still be seen, I will check it and see what can be done. Right now, the CSS you’re using seems to be working, and everything appears to be okay.
Thank you!

Hi,
Unfortunately, I do not have a Mac to test it on a real device, and it appears that those simulators are not displaying the error.
The problems that can be on Safari are usually related to:
– position: sticky;
Parallax or “Zoom” effects in blocks:
– transform: translate3d()
– transform: scale()
Box-shadows

This uses a WebKit-specific media query that ONLY Safari matches:
/* Safari-only CSS */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-touch-callout: none) {
/* Your Safari-only styles here */
.td-module-image,
.td-image-container,
.tdb-header,
.td-header-wrap {
transform: translateZ(0);
will-change: opacity, transform;
}
.td-block-span12 .td_module_flex,
.td_module_10,
.td_module_11,
.td_module_1 {
box-shadow: none !important;
}
}
}

Hi,
I think that is teh gallery from Gutenberg not from the theme. Just make sure that all the cache is clear, and there is nothing interfering.
You need to make sure nothing is interfering with this css:
body .is-layout-flex {
display: flex;
}

Thank you!

Hi,
Please try this custom css:
.single .comments .td-form-url {
display: none;
}
Set the code in the theme panel, custom code, custom css.
I hope this will help you!

Hi,
Please provide a link to see the gallery you are using and how this is looking, maybe it needs to provide a css to adjust it after your needs.
Thank you!