Search Results for 'css'

Hi,
Do you want this option to be constant to a block, for example, in your image, only the block that is in the center to have that live tag? If is so then it can be done by using a custom css:
Here is what you should do:
Edit the page using tagDiv Composer, select the block you want to display the live icon, then add the class cls-live – https://i.imgur.com/l67gVqU.png after that add the raw css element and set the blow css https://i.imgur.com/4rTX1e7.png

.cls-live .td-module-title a::before {
content: "LIVE";
position: relative;
z-index: 999;
display: inline-block;
align-items: center;
color: #ff2b2b;
font-weight: 600;
letter-spacing: 1px;
padding: 6px 8px;
border-radius: 20px;
}
.cls-live .td-module-title::before {
content: "";
position: relative;
transform: translateY(-40%);
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
background: #ff2b2b;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 43, 43, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 43, 43, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 43, 43, 0);
}
}

Thank you!

Hi,
If I understand correctly, you want to have the background color white, not black, for the lightbox (modal image), right? If so this can be done using this CSS:
body .mfp-bg {
opacity: 1;
background-color: #fff;
}
body .mfp-image-holder .mfp-close,
body .mfp-iframe-holder .mfp-close,
body .mfp-arrow-right:before,
body .mfp-arrow-left:before{
color: #000;
}

Hi,
The theme includes only one global option to enable or disable lazy loading. Because of this, lazy loading should be controlled from **a single location only**. If you are using a caching plugin or an image optimization plugin, please make sure that lazy loading is enabled in only one place to avoid conflicts.
Additionally, if you are using a separate image optimization plugin, it may offer the option to exclude lazy loading for specific elements. This can usually be done by targeting the element’s CSS class, for example:
.td_block_big_grid_flex_3 .entry-thumb
Using exclusions like this can help fine-tune how lazy loading behaves on your site.

Thank you!

Hi awilbanks,
The tagDiv Mobile Theme plugin no longer provides a fully responsive version. It can be used if you want a simple mobile layout, such as for a blog. However, if you are looking for a responsive version with the same layout and content as the desktop site, this cannot be achieved using the tagDiv Mobile Theme plugin.
The improved speed you are seeing is mainly due to the simpler layout. If you build the site using only one or two blocks similar to how the mobile theme works the performance results will be quite comparable.
A responsive version, however, loads all elements from the desktop layout. To achieve better speed in this case, you need to optimize CSS and JavaScript, use a reliable caching solution, and in some situations, adjust the page content itself. Pages with many blocks, images, and elements will naturally load slower than pages with fewer components.

Hi,
You can try this custom css:
body .mfp-bg {
opacity: 1;
}
Set the code in the theme panel > custom code > custom css.
Thank you!

Hi Digital2web,
The Big Grid is added by the tagDiv Standard Pack plugin (it can be installed from Newspaper → Plugins). If you do not already have it installed, we do not recommend installing it, as the plugin loads additional CSS and JavaScript files.
However, if the extra CSS and JS are not a concern for you, then you can go ahead and use it.

Hi,
I can see that you’re experiencing the same issue on desktop as well https://i.imgur.com/448L9qe.pn
Please clear the cache first. If the problem persists, check whether the “Remove Unused CSS” option is enabled. If it is, disable it and then clear the cache again. After that, please check the results.

Hi,

The image from my example is 312×424, the image should be a format 3×4

To hide an element per viewport, you first need to select the viewport – https://prnt.sc/YyMqF9AnImhs after that the element and in css tab, look for the display option – https://prnt.sc/JhtF_D7GUTLJ

Hi VOP,

There may be a misunderstanding, so I’d like to clarify my point.
I never assumed that issues could not originate from theme settings or specific elements, especially with a theme as extensive as Newsapper, where its wide range of dimensions and options can naturally lead to configuration-related problems.
What I intended to emphasize in my previous email was not a request to modify the demo or prebuilt website. Rather, I was referring to the confirmation you provided when the footer was replaced with a different one and the issue appeared to be resolved. This indicates that the root cause is likely one or more elements used within the footer section.
Most likely, the extra CSS being displayed is generated by the settings applied to those elements (such as color, size, and similar styling options).
As a next step, this can be addressed by using the option available in the theme panel under Block Settings > Inline CSS:

View post on imgur.com

Hi,
The issue you’re experiencing on mobile seems to be caused by the custom code provided for the background plugin. This code should only be applied to the desktop version.
Please go to Theme → Custom Code → Custom CSS, and move the code under Advanced CSS → Desktop.

Thank you!

Hi,
It appears this issue with the plugin is related to how the image is set in the post content and the post content width setting.
Please try this css:
#td-outer-wrap {
width: 1021px;
margin: 0 auto;
}
Set the code in the theme panel > custom code > custom css and the click will work on the background banner.
Thank you!

Hi VOP, if the problem was resolved after replacing the footer, it means the previous footer used elements that generated extra CSS compared to the other footer templates.

Him,
In case you are referring to the avatar from the comment section – https://i.imgur.com/e7lWNgk.png, then you can hide it using a css:
.comment .avatar {
display: none;
}
The css can be set on the single post template in raw css element or under the theme panel > custom code> custom css.

Hi,
I saw similar cases when the situation was caused by an extra plugin, usually a cache plugin. Please do a test and see if this situation persists when you are logged in or only when you are not logged in. If it is working when you are logged in, then you need to check the settings from your cache plugin, especially for CSS and JS.
Thank you!

Hi,
WP Rocket is one of the best cache plugins that can do this https://wp-rocket.me/google-core-web-vitals-wordpress/remove-unused-css/#section-1. Unfortunately, there is no free version. Here are othere cache plugins that can do this – https://wordpress.org/plugins/search/Unused+CSS/

Hi,
A large amount of CSS and JS is added by the tagDiv Standard Pack plugin. If it were disabled, the issues with CSS and JS would likely be resolved. However, many elements on the page and in the templates come from the tagDiv Standard Pack, so disabling it is not an option.
You should first try to address the image-related issues, as these are simpler to fix. If the score is still not satisfactory after that, you will need to consider more powerful solutions for handling CSS and JS, possibly by using another optimization plugin.

Hi,
The tool you are using is reading all the code from the source page, and the theme has some comments and the needed CSS for each element in the part that is used; this is what you see. What you can do to reduce this code is to use a good cache plugin. I see that you have WP Rocket; please check the settings from file optimization.
Settings that we recommend – https://forum.tagdiv.com/wp-rocket-and-newspaper-theme-optimization-guide/