- NewspaperCreate Custom Code with the browser’s Inspector or the Live CSS Box
- NewspaperScroll Animation
- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- NewspaperHow to setup Twitch for Social Counter
- NewspaperModal Popup
- NewspaperFlex Block Settings Guide
- NewspaperAutoptimize Plugin – install and configuration
- NewspaperAdding Multiple Authors to Your Articles
- NewspaperDesign your Post Pages using the Cloud Library Templates
- NewspaperBig Grid Flex Settings
- NewspapertagDiv Composer Tutorial
- NewspaperTheme modules and blocks
- NewspaperThe Mobile Theme
- NewspaperCompare theme files – Winmerge tutorial
- NewspaperUsing Other Ads
- NewspaperBlock settings tutorial
- Using custom fonts
- Using typekit fonts
- NewspaperChild Theme Support
- NewspaperHow to Make the Site Faster
Hi,
To fix the layout shift caused by LiteSpeed Cache:
Go to LiteSpeed Cache > Page Optimization, then try the following:
– Disable “Load CSS Asynchronously”
– Disable “Combine CSS” and “Combine JS”
– Clear all caches (LiteSpeed + browser)
Test after each change. If the issue disappears, you’ve found the conflicting setting.
Thank you!
This is rtl.css file
Hi, how can I build this header from scratch aligned to the right? Can you help me?
https://demo.tagdiv.com/newspaper_shop_makeup/header/
I placed the rtl.css file inside the template files
Thanks
Hello,
On my WordPress site (Newspaper theme), when I activate the LiteSpeed Cache plugin, the page layout shifts to the left. When I disable the plugin, the problem disappears completely, but then the site speed decreases.
I tried changing some CSS/JS optimization settings (CSS combine, async load, etc.) but couldn’t find the exact solution.
I’m sure the issue is related to LiteSpeed optimization settings, but I don’t know which setting I should adjust.
I’m sharing the screenshot in the attachment.
Has anyone faced this problem before? Which LiteSpeed settings should I modify to fix this issue?
Thanks in advance.
Hi,
Please let me know by email how you want the button to be aligned and mention a few details about the other customizations. All of these should be possible either in the composer or with some CSS. And please make the website account I used before an admin again, or provide a new one. I will help, let me know.
Thank you!
Hello,
I recently purchased the Newspaper 12 theme from ThemeForest.
When I download the “All files & documentation” package (about 90 MB) and unzip it, the newspaper.zip file inside is only about 3 MB.
From what I understand, the full Newspaper theme should be much larger (around 50–70 MB) and contain all the necessary CSS, JS, and other assets, but my file seems incomplete.
I have tried:
Downloading both the “All files & documentation” and “Installable WordPress file only” options.
Unzipping the package and checking the folders carefully.
Downloading again from a different browser.
The problem persists — the theme file is always about 3 MB. Could you please advise me on how to get the full installable theme?
Thank you for your help.
Best regards,
If you want, I can also prepare a screenshot + folder structure to send with this email so they can see the 3 MB file and confirm the issue faster. That usually speeds up their reply.
Do you want me to make that for you?
Hi,
Newspaper theme has a responsive version, a mobile page (a separate page only for mobile) and a plugin tagDiv mobile theme (this will not display the sidebar and the content for pages should be set in the mobile editor).
However, because you are using widgets for the sidebar, the above solution will not work. If you want to have a different order of the elements in the sidebar widget, what you can do is:
– create a new widget that will be displayed only for mobile on hompages (hide it from the css tab so that it is not visible on other viewports)
– use the mobile page, here you can replace the current widget with the one you want, or you can remove the widget and add the elements with the composer tagdiv in the desired order
Thank you!
Hi,
For that add this extra css:
.td-header-template-wrap { display: grid; }
.td-header-desktop-wrap { order: 1; }
.td-header-mobile-wrap { order: 2; }
Thank you!
I bought this plugin in 2019 and installed it in the available wordpress version back then.
The plugin version is 2.3 in tagDiv Composer and 4.5 in tagDiv Social Counter.
My wordpress version is 6.4.6.
As I wrote on the title, the problem is that every day, both plugins get disabled for no reason and It breaks the website UI.
I’ve tried to search some reason in the logs but I didn’t find anything.
I’ve tried to update them to the last version but I got this error:
Fatal error: Cannot redeclare td_include_user_compiled_css() (previously declared in /var/www/html/wp-content/themes/Newspaper/includes/wp_booster/td_wp_booster_functions.php:344) in /var/www/html/wp-content/plugins/td-composer/legacy/common/common.php on line 59
Hi,
Please try this custom css:
.td-header-desktop-wrap {
display: block;
}
.td-header-desktop-wrap .tdc_zone .tdc-row {
display: none;
}
.td-header-desktop-wrap .tdc_zone #tdi_17.tdc-row {
display: block;
}
Can the CSS be set in the theme panel > custom code> advance css > phone – https://i.imgur.com/r2gFvDQ.png
Hi,
If that code should be run only once in the page ,I think it will not be easy to make the code to work in the header, since the theme is using 2 separate headers, one for desktop and one for mobile.
Please set the code on the desktop version and please provide a link to the website. I will try to see if I can create a custom css to display that row on mobile (please add a custom class on that row to be easier to be trigger – https://i.imgur.com/hofM57F.png ).
Thank you!
Hi,
To ensure your code is applied correctly, try using the following:
.title .td-module-title {
position: absolute;
background-color: red;
}
Using custom CSS will override the theme’s default styles, even if those styles are still being loaded. While manually removing the unused CSS from the theme isn’t an option, you can use a caching plugin such as WP Rocket to remove or minimize unused CSS and improve performance.
Thank you!
Hi Support Team,
I am using the Newspaper theme and currently have a MailChimp newsletter subscription form set up via the theme’s TagDiv Composer module. My client would like to switch from MailChimp to Zoho Campaigns.
I have the full Zoho embed code (which includes its own <form> markup, input fields, and button).
I need to:
Replace the existing MailChimp form with this Zoho embed code.
Ensure the Zoho form inherits the same styling (font, button colors, spacing) as the original MailChimp form, so it blends seamlessly with the site design.
Could you please guide me on the best way to do this? Specifically:
Should I use the “Embedded Form Code” field in the module, or is it better to use a Raw HTML element?
What CSS selectors should I target to apply my theme’s styles to the Zoho form inputs and button?
Are there any compatibility considerations with TagDiv Composer when using a third-party embed like Zoho?
Any help or sample CSS to maintain a consistent look would be greatly appreciated.
Thank you in advance for your support!
Thank you for the clarification.
Just to confirm: in my case, I’ve added an extra class like .title { position: absolute; background-color: red; } to an element that already has the default TagDiv Composer class .td-module-title { position: relative; background-color: black; }.
– Does the custom class .title which is add an extra class get loaded after the default TagDiv styles in terms of CSS order or not?
– If both classes are applied to the same element, and my custom CSS is overriding the default styles, does that mean the default styles are still being unwanted css code unnecessarily in css file?In such cases, is it possible to remove the default TagDiv CSS code?
Since we’re applying custom styles through an extra class, the default CSS becomes unnecessary for that element. This adds unused code to the stylesheet, making the overall CSS heavier. Is there a recommended method to safely remove or exclude such default styles? If possible?
Thanks,
Atul
Hi Atul,
1. Custom CSS applied through an extra class can override the default TagDiv Composer styles, depending on CSS specificity and the order in which the styles are loaded. If both the default and custom classes are applied to the same element, the style with higher specificity or the one loaded later will take precedence. To ensure consistency and avoid unintended overrides, it’s best to use clearly defined and unique custom classes.
2. Yes, you can use your browser’s Inspect Element tool to identify the default classes used by TagDiv Composer. However, targeting these default classes directly is not always a good practice, especially if they are dynamically generated or subject to change when modifying layouts. It’s safer and more maintainable to add your own custom classes to elements and style those instead.
3. No, using multiple CSS classes on a single element does not affect SEO. CSS classes are used strictly for styling and scripting purposes and have no negative impact on how search engines crawl or rank your content.
Thank you!
Hi TagDiv,
I have a question regarding custom CSS code. Let’s say I’ve added an extra class help of tagdiv composer to an element and applied custom CSS to it. Will this conflict with the default CSS provided by the TagDiv Composer?
For Example:-
I’ve added an extra class .title { position: absolute; , background-color: red;}
While the default TagDiv Composer class is .td-module-title { position: relative; , background-color: black;}
Will these two styles conflict with each other? or will the CSS code I’ve added to my extra class take priority?
And second question is Can I use Inspect Element to find the default CSS classes assigned by TagDiv Composer to the element, and then add my custom code directly to those same classes?
Would this be considered a good practice?
Also, could having multiple classes on a single element have any negative impact on SEO?
Thanks,
Atul
we cannot add a custom css for the theme quotes. the theme is outputting this:
.tdi_141 .tdb-block-inner blockquote p {
font-family: Chivo !important;
font-size: 48px !important;
line-height: 1 !important;
font-weight: 900 !important;
text-transform: none !important;
color: #000000;
}
but if we add something to the wp customizer, with the !important nothing happen because the code above is outputted after so we are not able to change the theme css. any suggestion on how to update the quotes css?
for example this is not applied:
.tdb-block-inner blockquote p {
font-size: 22px !important;
font-weight: 600 !important;
line-height: 1rem ! Important;
}
thank you!
We did fix it with the help of chatgpt.. byt adding:
dd_action(‘template_redirect’, function () {
ob_start(function ($html) {
$count = 0;
return preg_replace_callback(
‘/<span class=”entry-thumb td-thumb-css(.*?)”(.*?)>/’,
function ($matches) use (&$count) {
if ($count === 0) {
$count++;
return ‘<span class=”entry-thumb td-thumb-css skip-lazy’ . $matches[1] . ‘”‘ . $matches[2] . ‘>’;
}
return $matches[0];
},
$html
);
})
the tagdiv should have an add class to image element and add high priority image for this field (and all elements with image – depending on design) on order to be future proof. Thank you.
Hello,
we have setup image lazy loading with wp_rocket plugin.
for article images we have exculted class td-modal-image so as first image does not get lazzy loaded and does not cause high lasgest contentfull paing in core web vitals.
We need to do the same for homepage / category pages but there is no specific class for these images.
https://www.kynigesia.gr/
https://www.kynigesia.gr/perivallon/
#tdi_68 .entry-thumb -> This cannot work
span.entry-thumb.td-thumb-css.rocket-lazyload.entered.lazyloaded (this is the category image classes)
here are the plugins requirements:
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images
Thank you very much for your time.
PS plase add in email a.sklepas@gmail.com too!
Hi,
Please try this custom css:
.single-post blockquote.td_quote_box {
position: relative;
left: -30px;
width: calc(100% + 60px);
}
I hope this will help you!
I see, this situation is because on mobile, a different header is used with a different menu.
For mobile version you can use this custom css:
.tdb_mobile_horiz_menu .btn a .tdb-menu-item-text {
color: transparent;
}
I hope this will help you!
Hi,
Please try this custom css:
@-moz-document url-prefix() {
.single .tdm_block_image_info_box .tdm-image-description {
position: absolute;
top: inherit;
}
.single .tdm_block_image_info_box .tdm-with-button .tdm-image-description {
top: 0;
}
}
I hope this will help you!
Hi,
The code cna be accessed from live css https://i.imgur.com/wZ18rr5.png and from the Tagdiv Composer from css zone – https://i.imgur.com/Wa4uWOS.png
Thank you!
Alex from your team made some adjustments for background color on the website and on the forum.
But I cannot see the code in the custom CSS section. Please tell me where can I find the code, so I can modify it.
This is the code I’m looking for:
.bbpress .td-main-content-wrap, [class*=”woocommerce-“] .td-container-wrap {
padding-top:60px;
background:linear-gradient(30deg, #6e88e8, #ffa6c5) !important;
}
