- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hello!
There is only an option to center all the fields in that element from here: https://app.screencast.com/jFlid5mfeQNnz
Or you can set an extra class in the General tab and add some CSS code.
Thank you!
Hello,
I would like to insert an image in a row that is displayed 100% horizontally.
If I use a “Single Image” and set it to “Image Width = 100%” nothing happens. Only entering width and height in pixels results in a change. But now the image is displayed distorted.
If I use a “Single Background Image” and set it to “Image Width = 100%”, it will be displayed “fullwidth” in the row. But there is a big empty space under the image that I can reset using CSS. When I look at the front end and zoom in responsively, the image doesn’t stay in line, but goes beyond it. In addition, the elements underneath are pushed over the image.
https://datagrafik.de/download/Single-Image.jpg
How to handle that?
Thanks for Feedback
Bernd
Hi, I have this very ugly banner showing on my newspaper 12 themed website. I use Jetpack for data collection and security and now it looks like my theme and Jetpack are not communicating. How do I fix this?
” Deprecated: Hook custom_css_loaded is deprecated since version jetpack-13.5! Use WordPress Custom CSS instead. Jetpack no longer supports Custom CSS. Read the WordPress.org documentation to learn how to apply custom styles to your site: https://wordpress.org/documentation/article/styles-overview/#applying-custom-css in /var/www/virtual/mmafrettir.is/htdocs/wp-includes/functions.php on line 6078″
Hello,
You can use the WP Rocket and use this option to load CSS, not remove CSS https://imgur.com/vHqKn9Y https://www.andraware.com/wp-rocket-for-newspaper-theme/
Thank you!
Hi Yuriy, I believe that you are referring to that movement when the page is loading, if so, this is until the page is loading and the style is applied.
Usually this can be resolved using some plugins as cache plugin (one of the best is WP Rocket, but there are also free plugins for cache as WP Super Cache, Litespeed …), CDN, a plugin to get/download locally the Google fonts to reduce the time loading from google – https://wordpress.org/plugins/host-webfonts-local/
Now for the block elements that are loading using ajax that is the only effect that the theme has right now, so if it’s not to your liking, it can be remove with some custom css and eventually it can be add a new css for a better user experience.
I hope this will help you!
Hi Stefan Richter,
1. Indeed, for the moment the only solution is to use a custom css to remove the section “More From Author”:
.td_block_related_posts .td-related-right{
display: none;
}
The code should be set in the theme panel > custom code> custom css
The option ‘Show Author Box’ should also apply on mobile if is used the responsive version, but if is using a different plugin for example amp or mobile theme, the layout will be different and you’ll need to check the options from those plugins.
2. The tagDiv Cloud Library is a special plugin only for Newspaper, this theme is more complex then Newsmag (this is a simple boxed theme for users that just want a blog, news website without needed to edit templates and using only enabled/disable options), but also the price is different.
3. I believe you are referring to this – https://i.imgur.com/Fg3fZPz.png most of the time those situations appears when you are using a plugin that is optimizing the images and those are no longer using the image size that they should have. Also another situation is when the main image is smaller then the thumb, in this situation the image should have at least 1024 width.
4. I just checked this on my install and seems to be ok – https://i.imgur.com/xGzVku1.png maybe you have something that is interfering.
5. If you set a caption for a image, then this will be displayed – https://i.imgur.com/RCrw40D.png – https://i.imgur.com/C0HGJ2s.jpeg – https://i.imgur.com/7o4Vykp.jpeg also on smart list – https://i.imgur.com/9g8PGQU.jpeg – https://i.imgur.com/VfgbSsv.jpeg
6. The Newsmag version 5.4.3 should work with php 8.0, 8.1 and 8.2 the versions bigger then 8.2 have not been yet tested.
Thank you!
Hello!
1. Check this guide: https://forum.tagdiv.com/modal-popup/
For customization and other services, you can contact our custom work team here: https://tagdiv.com/premium-customization-services/.
2. I think you should add the style as well in the raw html or raw CSS. A shortcode can be inserted also by using the element called “Column text” or “Text with title”. “Column text” and “text with title” elements have a button called “edit content” and if you click on that button, the WP Editor will open, and you can add some text/code/shortcode there. Close the WP Editor from X, save the changes from Composer and view the page to see the changes. It could be possible to be a conflict there, that’s why the shortcode do not display as you want. Please check.
3. You should build it to be responsive from the plugin source. Or you can use some CSS style added with the help of a raw CSS element from the tagdiv Composer. Check the guide: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
4. We have 3 options available for mobile versions that you can use:
1. Responsive version: A responsive version of your website looks similar to the desktop version. TagDiv Composer is used to edit the page.Click on the mobile viewport: https://www.screencast.com/t/XDQJedlggSB. There, you can see your mobile version and edit or adjust the elements to look better.
2. Mobile pages: https://tagdiv.com/newspaper-10-3-7-update-brings-customizable-and-fast-mobile-pages
3. Mobile theme plugin: The Mobile Theme is a performance-optimized theme included in the main Newspaper theme that only loads on mobile devices. It comes with its own templates and designs for pages, posts, categories, etc., so your current templates from the desktop theme will get converted to the mobile theme layout. Please see https://forum.tagdiv.com/the-mobile-theme/ and https://forum.tagdiv.com/mobile-theme-introduction/ for more information.
A full explanation is here: https://www.youtube.com/watch?v=SpGkOnJeNZY
If you need to use mobile version 1 or 2, then you need to uninstall the Mobile Theme plugin and AMP.
Thank you!
Hello,
Usually, there is a raw css and looks like this when you edit the template https://i.imgur.com/YdFSjK2.png
Thank you!
Hello again. Just a small question:
I noticed that there’s an occasional “extra class” name on some of the demo pages.
For example, this page
https://demo.tagdiv.com/newspaper_week_pro/?s=the
Section = BROWSE OUR EXCLUSIVE ARTICLES!
–
Extra class = td-week-slider
This seems to make the navigation / carousel arrows appear on the outside.
I don’t want to change anything. I’m just curious about where this CSS / code lives in case I ever need to edit it (or change the class name).
Thank you!
Hello Franck,
Please use this code .tdm-btn-lg{
line-height: initial;
}
Set the code in Theme panel>Custom code>Custom css
Thank you!
So I started this site in WP back in 2006…yes really. Over the years I have made numerous them changes, and have over 8k posts. Currently using GeneratePress PRO, been using that for about 7 years now. However I thought I would try Newspaper since I have owned a copy for years and never used it.
It’s not as powerful as GP, but honestly for what the site is, I think NewsPaper 12.x should work fine. One problem is that I keep seeing two images on each post, as I have always used a feature image for other themes.
There does not seem to be a way to disable this as in GP where I can specify a lot more variables on the format of a post.
Here is a link to ONE of the THOUSANDS of posts where this occurs. Also see an error where the sidebar is. Any help would be appreciated. I am comfortable with editing css and the php files if that will solve the problem.
https://nevisblog.com/fresh-mango-salsa-recipe-caribbean-style.html
Hi,
To improve the look, you can do it with a plugin https://wordpress.org/plugins/bbp-style-pack/ or custom code CSS.
Thank you!
Hello
Yes it’s the separator block from guthenberg.
All my posts has the separator with Wide Line.
And it worked since then… So I don’t why I should do adjustment in the CSS
Regads
Hello!
Do you mean the separator block from Gutenberg, right?
Make sure you’ve set the default style there and not a wide line.
Style it with some CSS code: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!
Hello,
You can change the design and style only with custom code CSS. You can not edit the forum page with tagdiv Composer.
Also, I can not access the page -> https://i.imgur.com/lve4vKz.png
Thank you!
Hello Georgi!
Check the CSS tab of the element in the tagdiv composer, and there you can see the background color option. Also, check if you set the background color to white in the theme panel settings. We have some settings for the rows and different stretch sizes: https://www.screencast.com/t/bsbB5P97A
Thank you!
Hello,
Please let me know how you have created the pages. If you have added the content text and image with tagdiv Composer, then the option to change the color is set on each element https://i.imgur.com/c9DoQqV.jpeg; if you made in the Gutenberg editor, then only with custom code CSS can be changed.
Also, since I see that you are just starting with your website, I recommend not using standard templates (header, footer, single, category, tag, author, search, 404) and also avoiding blocks 1 to 25 or big grid blocks, as these can be replaced. I recommend using cloud templates and flex blocks, which have more options and are more flexible.
Thank you!
Hello Matt,
I recommend updating the theme to version 12.6.6 and checking for malware.
After you update the theme, you need to update the theme plugins too.
In the worst cases, the settings in the theme panel may be lost (there have been isolated cases), in these cases, after the theme plugins that were previously used are activated, you will have to use a backup for the theme panel -> https://forum.tagdiv.com/import-export-theme-settings/
You could consider reinstalling the WordPress version, and checking for this plugin wp-zexit.php. It might be wise to inspect via FTP if it doesn’t appear in the WordPress -> Plugins. Additionally, using Wordfence to scan the website and remove unknown users would be prudent.
Change admin passwords and delete admin accounts you are not familiar with;
– Delete any weird/unknown plugins;
– Delete the weird/unknown themes;
– Clean unfamiliar Theme Panel injected code (example – https://i.imgur.com/4q70kCv.png);
– Clean WordPress files (example – https://i.imgur.com/stJCqiK.png)
Please block /wp-json/tdw/save_css
If an attacker wants to target this URL /wp-json/tdw/save_css they can do so. Even if the website uses a different theme, the attacker can still try that URL. We could add an option to be able to enable/disable the Live CSS, it will be considered. But for now in order to remove it this can only be done with a modification to the composer plugin. I think that all that removing it requires is to comment this line of code – https://prnt.sc/RtwvL5Nc4ikR -> https://prnt.sc/ymZmhdUfp57U But as I mentioned, the attacker can still try to access the URL.
If you want, you can contact our custom work team here, and they can help you update the theme safely: https://tagdiv.com/premium-customization-services/
Thank you!
I understand that you use the TagDiv Newspaper theme which is not a very performant theme, but at this point, you don’t have an option to change the theme.
That being said, during the audit (even while working on the staging environment) I did find numerous issues with your website mainly related to the below 2 points:
1. Images
2. JS
Your team can severely improve this by incorporating my feedback below. I understand that this response is quite technical, so I highly encourage you to share this with your internal dev team. Now let’s dive deeper.
## Images
Let’s start with the images, as it’s the biggest problem for your website.
### Problem 1 — Images:
So currently across your website (home page, single article page and other pages) images are not actually being loaded via HTML image (img) tags. Instead, they are being loaded as CSS background images.
This forces the browser to download all the images at the same time despite not needing them. Also, lazy-loading these images is almost impossible as all images are CSS background images with no unique class attached. Here are a few examples:
Though I’ve only shared a couple of screenshots, but this problem remains across your website on every single page. Be it the home page or any other pages. Every single page on your website have this exact same issue when it comes to images.
#### Solution:
All these span that are basically holding the images as CSS background images should be replaced with HTML img tag with proper width, height, class names attached to them.
Different images should also have unique classes attached to the img element to easily target them like:
– slider-thumb-img
– three-article-row-img
– featured-article-img
and so on…. (these class names are hypothetical just to give you and your team and idea)
This would make the images to be properly understood by the browser (thanks to the img tag) and also render and lazy load them properly. Also the proper width and height attribute would also maintain the CLS from image size shifting.
## Problem 2
The second problem that is related to your website images are image sizes.
Firstly, I can see that you are loading images from static.profootballnetwork.com making them not to be served from https://www.profootballnetwork.com/ and as a result not getting the benefit of Cloudflare Enterprise caching (higher cache HIT ratio and lifespan) and image optimization.
Secondly, you are loading way bigger images on your web pages asking for them to be scaled down and served to the user. In doing so, the browser has to spend a lot of time to downscale and render/paint the images.
This is why, it is always best to create multiple image sizes for your website using add_image_size() – exactly the image sizes that you need and then use them accordingly where needed.
Here are a few examples:
https://i.imgur.com/Ddl7gp7.jpeg — https://i.imgur.com/YGIjOmi.jpeg
https://i.imgur.com/O3KSAu0.jpeg — https://i.imgur.com/CmO72p8.jpeg
https://i.imgur.com/iHbHJap.jpeg — https://i.imgur.com/KLVA4HY.jpeg
This is not only making the size of your webpage insanely larger but also hurting your CWV and website performance.This issue is also present across your website, across every pages.
#### Solution:
Use add_image_size() to create custom image sizes that are needed for your sites and then serve images with HTML img tags with that exact image size that is needed for that section.
Alternatively, your team can also leverage Cloudflare Images to automatically resize the images directly on the cloud. More info: https://developers.cloudflare.com/images/transform-images/transform-via-url/
## Problem 2 — JS Scripts:
Thanks to Tagdiv Newspaper theme, the website is highly reliant on javascript and especially jQuery requiring the jQUery library to be loaded along with other jQuery scripts for the slider and other things to function properly. Screenshot: https://i.imgur.com/WELMdYl.jpeg
But a huge chunk of JS is coming from the ad networks, so I would highly recommend you to reach out to your ad provider asking them to reduce as much JS load as possible and possibly delay ad loading to reduce the JS impact on the website from the ads.
As you can see, on my footer I have the border set on the bottom row but it’s only going half way across the screen. I’ve tried a bunch of different things to fix it but haven’t had any luck so far. Below are the my settings for the row in question.
Any help would be greatly appreciated!
Mission accomplished but i had to do it with functions.php coding and an extra line to create a shortcode and css because custom module is not displaying images. I even tried forcing it with functions.php.
Hello!
Edit the page with the tagdiv Composer, click on the row(header), go to the CSS tab and there you can change the background color.
Thank you!
Hello,
1. The forum design is from the plugin; you need to do the design using custom code and the options from the plugin. Please check those guides https://codex.bbpress.org/bbpress-styling-crib/ and this topic https://forum.tagdiv.com/topic/bbpress-css/
2. The theme doesn’t have blocks for the forum. You can use blocks from the cloud and set the shortcodes with column text on the page.
3. So, if you add the shortocode in the single post template, it works as you want, right?
The link works https://bbpress.org/forums/topic/how-to-customize-bbpress-forum/ for me -> https://i.imgur.com/XBCQlgM.png
Thank you!
Why am I getting a 404 error with these links? How to remove
404 Not Found https://concursossc.com.br/wp-content/plugins/td-composer/assets/fonts/td-multipurpose/tdc-header-template-titletd-multipurpose.svg style: @font-face
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/clear-sky-d.png style: .clear-sky-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/few-clouds-n.png style: .few-clouds-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/scattered-clouds-d.png style: .scattered-clouds-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/clear-sky-n.png style: .clear-sky-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/few-clouds-d.png style: .few-clouds-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/scattered-clouds-n.png style: .scattered-clouds-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/broken-clouds-d.png style: .broken-clouds-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/broken-clouds-n.png style: .broken-clouds-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/shower-rain-d.png style: .shower-rain-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/shower-rain-n.png style: .shower-rain-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/rain-d.png style: .rain-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/rain-n.png style: .rain-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/thunderstorm.png style: .thunderstorm-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/snow-d.png style: .snow-d
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/snow-n.png style: .snow-n
404 Not Found https://concursossc.com.br/wp-content/plugins/td-standard-pack/Newspaper/assets/css/images/sprite/weather/mist.png style: .mist-d
Hello,
The options from the theme panel are for standard templates. If you have cloud templates, you must make all the changes using tagdiv Composer https://forum.tagdiv.com/tagdiv-composer-tutorial/ -> https://forum.tagdiv.com/how-use-tagdiv-cloud-library-templates/. Also, if the block is not from our theme, then to change the color, you need to use a custom code CSS.
Using our theme, you can choose from 3 mobile versions
-> mobile responsive => https://www.screencast.com/t/oJ2ShOp47
-> mobile theme plugin => https://forum.tagdiv.com/the-mobile-theme/
-> mobile page => https://tagdiv.com/newspaper-10-3-7-update-brings-customizable-and-fast-mobile-pages/ The option that you need to use.
Suppose you created the mobile pages with tagDiv Composer. In that case, when you install the Mobile Theme plugin, your pages will be overwritten by the plugin (the mobile theme comes with its templates for page, post, category, etc, so your current templates from the desktop theme will get converted to the mobile theme layout, the page content is made without builders in mobile editor => https://www.screencast.com/t/xbgZG8kH also, the options that are provided to edit the mobile theme version are limited (this keeps the things simple)).
This is a video about Responsive Newspaper Theme, AMP & Mobile Theme, Mobile Pages & Templates -> https://www.youtube.com/watch?v=SpGkOnJeNZY.
So, the mobile responsive is what you see when that you select the viewport on phone => https://www.screencast.com/t/matV17hH, so some settings may apply for each viewport(where is the border blue), and others are not(where the border is black).
The mobile page has the mobile templates from Cloud Library => https://www.screencast.com/t/YCcZ8rL8
The Mobile responsive version of the theme and the mobile page editor can be edit with tagDiv Composer, the mobile theme plugin cannot.
For example, you can have the mobile theme plugin activated and use the mobile page/mobile responsive version for the homepage/pages, but for the categories pages/404 page, you can’t use the mobile page/mobile responsive version if you have the mobile theme plugin activated.
Thank you!
