- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsWhat is Ajax preloading?
Dear Catalin
Yes, that’s because on Saturday I worked on the header with my colleague—we made some css changes. But what we notice is that in the header style with full logo [style 9 upwards], the mobile logos don’t show on the mobile screens. That seems to be a bug because when a mobile logo has been provided, the theme should show it. For mobile, it should show 280×96 for retina and 140×48 for normal screens. Instead, it is showing the size 544×180, which is meant for desktops. You can see in the screenshot you sent to me –> http://screencast.com/t/bzGwqyTB
Could you please address this bug in your next release?
Hi
Use this css in theme panel > custom code > custom css to display the banner on mobile: http://screencast.com/t/bXyhzHFIS
@media (max-width: 767px){
.td-header-top-menu {
display: block;
}
.td-header-top-menu .td-a-rec-id-custom_ad_2{
margin-bottom: 0px !important;
margin-top: 0px;
}
}
Thanks!
Hi
You can achieve that by adding this line of code in menu-mobile.php file like here: http://screencast.com/t/bTeetwkylsu
locate_template('parts/header/top-widget.php', true);
Also you need this css in theme panel > custom code > custom css: http://screencast.com/t/y0OCloZqw
.td-mobile-content .td-header-sp-top-widget{
float: left!important;
background-color: red;
}
Thanks!
I have a wordpress site with 4.4.2 and Newsmag theme 2.2
I want to add a sidebar ad unit to show the ads only on desktop devices, and not on mobile devices.
I’m using td-visible-desktop but still the ad appears on mobile devices as well (towards bottom of the page).
Note : I’m using Google’s new GPT ad tags.
There are two things which we tried to fix the problem:
1. We updated to the new theme v2.3.5 on a test environment and used the GPT ad tags, it worked perfectly fine. Here’s a test site link where it works as expected on mobile and desktop devices : http://work.koimoi.com/box-office/celebrity-battle/shah-rukh-khan-vs-aamir-khan-highest-lifetime-collection/
2. On theme v2.2, we used Google’s old ad (GAM) tags, and the problem got fixed.
We need a solution where we can use GPT tags, on theme v2.2 wherein the sidebar ads are only visible on mobile devices or desktop, basis the class we use i.e. td-visible-desktop or td-visible-phone
Here is a URL for you to refer to as an example : http://www.koimoi.com/bollywood-news/pratyusha-banerjee-suicide-case-court-rejects-rahuls-bail-plea/
On the URL, you will see 4 ads on the sidebar. The second and third ads are coming through Google’s old GAM tags, whereas the fourth ad is coming through Google’s GPT tags.
The second and third ads are not visible on mobile devices when we use td-visible-desktop, but the fourth ad is visible on mobile devices as well, even though we’ve used td-visible-desktop class.
Hi,
The icon was hidden with css for mobile, but you can activate it with this code:
@media (max-width: 767px){
.td-scroll-up-visible {
display: block!important;
}}
Simply add the code in the theme panel -> custom css box.
Thank you!
Wow, That is a whole lot of questions in one!
1) Unfortunately the latest articles cannot stretch to the whole width as they are not visual composer elements. There is no easy way to do it.
2) You cannot get the footer ad outside the footer. You will need to place the add in every post template, category template or page as the footer ad is meant to stay in the footer. It cannot create the necessary space for it in every other template that displays above it. If you want this custopmization you have a bit of work to do as you need to use this code:
Then place an ad in the custom ad 1 spot and then use it in every post template you use: http://screencast.com/t/pxohXgHczwym (these are in the root directory), the category pages: http://screencast.com/t/zgs5t556 , search results, and any other content you have on your site.
As you can see it’s not that easy.
3)You cannot add borders to the big grid as borders will increase the width with a few pixels and the grid depends on it’s fixed width. The layout will break if I add borders with css to it.
4)Please follow this topic to see how this issue can be resolved: https://forum.tagdiv.com/topic/chinese-social-icons/
5) a)It’s best to hide the section altogether and simply upload a mobile logo from the theme panel as there is no point in having 2 logos :
@media (max-width:767px){
.td-header-sp-recs{
display:none!important;
}
}
b) same issue as answer 4
Thanks.
Buna
Blocurile temeil nu au fost concepute sa fieafisate pe posturi, doar pe pagini. Incluzand un block in continutul posturilor e posibil sa intervina unele disfunctionalitati in cea ce privesta layout-ul lui.
Pentru a afisa butonul te “Scroll to top” pe mobile adauga aceast css in theme panel > custom code > custom css: http://screencast.com/t/4jK3dAKtt
@media (max-width: 767px){
.td-scroll-up-visible {
display: block;
}
}
Multumesc!
Hello cva183,
If you want to have on mobile mode the button back to the top, you have to use a bit of CSS code to do that. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
@media (max-width: 767px){
.td-scroll-up-visible {
display: block;
}
}
Thanks.
Hello kapunas,
Unfortunately, our theme does not have such an option for your desire. In order to achieve as you wish, you have to do some additional customizations to do that. Below I gave you an example of transition for the mobile menu. If you want to develop in this case and you are not aware of the steps in this regard, please consider hiring freelancer/developer to help you because we cannot provide customization services at the moment, sorry!
The code is ->
.td-mobile-nav-wrap, .td-content-wrap {
-webkit-transition: left 2s;
transition: left 2s;
}
Hope this helps!
Thank you for the message!
Hello cdeloach,
If you want to replace the icon with the text for your mobile menu, you have to use a bit of CSS code to do that. Please try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-icon-mobile:before {
content: 'MENU';
}
The result you should see here -> http://screencast.com/t/6yMAWrvVaN
Thank you for the message!
Hi
1. Try this css: http://screencast.com/t/UQ7uHzLYE3W
.td-mobile-close a{
background-color: red;
}
2. You can change the menu items text color from theme panel > theme colors: http://screencast.com/t/tmmfIft2AnQ
Thanks!
Hi
By default the theme does not display the top menu on mobile devices. However you can use this css in theme panel > custom code > custom css to display the top menu on mobile: http://screencast.com/t/CR5mfgq8EON
@media (max-width: 767px){
.td-header-top-menu {
display: block;
}
}
Thanks!
Hi, i was wondering if there is any way of changing the menu on a mobile from the header style to the sticky version.
For example i want the <div class=”td-scroll-up td-scroll-up-visible”>
to replace
<div class=”td-header-wrap td-header-style-9″>
Hope this makes sense.
Thanks
Hello atabrb,
Unfortunately, our theme does not have such an option to disable the mobile version, sorry! If you want to quit to the mobile menu, you can use a bit of CSS code to hide the mobile toggle icon to no longer has access to the menu in mobile mode.
The code is ->
#td-top-mobile-toggle {
display:none!important;
}
The result you should see here -> http://screencast.com/t/JiyDQ33F9P9
Hope this helps!
Thank you for the message!
hi, i can’t seem to use jquery in custom code via theme panel.
i’m inserting this code:
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
$(".td_module_10").chunk(2).wrap('<div class="chunk-module"></div>');
this code will wrap every two .td_module_10 class to a div class chunk-module.
I just wanna create a wrap on modules so i can do some custom css for mobile optimization such as displaying 2 modules per row like this:
if it doesnt have this wrap in module, it’s hard to control it’s responsiveness in relation to this issue:
https://forum.tagdiv.com/topic/how-to-change-responsive-size-of-module-in-mobile/
as a workaround, i imported a cdn jquery using this code:
it works but it kinda looks messy with the “x” error in theme panel. can you suggest other implementation to use jquery in custom js via theme panel?
Thanks!
Hello,
i want to use another plugin on my site’s mobile version. i can install plugin (tap tap by bonfire).
how can i disable theme’s default mobile menu?
Thanks,
Atakan
Hi
1. I’ve checked your homepage and noticed that all posts displayed in module 15 have the Continur button added. Are you trying to add this button also for posts displayed in sidebar?
If this is what you want to achieve then you can add in sidebar a block which have Read More button included. For example you can use block 12 in sidebar do achieve a layout similar with this one: http://screencast.com/t/FS2qz7uclX0
If this is not what you mean please provide more details about what you’re trying to do.
3. Are you referring at more article box: http://screencast.com/t/UzLDPYifxX If you want to hide that box on mobile use this css in theme panel > custom code > custom css:
@media(max-width: 767px){
.td-more-articles-box {
display: none;
}
}
Thanks!
Hello all, I’m sorry for the question as it is not included in the support.
But i’m asking for a plugin for Ads that can make what Newspaper theme can do
As Specifying a size for desktop,mobile,tablets and able/disable for them too.
Thanks in advance!
1. I’m absolutely stuck with being unable to change the hover color Popular Posts in the footer widget at http://trekcore.com/newspaper. I can’t figure it out… I’ve spent an hour experimenting, and can get it to change, but when it changes, it changes a bunch of other hover link colors – so I can’t isolate it for some reason. Maddening and would love your help 🙂
2. On mobile only when clicking an item in the menu that expands to reveal submenu items, it flashes a blue color briefly. Zero clue how to change that…
Thanks for the great theme!
Google got really picky about the render blocking stuff on mobile, so by default it *is* about 20 points lower. That is “normal” unless you do some major hacking to WP.
Once you view my thread and do all you can, the last steps would be a bit complex for average user, which requires
a) unhooking loading Google fonts from the theme, and capturing the CSS from Google and putting that in your style.css file; or for fastest speed replace Google fonts with “web safe” font stack (requires unhooking Google fonts in theme main includes/function file AND search/replace main style.css to optimize fonts used by choosing web-safe font stacks)
b) un-enqueuing the style.css and loading in footer.php; then using criticalCSS generator to put above the fold CSS “inline” in the header.php file.
c) using wp-booster to move all JS to footer
What is “possible” ?
Well, the project I’m working on right now I have
Mobile = 98/100
Desktop = 99/100
UX = 100/100
This is without a caching plugin, using mod_pagespeed, with https, and with photo and user photo (loaded locally, not off gravatar.com)
Hello Beldar,
If you want to hide some elements for your mobile mode, you have to use a bit of CSS code to do that. Please notice that exists media query for all devices. In mobile case, you have to use @media (min-width:767px){enter your code} and then you have to place in your custom CSS box. For more information about media query, please consult this link -> http://www.w3schools.com/css/css_rwd_mediaqueries.asp Also, if you check deeper your Theme panel, you will notice that below the custom box you have the advanced CSS field, where you can find the code from what kind of element you want to hide for each device.
You have to try to implement yourself because we cannot provide customization services at the moment, sorry! We also can guide you to the right direction.
Thank you for your understanding!
Hi,
I’m trying to do something to improve the Page Speed on Mobile
I currently have 94 desktops and only 74 of the mobile
… the difference seems too high: can there is nothing to do?
The Page Speed suggestions for mobile are the usual:
Delete JavaScript and CSS that block the view in above-the-fold content
Remove JavaScript:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
…content/plugins/cookie-notice/js/front.js
…/themes/Newspaper/js/tagdiv_theme.min.js
/wp-includes/js/comment-reply.min.js
Optimize delivery CSS
http://fonts.googleapis.com/…,400italic,600italic,400,600,700&ver=6.7
http://fonts.googleapis.com/…,400italic,700,500italic,400,300&ver=6.7
http://fonts.googleapis.com/css?family=Droid+Serif:400,700&ver=6.7
…content/themes/Newspaper/style.css?ver=6.7
Anyone has any suggestions or managed in some way to improve the situation by changing the code?
If nothing is possible the developers have in mind this critical for future versions?
Thanks!
Hi,
Sorry but your website cannot be accessed. The ralated articles can be removed from the theme panel like so:
http://screencast.com/t/7pIxeN43BTC
The double related articles could be caused by jetpack. There is a related artiles from there as well. If you use it, please disable the related articles, photon and the mobile theme (these last 2 are known to cause issues with the theme)
Hope this helps.
Thank you!
Hi
Try this css in theme panel > custom code > custom css: http://screencast.com/t/heykYMp1Sxb
.td-mobile-nav-wrap{
background-color: red;
}
.td-mobile-content li a{
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Thanks!
Hello TagDiv Team,
I can’t find out how to change the background colour of the MOBILE MENU of my theme.
I know in Newspaper you can have a separate function in the theme panel but Newsmag does not come with one.
How can I change the colour using custom CSS?
Thanks,