- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hi! I am unable to edit the slide-in mobile menu of the main responsive theme from the Header Template section. How do I do it? I can edit CSS or HTML/PHP
Please guide
Hi,
If you want to look like this -> block-title then you should add this custom css in theme Panel>Custom code> Custom css -> https://prnt.sc/opwjol
.td-footer-wrap .td-footer-description,
.td-footer-wrap .td-footer-social .block-title
{
display: none;
}
Hope this will help!
Thanks.
Hey, for some reason when I add this Mailchimp Element to my posts, it doesn’t show the field for the name entry (although it is set as required). When you click on “Anmelden” (sign up) it shows an error because it then requires the name – why cant I fill it in on the posts page in the first place?
Thanks!
screenshot: https://ibb.co/0f26Pd9
post: https://urban-digital.de/digitale-bauleitplanung/
copy & pasted code from mailchimp:
<!– Begin Mailchimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/classic-10_7.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<style type=”text/css”>
#mc-embedded-subscribe-form input[type=checkbox]{display: inline; width: auto;margin-right: 10px;}
#mergeRow-gdpr {margin-top: 20px;}
#mergeRow-gdpr fieldset label {font-weight: normal;}
#mc-embedded-subscribe-form .mc_fieldset{border:none;min-height: 0px;padding-bottom:0px;}
</style>
<div id=”mc_embed_signup”>
<form action=”https://urban-digital.us16.list-manage.com/subscribe/post?u=f359bb2cb644c6453246edfc7&id=db56a5727b” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<div id=”mc_embed_signup_scroll”>
<h2>Subscribe</h2>
<div class=”indicates-required”><span class=”asterisk”>*</span> indicates required</div>
<div class=”mc-field-group”>
<label for=”mce-EMAIL”>E-Mail Addresse <span class=”asterisk”>*</span>
</label>
<input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
</div>
<div class=”mc-field-group”>
<label for=”mce-FNAME”>Vor- und Zuname <span class=”asterisk”>*</span>
</label>
<input type=”text” value=”” name=”FNAME” class=”required” id=”mce-FNAME”>
</div>
<div id=”mergeRow-gdpr” class=”mergeRow gdpr-mergeRow content__gdprBlock mc-field-group”>
<div class=”content__gdpr”>
<label>Erlaubnis gemäß DSGVO</label>
<p>Urban Digital wird die Informationen, die Sie in diesem Formular angeben, dazu verwenden, mit Ihnen in Kontakt zu bleiben. Bestätigen Sie bitte auf welchem Wege dieser Kontakt erfolgen darf:</p>
<fieldset class=”mc_fieldset gdprRequired mc-field-group” name=”interestgroup_field”>
<label class=”checkbox subfield” for=”gdpr_2377″><input type=”checkbox” id=”gdpr_2377″ name=”gdpr[2377]” value=”Y” class=”av-checkbox “><span>E-Mail</span> </label>
</fieldset>
<p>Sie können Ihre Meinung jederzeit ändern, indem Sie auf den Abbestellungs-Link klicken, den Sie in der Fußzeile jeder E-Mail, die Sie von uns erhalten, finden können, oder indem Sie uns unter info@urban-digital.de kontaktieren. Wir werden Ihre Informationen mit Sorgfalt und Respekt behandeln. Weitere Informationen zu unseren Datenschutzpraktiken finden Sie auf unserer Website. Indem Sie unten klicken, erklären Sie sich damit einverstanden, dass wir Ihre Informationen in Übereinstimmung mit diesen Bedingungen verarbeiten dürfen.</p>
</div>
<div class=”content__gdprLegal”>
<p>We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp’s privacy practices here.</p>
</div>
</div>
<div id=”mce-responses” class=”clear”>
<div class=”response” id=”mce-error-response” style=”display:none”></div>
<div class=”response” id=”mce-success-response” style=”display:none”></div>
</div> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;” aria-hidden=”true”><input type=”text” name=”b_f359bb2cb644c6453246edfc7_db56a5727b” tabindex=”-1″ value=””></div>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</div>
</form>
</div>
<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’; /*
* Translated default messages for the $ validation plugin.
* Locale: DE
*/
$.extend($.validator.messages, {
required: “Dieses Feld ist ein Pflichtfeld.”,
maxlength: $.validator.format(“Geben Sie bitte maximal {0} Zeichen ein.”),
minlength: $.validator.format(“Geben Sie bitte mindestens {0} Zeichen ein.”),
rangelength: $.validator.format(“Geben Sie bitte mindestens {0} und maximal {1} Zeichen ein.”),
email: “Geben Sie bitte eine gültige E-Mail Adresse ein.”,
url: “Geben Sie bitte eine gültige URL ein.”,
date: “Bitte geben Sie ein gültiges Datum ein.”,
number: “Geben Sie bitte eine Nummer ein.”,
digits: “Geben Sie bitte nur Ziffern ein.”,
equalTo: “Bitte denselben Wert wiederholen.”,
range: $.validator.format(“Geben Sie bitten einen Wert zwischen {0} und {1}.”),
max: $.validator.format(“Geben Sie bitte einen Wert kleiner oder gleich {0} ein.”),
min: $.validator.format(“Geben Sie bitte einen Wert größer oder gleich {0} ein.”),
creditcard: “Geben Sie bitte ein gültige Kreditkarten-Nummer ein.”
});}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>
Hi,
Please try this custom css -> http://prntscr.com/opvsoj
.single .td-pb-span8 .td-post-content p a:link {
border-bottom: 1px solid #05386b;
padding-bottom: 1.5px;
text-decoration: none !important;
color: #05386b;
}
.single .td-pb-span8 .td-post-content p a:hover {
background: #3da559;
}
If this is not working properly, please provide me a link to one of your post, in this way I will be able to provide you the right custom css.
Thank you!
Hi Vlad,
Ok, after much head scratching and page testing, there is definitely something wrong with my theme.
1) Even if I import a page or section template in tagDiv Composer and do nothing to it, except save and view. None of the rows will display as full width. This is the case in Composer and the page itself.
2) I created a new footer page, using an imported template with a similar layout to my own (1 row/3 columns for the footer, 1 row/2 columns for the sub-footer). I did nothing to it, except set the sub-footer menu and reduce the font size.
– The result: in tagDiv Composer, the columns are stacked in both the footer and sub-footer and neither row shows as stretched. When viewed in situ on a page, the rows and columns behave as they should and align horizontally. Small win…
– For some reason, the last couple of days the import feature isn’t working properly either. When I click the button to import, the confirmation box appears behind the import modal – the only way to click OK is to add display:none to the modal via Chrome Dev Tools.
3) Unfortunately, #2 only works with pages created using tagDiv Composer and WPBakery. Any pages created using Gutenberg, seem to break the footer CSS. The page structure (for the footer section/page) is the same, but some of the same CSS is being overwritten, as it appears to come after in order of specificity. In Chrome Dev Tool, the ‘winning’ styles appear above the ones being overwritten.
– In pages created using tagDiv Composer or WPBakery, I still can’t get any rows to stretch no matter what I do (believe me, I’ve tried!).
– The only way to get stretched rows of any kind, is to build pages using Gutenberg Blocks and plugins. Which is why all of my pages are showing a broken footer, because I had to go back to basics as the other 2 methods are currently unusable.
The solution:
#ti-copyright-footer .td-pb-span6 { width: 50% !important; }
I’ve added the code to the Live CSS window for the footer page and given the row an id, so it won’t conflict with anything else (hopefully). It feels like a bit of a hack, as I’m not a developer and generally wouldn’t mess with the structure of a page, for fear it’ll mess up it’s responsiveness (media queries, etc). I haven’t tested that yet, but it’s nearly 1am, so that’s it for now…
I’m hoping this level of detail might give you a better idea of what’s going on, so that you can help me resolve it properly. I’m not convinced that’s the best fix (it was way too easy), unless you can confirm it won’t effect anything else on the site. Or perhaps you can come up with a cross device/cross platform solution?
Many thanks.
Hi TagDiv Team,
Thanks for the recent update and for the hardwork and love you give to the Newspaper theme! I recently extended my support and hope you can help me with my simple problem.
I have added this CSS code in the Custom Code in the Theme Panel:
.td-post-content a:link {
border-bottom: 1px solid #05386b;
padding-bottom: 1.5px;
text-decoration: none !important;
color: #05386b;
}
.td-post-content a:hover {
background: #3da559;
}
I wanted to have vertical lines on each link on my website. But now, even the img tags are getting the border-bottom which doesn’t look nice on mobile.
Could you please help me solve this and know what’s the proper CSS so that the img tags don’t have the border-bottom?
Hi,
If you want to underline the hyperlinks you need to edit the posts, select the hyperlink and pres ctrl+u -> http://prntscr.com/ope9y7 -> https://prnt.sc/oofq0j
or if you want to have the all hyperlinks on post to be underline you can use a custom css -> http://prntscr.com/opecdr
.single .td-pb-span8 .tdb_single_content a{
text-decoration: underline!important;
}
The code need to be set in Theme panel>Custom code>Custom css and will apply on all post that have set a single post template form cloud.
Thank you!
Hi,
If you use the code/function in s widget sidebar then you can use cloud templates with out problems and you can set the filed you need with tagDiv Composer in the category cloud template -> http://prntscr.com/ope4pj
Unfortunately in only using cloud templates you can make the theme to be full width, with out cloud template you can try with custom css, but if the code is not apply on the right elements can break the theme layout.
Thank you for your understanding!
Hi,
In order to have the scroll to top on mobile responsive version you’ll need to use a custom css like this one http://prntscr.com/opdgwr
.td-scroll-up-visible {
display: block;
}
The code need to be set in Them panel>Custom code>Custom css
Thank you!
After I use newspaper theme and used some tools to get the insight why my website is slow, I found that it’s cause by the newspaper css. How could I reduce it?
Here is what I already done:
– use wp rocket
– have only necessary plugin
– use image compression
my website is: bangkokesports.com
Any suggestion would be appreciated.
Can you provide me with some custom CSS to hide the bio in the authors box, just for the footer widget? Is it possible to do only in that area. Or, to css the excerpt to a certain length?
Thanks
Hi there
I have multiple list 2 posts where I would like to turn off the mobile version. Is this possible (CSS or so)? Or do I have to turn it off on every single post?
Thanks for your help
Greetings
Michelle
Hi! I administrate 5 sites under Newspaper (and intend to build 2 in very near future) but I encoutered some annoying issues recently with a 9.7.2 version (I think you remember 🙂 and thanks again for your help!) and I’m bit anxious about updating all my sites and well… buying new licences.
Can you tell me if these issues have been resolved now with 9.8 and by providing a more recent version of WPBakery Page Builder?
– As soon as I used (the really great) Header Composer, all pages structure created with WPBakery were messy. And I’ve been obliged to recreate all my pages using TagDiv Composer (wich doesn’t always fits my needs, yet). So my question is… can I without any problem now mix TagDiv Header composer’s headers with Page Builder’s content components?
– corollary problem: does the issue appearing in a two menus header, were first sub-menus appearing “under” the second menu (letting sub-menus unclickable) is now resolved without needing to add custom CSS?
Hi,
2. Just make sure that you set a page id not archive or category -> http://prntscr.com/ooywzw -> http://prntscr.com/ooywqd -> http://prntscr.com/ooywd3
3. In order to have the scroll in mega menu you’ll need to set this custom css in theme panel > Custom code>Custom css -> http://prntscr.com/ooytcl
.tdb_header_mega_menu .block-mega-child-cats {
max-height: 335px;
overflow: auto;
}
4. For me that line is not appearing ->http://prntscr.com/ooyjka
Thank you!
Hi,
There is no css code to add the most commented filter in drop down category page -> http://prntscr.com/oowyt1 , sorry!
If this is not what you mean, please provide some more details.
Thank you!
Hi,
In order to change the background color for mobile menu background you can check those settings http://prntscr.com/oowd0t -> http://prntscr.com/oowe4g
Also the contact form is made like this http://prntscr.com/oowpxs the code can be found here https://pastebin.com/tawzAA89 also for the margin you can use this custom css http://prntscr.com/oowqgj
div.wpcf7 {
margin: 0 20px;
}
Set the code in Theme panel>Custom code>Custom css
Hope this will help!
Thank you.
Hi,
From what I can see the video on mobile is as with our theme http://prntscr.com/oow0q9 also in desktop the format of video is not 600×600 http://prntscr.com/oow1yw
For more control you can use a custom css.
http://prntscr.com/oow6aa you can set the code in Theme panel>Custom code>Advance code http://prntscr.com/oow6ke in function on the device you want.
but notice that the theme set the size to the video to be show in the best way possible,
Thank you for your understanding!
Its done. By add this CSS code:
.td-post-sharing-top > div > iframe {width: 120px!important;}
What’s the css code to add “Most commented”
What’s the css code to add most commented?
Hi,
1. There should be import the how contact page like this http://prntscr.com/oojyx6
Please make sure that all the settings are like in our requirements, please follow the guide carefully
– https://forum.tagdiv.com/requirements-for-newspaper/
and please increase all requirements that are lower, and follow all steps.
Please make sure that you do not have a plugin conflict with untested plugins, please deactivate all non theme/tested plugins, also if you are using child theme, clear all cache and try again.
2. If you want to change the background image you’ll need to check on the row, in css tab http://prntscr.com/oojz6k
3. Install WP Forms plugins http://prntscr.com/ook02e create a form copy the code for embed -> http://prntscr.com/ook28i and set it in the contact page http://prntscr.com/ook3gc -> http://prntscr.com/ook3un
Thank you!
Hi @ubuntu,
You want to remove the featured posts from category page http://prntscr.com/oojrfp, if yes, then you can try this custom css http://prntscr.com/oojrux
.category .td-pulldown-filter-list li:nth-child(2) {
display: none;
}
Set the code in theme panel>Custom code>Custom css
Unfortunately those are the only filters for the category page, sorry!
If this is not what you mean, please provide some more details and some screenshots!
Thank you!
Hi,
Unfortunately this can be achieve only with custom css -> http://prntscr.com/ooizeo
.td-category-siblings .td-category a[href$="/logging-operations-mid-atlantic/"]
{
background-color: blue;
}
.td-category-siblings .td-category a[href$="/logging-operations-midwest/"]
{
background-color: pink;
}
The code need to be set in the Theme panel>Custom code> Customer css
Here is a similar topic -> https://forum.tagdiv.com/topic/how-can-i-show-the-category-of-each-post-on-the-thumbnail-of-the-post/
Create custom code with the browser’s Inspector or the Live CSS Box -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!
Hi,
Sorry for the misunderstanding, so you would like to remove the placeholder when the user begins to type. Currently there isn’t an option for it, I will add this on the list.
Please enter this code in the custom CSS section, it should remove the search placeholder text when focusing the input field
.tdb_search_form input[type=text]:focus + div + div {
display: none;
}
If you have more questions let us know.
Thanks
Hi,
If you want to move the “Latest Articles” to the top you’ll need to edit the theme core in wp-content/themes/Newsmag/page-pagebuilder-latest.php files, but this is not indicate, also those changes will affect all pages that have set that page template.
Also if you remove the “Latest articles” from the page this become the Default template for page, so you can use that page template without problems, if you still do not whant to change the template, theme you can use a custom css to hide this section of homepage.
.home .td-pb-article-list{
display: none;
}
The code need to be set on Theme panel>Custom code>Custom css
Thank you!