- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hi,
I’ve set the svg logo https://prnt.sc/_nvAucjCkl0_ and it seems to display correctly https://prnt.sc/XG9SXm3D1zJ6 But without the CSS code you entered in the theme panel it would not.
The thing is that header style 7 does not have any size limitation for the header logo https://prnt.sc/UZxlj1nDUGw2 It will be displayed as it is originally, limited only by the width of the theme. Your code will limit it however.
I didn’t leave the svg logo set, in case there are problems that I am not seeing. I set the old one back. But you could set it again, and with the code from the theme panel the logo should be displayed better.
Thank you!
Hello!
Please try to reinstall the page from the Cloud Library to have all the elements there, and for mobile, you can order the columns/inner columns: https://app.screencast.com/Tt6i5SOMhh8lH
Please note that you should write 1,2,3 for each column/inner column.
You can also build a mobile page that will be different than the one from desktop: https://tagdiv.com/newspaper-10-3-7-update-brings-customizable-and-fast-mobile-pages/
Or you can have double elements, hide the one you do not want on the desktop, and show it on mobile. Each element has this option in the CSS tab: https://app.screencast.com/NOSucmHCgrxmw so the inner column is hidden there: https://app.screencast.com/zOIFfWefTMz0t
The order should be like this: https://app.screencast.com/jqpfISJpCr86T
I hope that helps you!
Thank you!
Hi,
Usually, the color and image are set on the row, so please edit with tagDiv Composer and select the row and go in the tab CSS https://i.imgur.com/UkgqKNM.jpg -> https://forum.tagdiv.com/topic/background-color-of-the-main-menu-be-changed/
Thank you!
I see page: https://forum.tagdiv.com/mega-menu/
I’m having some issues configuring the megamenu after importing the “animals” demo.
In the demo, the megamenu looks fine. The subcategories are properly organized, and on mouse hover, the posts update accordingly (see image below).
https://tinyurl.com/2craxygq
However, on my site, the subcategories appear one below the other, and the mouse hover functionality doesn’t work (see image below).
https://tinyurl.com/28x3pd92
Since I didn’t build this site myself, I want to make sure there’s no incorrect code, but I couldn’t find anything in **Appearance > Customize > Additional CSS** or in the theme’s CSS files.
How can I fix this?
tnx
Hello!
You can use and modify the demo as you like. If there is no section on mobile, please add it on your end and ensure the block is not hidden. Also, the demo has CSS code there. Please check it on your mobile viewport. If you can provide screenshots, I can help you efficiently. Also, you can contact us via email at contact@tagdiv.com and provide wp-admin (URL and credentials). So I can log in and help you as soon as possible.
Thank you!
Hello Dalvkot!
Please note that page speed is not covered by the support team: https://forum.tagdiv.com/newspaper-theme-support/
You need to optimize your website:
https://forum.tagdiv.com/how-to-make-the-site-faster/
Here are some tips to help you enhance your WordPress site’s page speed:
Optimize Images: Compress images before uploading them to your WordPress site. You can use plugins like WP Smush or EWWW Image Optimizer to automatically optimize images without losing quality.
Utilize Caching: Implement caching to reduce server load and speed up page loading times. WordPress caching plugins like WP Super Cache, WP Rocket, or W3 Total Cache can generate static HTML files of your pages to serve users instead of dynamically generating them each time.
Minify CSS and JavaScript: Minify your CSS and JavaScript files to remove unnecessary characters and reduce file sizes. This can be done manually or through plugins like Autoptimize, WP Rocket or W3 Total Cache.
Enable GZIP Compression: Enable GZIP compression on your server to reduce the size of files sent from your server to users’ browsers. Most hosting providers offer GZIP compression, but you can enable it through plugins like WP Rocket or W3 Total Cache.
Optimize Database: Regularly clean up and optimize your WordPress database to remove unnecessary data and improve performance. You can use plugins like WP-Optimize to automate this process.
Limit External Requests: Minimize the number of external requests your website makes by reducing the use of external scripts and widgets. Each external request adds overhead to your page’s loading time.
Enable Lazy Loading: Implement lazy loading for images, videos, and iframes so that they are only loaded when they are visible on the user’s screen. This can significantly reduce initial page loading times.
Optimize Server Response Time: Choose a reliable hosting provider with fast server response times. Consider using a content delivery network (CDN) to serve your content from servers closer to your users.
Regularly Update Plugins and Themes: Keep your WordPress core, plugins, and themes updated to the latest versions to ensure compatibility with the latest performance optimizations and security patches.
Limit the number of backups: https://app.screencast.com/M5Wco6Td6nymr
By following these tips, you can significantly improve the page speed of your WordPress website, leading to better user engagement, higher search engine rankings, and overall improved performance.
Check the theme requirements: https://forum.tagdiv.com/requirements-for-newspaper/
We have some hosting plans, please check: https://tagdiv.com/wordpress-hosting/
Thank you!
I’m almost ready with my new website (new design of a already existing, also with your theme) but there are some little things making me crazy, I’m not able to resolve it by myself.
1. Please have a look at the last FlexBlock1 before footer. And take a look on mobile view. Something wrong there, the block shows two small columns, instead one article after another in one column.
2. Where can I change CSS settings of subtitle, like font, color and so on.
Did fill in at theme panel some additional CSS, but didn’t take effect.
Domain: http://www.2024.gartenwoche.ch
Hello,
There is a custom code js and CSS, you can delete it here -> https://i.imgur.com/ErcdVN7.png you need to delete the extra class on the row/ inner row and inner columns/columns -> https://i.imgur.com/zqoRfxz.png -> https://i.imgur.com/O4o1Xvm.png -> https://i.imgur.com/9BxDYDT.png
Thank you!
Update – to make the styling the same use this CSS in the live CSS – https://pastecode.io/s/9r2hr5rg
Hey,
I am sharing you my WP Rocket settings and I think they might be useful for you:
ON THE FILE OPTIMISATION TAB
1. Activate Minify CSS Files
2. Optimise CSS Delivery > Remove unused CSS with these exclusions:
(.*).tagdiv-type(.*)
(.*).bhcrow-(.*)
3. Minify Javascript Files
4. Load Javascript Defered with these exclusions:
\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js
5. Delay Javascript Execution with these exclusions:
\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |’|”|>)
tagdiv_theme.min.js
tdTrendingNow.js
tdPopupModal.js
tdBlocksArray
hammer.min.js
tdbMenu.js
tdLoadingBox.js
tdb_p_autoload_vars
blockClass
tdAjaxCount.js
tdTabbedContent.js
tdStickyRow.js
tdSmartSidebar.js
OneSignalSDK
Important – delaying Javascript will make your ads load after any movement on the page so if you just reload the page they will not be loaded as soon as you move anything on the page it will load them immediately. For me this isn’t a problem.
ON THE MEDIA TAB
1. Activate Enable for images
2. Activate Enable CSS for background images
3. Exclude your logo
4. Activate Add missing file dimensions
5. Activate self host fonts
ON THE PRELOAD TAB:
1. Activate preload
2. Enable link preloading
3. Prefetch these:
//fonts.googleapis.com
//www.googletagmanager.com
//www.googletagservices.com
//tpc.googlesyndication.com
//use.typekit.net
//netdna.bootstrapcdn.com
//www.google-analytics.com
//ajax.googleapis.com
4. Preload fonts – /wp-content/themes/Newspaper/images/icons/newspaper.woff
ON THE DATABASE TAB
Enable everything without scheduling auto cleanup
ON THE HEARTBEAT TAB
Enable it and make everything reduced
Important – if you are self hosting your site on nginx you can enable this https://github.com/SatelliteWP/rocket-nginx – this enables Nginx to serve directly previously cached files without calling WordPress or any PHP
Important – if you are self hosting your site on nginx you can enable FastCGI and Redis (use redis cache plugin and nginx helper). When it comes to FastCGI MAKE SURE TO ENABLE SEPARATE CACHE FOR MOBILE AND DESKTOP OTHERWISE IT WILL WORK BADLY!
Important – if you have a large installation and you notice that your queries become slow (e.g. search page takes a lot of time to load or non-cached pages load for more than 1-2 seconds) you can buy Scalability Pro and Super Speedy Search from here https://www.superspeedyplugins.com/shop/ for me this plugins changed the way the theme worked immensely. My non-cached pages loading time dropped form 10 seconds down to 1-2 seconds.
Important – WPRocket offers a plugin that converts all your images to webp format and this is also crucial for your page speed. Their plugin works well for my site.
I hope this is useful for you!
Hi,
If you want to use Remove Unused CSS, you need to exclude many CSS files, so please use as I provided the screenshot.
Thank you!
Ok, so if I use “Remove Unused CSS” without issues it’s the same or better than “Load CSS async”?
Hi,
We recommend Load CSS asynchronously because sometimes the Remove Unused CSS can cause issues.
Have a great day!
Hello, my settings were different. With yours is much better.
There’s only one thing about css.
WP-ROCKET suggests to use “Remove Unused CSS” rather than “Load CSS asynchronously” as in the setup you sent me.
What do you think about?
Hello
My taskbar doesn’t have TagDiv CSS Analyzer Tool. I also disabled all no Tagdiv plugins to make sure that is no third party plugin issue.
TagDiv CSS Analyzer Tool missing see your image https://i.imgur.com/5X3KhRk.png
Regards
Alex
Is there a way to set the background opacity level in the mega menu? If not, do you have a css snippet that would only affect the mega menu opacity level, leaving the default or chosen color unaffected? I am using the Old Fashion theme
Thank you.
Hi,
You didn’t add this code to solve the issue with the images from what I see, please add the code in theme panel -> custom code -> custom CSS
.wp-block-image + .wp-block-image,
.wp-block-image + .wp-block-gallery {
margin-top: -25px;
}
Thank you!
Hello,
After extensive 6h testing, I was able to identify the root cause of the issue: The Critical CSS files in Autoptimize apparently generated faulty rules, which led to conflicts with the cache. After deleting the Critical CSS rules in Autoptimize Plugin, caching started working properly again on all pages.
I wanted to share this with you so that you can potentially help other users with a similar problem more quickly. If there is a way to ensure that Critical CSS rules regenerate automatically or to improve error detection in Autoptimize, that would certainly be beneficial.
If you have any questions or need further details, please feel free to reach out.
Thank you for your support!
Best regards,
Greg
Hello,
The Tags in each post is not RTL for these is using the WordPress RTL,
The issue is just in Mobile!
May i ask your advice for the CSS for that fix please?
For exmple post:
Thank you
Hi
I have resolved the issue.
I use https://flywp.com/ and their helper plugin as some preset “optimisations” namely;
Clean Navigation Menu
Remove unnecessary classes from the navigation menu.
It appears that this was messing with the themes classes and messing up the CSS.
Thanks so much for your help. Much appreciated 🙂
Hello!
Ensure the row under that space has no margin in the row’s CSS tab. Verify the elements from there, too.
Let me know the results!
Thank you!
3. I have limited knowledge of code. Can you help me with CSS code?
4. https://www.imagevenue.com/ME1A26P6
5. Thank you.
Hi,
For the classic editor plugin, the sidebar can be removed only from them files, for this you need to go in -> wp-content/themes/Newsmag/editor-style.css and comment these lines of css -> https://i.imgur.com/MIuDveD.png
If you are using the Gutenberg editor, then there will be no sidebar in editor, this will look like this -> https://i.imgur.com/F6PUBhU.png
I hope this will help you!
Hello,
Yes, use one posts loop and how many flex blocks you want.
You can hide it with a custom code CSS, or change the block header type.
Thank you!
Hello,
3. This is how the menu works https://i.imgur.com/6LbZP4j.jpeg If you want you can do some custom code CSS and show it as you want. You can use Chatgpt to help you.
4. Please provide a post where you have this margin extra.
5. You can use a separator element, or set a border bottom -> https://i.imgur.com/2vjtgK5.jpeg
Thank you!
