- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hi.
I have some questions regarding editing my website. Before I designed my website, as boxed. Recently, I decided to make it full-width. But whatever I do, I can not return to the previous view, as the Newspaper default theme (only width, not colors or menu style).
Also, I’m using Contact forms and I customized them using custom CSS in order to make their design similar to my website’s design. But now, when I want to make some changes, despite deleting all custom CSS, I don’t see any changes in my Contact forms. Seems something is wrong either with them, or with the custom CSS section, I don’t know. Contact forms work normally.
So, could you please help me return to full-width view and also check the custom CSS section, whether there are any problems there?
Thanks in advance!
Current implementation can be at test site here. The element is part of a four-column menu embedded in the page, not the actual header: https://dirgemagazine.com/
I was able to target the desktop modal for styling through CSS after inspecting the elements of the popup. I was not able to do this with the mobile version.
I tried using the Moda Pop-up element, but I found it confusing in this context and couldn’t corrolate it to this modal.
I activated the Mobile Theme early on and it enacted some unsavory effects (such as setting all post types to mobile), which persisted even after deactivation. I had to fix that by executing a code snippet. I can’t tell if this mobile header login modal was imposed by the Mobile Theme.
I set the colors and fonts while Mobile Theme was activated, and it had no effect. I deactivated mobile theme again, and there was still no change.
I either need to know the specific classes that inform this mobile modal, or I need to know where I can go to actually style it. Nothing I have tried has seemed to affect it whatsoever.
Of secondary concern, the mobile version of the modal includes an arrow that, when clicked, invites me to use the menu creator, which I do not understand at all in this context, and does not seem intentional.
Thank you.
Hi,
There is no newspaper-core.zip, I think there is a misunderstanding.
Did you manage to install the theme? – https://forum.tagdiv.com/install-via-wordpress/ (make sure you install only the theme zip inside the package you have downloaded from the themeforest account https://help.market.envato.com/hc/en-us/articles/202821510-Theme-is-missing-the-style-css-stylesheet-error)
After the theme is installed you need to go to Newspaper > Welcome section and you can install from there the tagDiv Composer and tagDiv Cloud Library plugins – https://i.imgur.com/LyI1bNb.png after that you need to activate the theme – https://forum.tagdiv.com/newspaper-6-how-to-activate-the-theme/ and only after that you can install the demo you mentioned – https://forum.tagdiv.com/installing-demos/
Also, all theme plugins are provided under Newspaper > Plugins tab – https://i.imgur.com/6NoXVCc.png
Thank you!
Hi,
The button that is set on desktop menu is separate from the menu, right? if so on mobile if you are using the mobile menu it will be display only the elements from menu, so you’ll need to create a menu element with an extra class and use that class to set a css for that element menu to look like a button.
Another solution is to use a popup element and create your own mobile menu page – https://forum.tagdiv.com/modal-popup/ or simply copy the element from desktop and past it after the logo on mobile.
Thank you!
Hi,
Unfortunately for the moment we do not have a theme update ready and as I see this featured is still on waiting list.
What I can do is if you need is to provide a css for that element to make it as you want. For this I will need a link to a page were you have this element and some details for how you’ll like to be,
Thank you!
Hi,
You can use this custom css -https://i.imgur.com/W7UPGHN.png
.postid-24357 .custom_html-2{
display: none;
}
The css code can be set in the theme panel and you can duplicate it and just set the article id, example:
.postid-1 .custom_html-2,
.postid-2 .custom_html-2,
.postid-24357 .custom_html-2{
display: none;
}
Hi,
Unfortunately using the mega menu there is no option to achieve that, sorry. Maybe it can be done using some custom css and js, but I do not know if it is a good solution.
An alternative is to use a popup menu and set on it a page and this can be set on full width – https://forum.tagdiv.com/modal-popup/
Thank you!
Hi Lamiaa,
Unfortunately there ae no options to customize the payment form, but what can be done is to hide the option fields that you do not need (for the moment this is possible only with css and only for optional fields – https://i.imgur.com/h8CtKyz.png).
Thank you for your understating!
Hello,
Our website, http://www.ltl.lu, uses a megamenu that is based on pages. Currently, the megamenu appears under the main menu.
What I would like to achieve is for the megamenu to start at the top edge of the screen, placing itself behind the main menu and other header elements — in effect, making the megamenu flush with the top of the viewport, but layered beneath the header.
Here’s how the menu currently looks:
https://www.ltl.lu/menuquestion/ltl.gif (animated GIF)
And here’s an example of the effect I’m aiming for:
https://www.ltl.lu/menuquestion/lcd.gif (animated GIF)
I tried adjusting the z-index values, setting the menu and other header elements to z-index: 999, and the megamenu to z-index: 0 using the following CSS, but that didn’t work:
.tdb-mega-menu .sub-menu > li {
z-index: 0;
}
I hope my explanation is clear — but please let me know if anything is unclear or if you need additional information.
Best regards,
👋 Hello tagDiv team & community,
I’m currently building my personal digital magazine site using Newspaper Theme 12 and I’ve run into a strange layout issue that I can’t seem to resolve on my own. I’d really appreciate any help or insight you can offer!
🔍 The Issue:
The footer and content on post pages appears misaligned to the left side — but only on:
Category pages
Single post pages
It renders perfectly fine and centered on:
The homepage
Custom static pages (like “Privacy Policy” “Join Syaz+,” etc.)
🧪 What I’ve Tried:
Zeroed out margin/padding via tagDiv Composer
Checked all footer row/column settings (full width, centered content, etc.)
Applied custom CSS (example below), but this affects global layout and causes issues elsewhere
Inspected with dev tools — the td-container inside .td-footer-wrapper seems to shift left on posts/categories
You may view the issues when visiting my site on an actual mobile phone, weird thing is: the issues doesn’t show up on the tagDiv Composer’s mobile view.
🌐 My Website:
https://syaz.co
⚙️ Theme Version & Setup:
Theme: Newspaper 12
Composer: tagDiv Composer
Footer: Custom Footer Template from tagDiv Cloud Library
No caching/minification plugins running while debugging
💡 Desired Outcome:
I’d like the footer to remain centered consistently across all page types, including:
Category archives
Single blog posts
🛠️ Optional CSS I tried (not reliable):
body.category .td-footer-wrapper .td-container,
body.single-post .td-footer-wrapper .td-container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
🙏 Any help is appreciated!
I’m hoping someone might’ve encountered this before — or if tagDiv devs could shed some light on what might be causing this layout behavior across different templates.
Thanks in advance,
Syazwan Razali
Hi,
This is because by default there is a margin bottom, what you can do is in css tab to set margin bottom 0 or the 16px (the px you want to has as space) – https://i.imgur.com/cjMwC7B.png
Thank you!
Hi,
If I’m right is the problem isolate on a single page, right?
The line of conde you mentioned seems to be related to css tab on desktop version (if I’m right, you have set on an element a value that is not correct normally in that place you should use numbers with px and % for example 10px or 10% – https://i.imgur.com/f2tmw4E.png). Please use tagDiv Composer to check the css tab for your elements to see if there are other types of values then those mentioned by me.
Thank you!
Hi,
Unfortunately there are no options to do this. It can be done only if you change or overwrite the css from the theme (here is a similar topic – https://forum.tagdiv.com/topic/modify-breakpoints/) but if is all about the navigation menu, then you can set it and use it on each view port you want and hide it from those you do not want. This can be done on cloud header with tagDiv Composer.
Thank you!
Hi Calin,
Thanks for the clarification!
I’m using a Cloud Header but with the standard mobile menu, and your suggested CSS for the expanded subcategories works perfectly in this setup.
Also, your explanation regarding the social icons makes sense. Since I want to keep them on desktop but remove them on mobile, the CSS approach is exactly what I needed.
Appreciate the quick and helpful support!
Aham, now I got it, you are referring to the left and right margins, for this select the element and in css tab set -24 let and right margins, like this – https://i.imgur.com/3t7lFkT.png
Hi,
i have disabled the modal pop up element that is inside of demo (is for subscribe and follow to social) but i continue to view and have many 404 error.
With ahrefs i see many 404 error for this link:
<a href=”switching-plans-wizard/” title=”See pricing”
and also for
<div class=”tdm-social-item-wrap”><a href=”tagdivofficial” rel=”nofollow”
For me is impossible to find where i can disable. Please explain with much more details
I paste here the source code that you can view from source page:
<style>.tdm_block.tdm_block_button{margin-bottom:0}.tdm_block.tdm_block_button .tds-button{line-height:0}.tdm_block.tdm_block_button.tdm-block-button-inline{display:inline-block}.tdm_block.tdm_block_button.tdm-block-button-full,.tdm_block.tdm_block_button.tdm-block-button-full .tdm-btn{display:block}.tdc-row .tdi_30 .tdm-btn{height:auto;padding:15px 25px}@media (min-width:768px) and (max-width:1018px){.tdc-row .tdi_30 .tdm-btn{height:auto;padding:12px 20px}}</style>
<style>.tdc-row .tdi_31{padding:15px 25px;height:auto;line-height:1;font-family:var(–tt-extra)!important;font-size:16px!important;line-height:1.2!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:0.5px!important;height:auto}.tdc-row .tdi_31 i{font-size:16px}body .tdc-row .tdi_31 .tdm-btn-icon:last-child{margin-left:10px}body .tdc-row .tdi_31{background-color:var(–tt-accent-color)}body .tdc-row .tdi_31:after{background-color:var(–tt-hover)}body .tdc-row .tdi_31 .tdm-btn-text,body .tdc-row .tdi_31 i{color:#ffffff}.tdc-row .tdi_31 svg{fill:#ffffff;fill:#ffffff}.tdc-row .tdi_31 svg *{fill:inherit;fill:inherit}body .tdc-row .tdi_31:hover .tdm-btn-text,body .tdc-row .tdi_31:hover i{color:#ffffff;-webkit-text-fill-color:unset;background:transparent;transition:none}body .tdc-row .tdi_31:hover svg{fill:#ffffff;fill:#ffffff}body .tdc-row .tdi_31:hover svg *{fill:inherit;fill:inherit}body .tdc-row .tdi_31 i{color:#ffffff;-webkit-text-fill-color:unset;background:transparent}body .tdc-row .tdi_31:hover i{color:#ffffff;-webkit-text-fill-color:unset;background:transparent;transition:none}.tdc-row .tdi_31:before{border-width:0px;border-style:solid}@media (min-width:768px) and (max-width:1018px){.tdc-row .tdi_31{padding:12px 20px;height:auto;line-height:1;font-size:14px!important}}</style><div class=”tds-button td-fix-index”><span class=”tdm-btn-text”>See pricing</span><i class=”tdm-btn-icon td-icon-arrow-right-rounded”></i></div></div></div></div><div class=”vc_column tdi_33 wpb_column vc_column_container tdc-column td-pb-span4″>
<style scoped>.tdi_33{vertical-align:baseline}.tdi_33>.wpb_wrapper,.tdi_33>.wpb_wrapper>.tdc-elements{display:block}.tdi_33>.wpb_wrapper>.tdc-elements{width:100%}.tdi_33>.wpb_wrapper>.vc_row_inner{width:auto}.tdi_33>.wpb_wrapper{width:auto;height:auto}.tdi_33{justify-content:center!important;text-align:center!important}@media (min-width:768px) and (max-width:1018px){.tdi_33{padding-top:30px!important;width:36%!important}}</style><div class=”wpb_wrapper” ><div class=”tdm_block td_block_wrap tdm_block_socials tdi_34 tdm-content-horiz-left td-pb-border-top td_block_template_1″ data-td-block-uid=”tdi_34″ >
<style>.tdm_block.tdm_block_socials{margin-bottom:0}.tdm-social-wrapper{*zoom:1}.tdm-social-wrapper:before,.tdm-social-wrapper:after{display:table;content:”;line-height:0}.tdm-social-wrapper:after{clear:both}.tdm-social-item-wrap{display:inline-block}.tdm-social-item{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;-webkit-transition:all 0.2s;transition:all 0.2s;text-align:center;-webkit-transform:translateZ(0);transform:translateZ(0)}.tdm-social-item i{font-size:14px;color:var(–td_theme_color,#4db2ec);-webkit-transition:all 0.2s;transition:all 0.2s}.tdm-social-text{display:none;margin-top:-1px;vertical-align:middle;font-size:13px;color:var(–td_theme_color,#4db2ec);-webkit-transition:all 0.2s;transition:all 0.2s}.tdm-social-item-wrap:hover i,.tdm-social-item-wrap:hover .tdm-social-text{color:#000}.tdm-social-item-wrap:last-child .tdm-social-text{margin-right:0!important}</style>
<style>.tdi_35 .tdm-social-item i{font-size:14px;vertical-align:middle;line-height:28px}.tdi_35 .tdm-social-item i.td-icon-linkedin,.tdi_35 .tdm-social-item i.td-icon-pinterest,.tdi_35 .tdm-social-item i.td-icon-blogger,.tdi_35 .tdm-social-item i.td-icon-vimeo{font-size:11.2px}.tdi_35 .tdm-social-item{width:28px;height:28px;margin:5px 10px 5px 0}.tdi_35 .tdm-social-item-wrap:last-child .tdm-social-item{margin-right:0!important}.tdi_35 .tdm-social-item i,.tds-team-member2 .tdi_35.tds-social1 .tdm-social-item i{color:var(–tt-accent-color)}.tdi_35 .tdm-social-item-wrap:hover i,.tds-team-member2 .tdi_35.tds-social1 .tdm-social-item:hover i{color:var(–tt-hover)}.tdi_35 .tdm-social-text{display:none;margin-left:2px;margin-right:18px}@media (min-width:768px) and (max-width:1018px){.tdi_35 .tdm-social-item i{font-size:12px;vertical-align:middle;line-height:24px}.tdi_35 .tdm-social-item i.td-icon-linkedin,.tdi_35 .tdm-social-item i.td-icon-pinterest,.tdi_35 .tdm-social-item i.td-icon-blogger,.tdi_35 .tdm-social-item i.td-icon-vimeo{font-size:9.6px}.tdi_35 .tdm-social-item{width:24px;height:24px}}</style><div class=”tdm-social-wrapper tds-social1 tdi_35″><div class=”tdm-social-item-wrap”><i class=”td-icon-font td-icon-instagram”></i><span style=”display: none”>Instagram</span></div><div class=”tdm-social-item-wrap”><i class=”td-icon-font td-icon-linkedin”></i><span style=”display: none”>Linkedin</span></div><div class=”tdm-social-item-wrap”><i class=”td-icon-font td-icon-twitter”></i><span style=”display: none”>Twitter</span></div></div></div><div class=”td_block_wrap td_block_raw_css tdi_36 td-pb-border-top td_block_template_1″ data-td-block-uid=”tdi_36″ ><div id=tdi_36 class=”td_block_inner td-fix-index”><style>.td-coaching-mm .td-sd-menu-icon.tdm_block_icon_box {
cursor: pointer;
}
Hi, i have used the newspaper theme (week pro). We are using a three column section on our homepage and i cant get them to line up vertically. I have tried using the standard alignment options and also using css to change margins ect. I’m not a developer so i cant interpret or use code to fix it or see if something is off. Any help would be much appreciated. The two columns under the titles “Veckans krönika” and “Senaste nytt”
Regards
Niklas
Hi,
What can be done is to replace all standard template and standard blocks with cloud template and flex blocks and after that to disable the tagDiv Standard Pack plugin, after that a good part of css will be removed.
Also, check if you are using css in live css – https://i.imgur.com/RyLF3vQ.png
Also, please check if the plugin has any option to remove unused css
Thank you!
Hi,
From the theme panel > social networks you need to remove the social networks and this will remove theme from standard headers and mobile menu. But in case that you are using a standard header template and not a cloud then this method will remove the socials from both (desktop and mobile) versions. So, if you are using a standard header and footer then you’ll need to use the above css.
The expanded subcategories on mobile menu can be achieve on cloud header were you can use a popup element as mobile menu and you can create the mobile menu in a page using tagDiv Composer and you can use the element list menu, that one can be configurate to display by default the menu expanded. This can be done only if you are using a cloud header.
If you are using the standard header then you can try this custom css:
.td-mobile-main-menu .sub-menu {
max-height: max-content;
opacity: 1;
}
.td-mobile-content .td_mobile_submenu > a .td-icon-menu-right {
display: none;
}
Thank you!
Hi
These resources block the first page rendering (my site is http://www.sport24h.it). I tried serving the embedded core JS/CSS resources and deferring all non-core JS/styles resources with LiteSpeedCache ((I have to use this plugin because my hosting is with LiteSpeed), but it doesn’t work and the server response times are too slow.
I only use a small percentage of these resources, is there a way to lighten these css?
td-standard-pack/Newspaper/assets/css/td_standard_pack_main.css?ver=8ae1459a1d876d507918f73cef68310e
td-composer/css-live/assets/external/ace/ace.js?ver=492e3cf54bd42df3b24a3de8e2307cafx
td-composer/legacy/Newspaper/assets/css/td_legacy_main.css?ver=492e3cf54bd42df3b24a3de8e2307cafx
td-composer/legacy/Newspaper/js/tagdiv_theme.min.js?ver=12.7.1
style.css?ver=12.7.1
Hi
These resources block the first page rendering (my site is http://www.sport24h.it). I tried serving the embedded core JS/CSS resources and deferring all non-core JS/styles resources with LiteSpeedCache ((I have to use this plugin because my hosting is with LiteSpeed), but it doesn’t work and the server response times are too slow.
I only use a small percentage of these resources, is there a way to lighten these css?
https://www.sport24h.it/wp-content/plugins/td-standard-pack/Newspaper/assets/css/td_standard_pack_main.css?ver=8ae1459a1d876d507918f73cef68310e
https://www.sport24h.it/wp-content/plugins/td-composer/css-live/assets/external/ace/ace.js?ver=492e3cf54bd42df3b24a3de8e2307cafx
https://www.sport24h.it/wp-content/plugins/td-composer/legacy/Newspaper/assets/css/td_legacy_main.css?ver=492e3cf54bd42df3b24a3de8e2307cafx
https://www.sport24h.it/wp-content/plugins/td-composer/legacy/Newspaper/js/tagdiv_theme.min.js?ver=12.7.1
https://www.sport24h.it/wp-content/themes/Newspaper/style.css?ver=12.7.1
Hi, I explained that I only used shortcode and tested raw HTML, because the command I have is a huge HTML code, there is no way to put this in the title. And through the Div Composer tag, raw HTML or shortcode can perfectly modify CSS, but I tested now raw HTML appears on all pages, it was not supposed to appear, I have never seen this, shortcode also appears on all pages. I need a solution for raw HTML or shortcode. I reinforce, there is no way to put HTML code or shortcode in the title. I need a solution for this.
Ok, this situation is because one one element you have set the padding right to 10% https://i.imgur.com/IrVLqqa.png (you need to check the column padding or if you can not find it you can use this custom css to overwrite it.
.category .td_block_wrap.tdb_category_description {
padding-right: 0px;
}
Thank you!
Hi,
If you do not want any socials to be display in the mobile menu, then you can remove theme from the theme panel > social networks or use a custom css like this one:
.td-menu-socials-wrap .td-menu-socials {
visibility: hidden;
}
The subcategories on menu should be working now, in the thread mentioned by you most probably it was a but or soothing like that – https://i.imgur.com/181eOem.png
Thank you!
Hi,
Ok, the good news are that this is only a css problem and is only on web-stories page. You can use this custom css in the theme panel > custom code > custom css to resolve the problems from the image:
.post-type-archive-web-story .td_block_list_menu ul,
.post-type-archive-web-story .tdm_block_socials .tdm-social-wrapper {
display: flex;
}
.post-type-archive-web-story .tdm_block_socials .tdm-social-wrapper a{
display: flex;
align-items: center;
justify-content: center;
}
To display the web stories on frontpage please check if there are any shortcodes provided by the plugin. Also, if the web stories is a cpt, then you can use a flex block and set the post type of cpt in this place – https://i.imgur.com/m7s7qEa.png
Thank you!
