Search Results for 'css'

Hi,
Don’t edit theme LESS files.
Those variables are compiled before use, so changing them has no effect unless you rebuild the theme (not supported).

Use a child theme. Open your child theme folder and edit the style.css (or a new file like breakpoints.css), add:

/* Custom mobile breakpoint */

@media (max-width: 575px) {
/* your mobile rules */
}

/* Between 576–767px (old mobile range) */

@media (min-width: 576px) and (max-width: 767px) {
/* your tablet-like rules */
}

Make sure your CSS loads last.
In functions.php:

add_action(‘wp_enqueue_scripts’, function() {
wp_enqueue_style(‘my-breakpoints’,
get_stylesheet_directory_uri() . ‘/breakpoints.css’,
array(‘td-theme’), ‘1.0’);
}, 999);

Clear caches (theme + browser) and test at 575px width your new breakpoint now applies.
I hope this will help you!

Hi,

A quickfix is to enable the lockers for the events, please check in the theme panel and you should see your events post type and enable the locker for them here https://prnt.sc/2vRjAnM-IliL This just enables the option to use lockers for the events, you don’t have to actually set lockers for them, just enable that option.

As a PHP version, you can use 8.3.
Related to pagespeed for medium speed you can use this guide https://forum.tagdiv.com/how-to-make-the-site-faster/ (a free cache plugin that can provide cache and also optimize the js and css, optimize the images and convert in webp format). Use forom the theme panel this option – https://i.imgur.com/9DgGmdf.png
For premium cache plugins we recommend WP Rocket – https://forum.tagdiv.com/wp-rocket-and-newspaper-theme-optimization-guide/

Thanks.

Hi,

You can use on your homepage this css:
.td_flex_block_1.tdi_97 #tdi_97 {
max-height: 580px;
overflow: overlay;
}
It can be set in a raw CSS, after that you can change the number of articles that will be displayed, save the changes in tagDiv Composer and check it on the frontend.

Thank you!

Hi,
I see that there are 2 images that no longer exist and the website stays after them for around 17 seconds – https://i.imgur.com/XWXtUGZ.png edit the homepage using tagDiv Composer https://i.imgur.com/0lqtmry.png select the column of this element – https://i.imgur.com/gMWgwNp.png and in css tab remove the background image after that go to footer and select the row, then in css tab remove the background image – https://i.imgur.com/FKFswXp.png after that, save the schnages and clear the cache, the situation should be resolved.
Let me know the results!

Hi,

I see that there is an image that is trying to be loaded on the website, but this no longer exists https://i.imgur.com/xp9ya43.png, so resolving this situation will improve the speed a bit. Here is what you need to do, edit he homepage with tagDiv Composer, go to the footer zone and select the row, then select the css tab and click on remove text that is after the background image option – https://i.imgur.com/Ptl7VNu.png. After that, save the settings.

Also, to have a very fast website, you’ll need an excellent cache plugin and most of the time those are not free, for example WP Rocket – https://forum.tagdiv.com/wp-rocket-and-newspaper-theme-optimization-guide/ and use a CDN so your website is protected and the bots will no longer get on the website to consume extra resources.

Thank you!

Hi,
Please replace the above css with this one:
.tdb_single_content a {
position: relative;
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--insight-turquoise), var(--insight-turquoise));
background-repeat: no-repeat;
background-size: 100% 6px;
background-position: 0 100%;
transition: background-size 0.25s ease;
}
.tdb_single_content a:hover {
background-size: 100% 100%;
color: white;
transition: background-size 0.25s ease, color 0.25s ease;
}
.tdb_single_content a:active {
background-size: 100% 100%;
color: white;
}
The results should be https://i.imgur.com/Vs4P8sR.png

Hi,

There is no option for this, but it cna be done using a custom css on the column you need to achieve that type of scroll. For this I will recommend setting on that column an extra class and use that class to set the css, then use the css for min-height and set it in pixels and add overflow. I can help you with the code if you can provide a link to the website.

Thank you!

Hi,

It can be done using some CSS. Like this https://prnt.sc/7FJuPhPDjLS7 Here is the code https://pastebin.com/RNguVhei You can adjust the color if needed.

Thanks.

Hi,

Normally you don’t need code to have a wider content. You can simply stretch the rows to the needed width https://prnt.sc/FaV_ZlcE8Ise Just make sure that there is no general background image https://prnt.sc/_jUYpUUi2FOe or color https://prnt.sc/QP8iVrxcYkOR set in the theme panel, or else the theme will be boxed and it will not be possible to stretch it with any settings.

But if you must use CSS to stretch the content, the effect of the code may be visible while the page loads. You could load the CSS code faster, in the head using style tags https://prnt.sc/FePhAZdXhdCV This should load the code fast so the effect of the code loading should either be reduced greatly or removed entirely.

Thanks.

Hi,

Normally each element has its own default CSS, which is replaced if the element is customized in the composer. However, it’s strange that CSS used by the column title element affects other headings. The CSS is applied via a unique class, not targeting headings. Like in the code you provided, the unique class is .tdi_51, and unless this class is set on a heading then the CSS should not apply to it.

Could you provide a link to where I can see this issue? If you can’t provide a link in the forum, please send us an email at contact@tagdiv.com and we can continue there.

Let me know.

Thanks.

Hi,

Maybe there is a margin or padding on the row, or the column that contains the revolution slider element, in the composer. If you check in the CSS tab of the row and column https://prnt.sc/ds3Rm_FgcFKe and there are values set there, please remove them.

If I could see the issue on the website I could inspect it and see what exactly is creating the space. The website is in maintenance mode however. If you want you can send us an email at contact@tagdiv.com and provide admin login for the website, so I can log in and check the issue directly.

Let me know.

Thanks.

Hi,
Do you want it to be display on mobile like on desktop?
For this use this custom css:
body .td-trending-now-wrapper {
flex-direction: row;
}
The css should be set in the Theme panel > Custom code > Advance css > Phone section https://i.imgur.com/qIt6QRS.png

Hi,
I see, it appears that the auto ads have the maim-um position and the css can not overlap it, so I thin the solution her will be to Here are the simple disable Auto Ads in the header section using your AdSense account:

Log in to your Google AdSense account.
– Go to Ads-> By site.
– Find your website and click Edit.
– A live preview of your site will open.
– In the preview, click on the header area.
– A small menu will appear, select Exclude area.
– Repeat if you want to block other sections.
– Click Apply to site (top right) to save changes.

Hi,
Yes this can be done using a special css, like this one:
.td-post-content a {
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
}
.td-post-content a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 50%;
height: 2px;
background-color: currentColor;
transition: width 0.3s ease;
}
.td-post-content a:hover::after {
width: 100%;
}
The css can be set global in theme panel > custom code> custom css, or locally in single post template, edit it with tagDiv Composer and drag a raw css element and set the css in it.

Hi,

Please try this custom css:
#wpadminbar [id*='wp-admin-bar-tdb_template'] .tdb-templates {
overflow-y: scroll;
max-height: 80vh;
}
You can set the css in the theme panel > custom code > custom css

Thank you!

Hi,

This needs to be done on the css set with teh code :after, for example:
.remove.remove_from_cart_button:after {
content: "پاک کردن ";
font-size: 12px;
font-family: fantasy;
padding-right: 6px;
}

Thank you!

HI,

1. Try this css: https://i.imgur.com/b4jZv2k.png
body div.td_woo_products_block div.td_woo_product_module .price{
margin-bottom: 0;
}
body div.td_woo_products_block .star-rating {
margin: 6px 0;
}

2. Here are 2 options, the one mentioned before using the flex block 1, this has the options for almost everything to set, but in case you want to have better control, then you can use a modul,e this can be created https://forum.tagdiv.com/modules-builder-newspaper-theme/ as you like to be and use a flex builder to display it https://forum.tagdiv.com/flex-block-builder-flex-loop-builder/

Thank you!