- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsWhat is Ajax preloading?
Hi,
I’ve check a post and you have there all the socials http://screencast.com/t/ubm8Hi3la6R
For mobile issue, please read this: https://forum.tagdiv.com/how-to-manage-the-mobile-theme/
Thanks!
Hi,
You can’t via CSS.
1.
<div class="row-fluid td-menu-header">
<div class="span3 hide-mobile">
<?php
wp_nav_menu(array(
'theme_location' => 'my-menu',
'menu_class'=> 'sf-menu',
'fallback_cb' => 'td_wp_page_menu',
'walker' => new td_tagdiv_walker_nav_menu()
));
?>
</div>like here: http://screencast.com/t/BqiMkB5Sb
2. 'my-menu' => __( 'My Menu', TD_THEME_NAME)
like here: http://screencast.com/t/2bVntzFIS5Q
3. Add this CSS in theme panel -> Custom CSS
@media (max-width: 767px) {
.span3.hide-mobile {
display: none;
}
}
.hide-mobile {
padding-left: 15px;
}
.td-menu-wrap #td-top-menu {
padding-left: 0px;
}
@media (min-width: 1200px) {
.hide-mobile {
padding-left: 48px;
}
}
.td-menu-header .span8 {
margin-left: 0px;
}
.menu-header-container {
display: table;
float: none !important;
margin-left: auto;
margin-right: auto;
}4. Go to Appearance -> Menu
Use this menu for that 2 icons and header menu for the rest of the menu.
Result: http://screencast.com/t/XmkHInjHHvv
Thanks!
Hi Radu and Novaque,
It’s not a theme problem, it’s a jetpack plugin issue.
You need to deactivate the “mobile site” extension in the jetpack plugin.
Then, you will see the full site view only and your problem will be fixe 🙂
Have a nice day guys!
Etienne
Hi,
I would like to disable the zoom function on the responsive mobile screens. Some themes allow you to disable the user to zoom on responsive designs. How can I achieve this?
Hi,
you may want to read through the entire pagespeed topic (big sticky top of the forum), as all of this has been well covered there.
Generally you can’t do anything about things like addthis (although I did post a hack to load that in async mode), or jetpack – as those load on other servers and will show up as errors when you run pagespeed analytics. If it’s not loading off your site, it will likely show up as an error of some kind – this includes recaptcha, adsense ads, etc.
Not sure what you mean about looking at source code of theme vs source code of the page — the theme code is not rendered while the code on your site is rendered with all the stuff coming from dbase and external and queries, etc. If you’re trying to compare the “demo” to your pages, that may not work either. You should follow the instructions to setup the cache (remember you need to CLEAR cache every time you change things like htaccess, new plugin, etc.), the speed booster, the page expires time.
For realistic speed – test without addthis, adsense, or jetpack. Then put that stuff back and decide how much impact you want to have on your site. I use addthis for social buttons on one site, and then the theme stuff on another. I don’t use jetpack as it’s slow and I hate loading stuff from a mothership that isn’t my own. I limit number of ads on page (4 ads will be slow if images!) – try loading text only ads, to speed up page!
But a *lot* of this, if not all, has been covered in the pagespeed topic. So, best to start there, and remember it’s virtually impossible to get above 91-93 in desktop with a busy site, lots of pix, wordpress theme, external stuff. Mobile will be slower, no matter what you do. 76+ isn’t too awful right now. 80+ is goal. 65 would be awful. To really optimize for mobile requires making a version of page which most newspaper sites won’t do, and that is mostly text, one picture, minimal navigation, etc.
Google sadly doesn’t differentiate from “tablet friendly” and “iphone friendly.” SO, I’ve stopped crying over trying for a perfect score on phones — it’s not my primary audience. Tablets are, then desktop.
Anyway… that might not help. But
1) set cache to page cache ONLY
2) don’t use any minification stuff until you have speed booster plugin working right
3) make sure your htaccess has expires headers
4) make sure your web server is doing gzip/deflate
5) optimize your images prior to upload; if possible use my hack to increase compression level for thumbnails (or use smush.it or similar; I prefer to edit my functions.php file to change compression to “50”)
6) run your speed tests
7) turn off anything you don’t absolutely NEED if you’re seeking highest score
8) test and retest
THEME UPDATES:
I find it’s best to fully over-write the old theme with NEW theme folder each time, via FTP. I’ve had mixed results with “patching” over the past 10 years with WP sites, and more often than not they break somewhere due to permissions.
Frankly, it’s good habit, since you can also download a full snapshot via FTP before you do an update, to ensure you have a full snapshot. I date and RAR mine here for archival purposes.
The mobile score is better ;). But in the screenshots appears empty the mobile screen :S
In w3 total cache i only check the Page Cache in the general settings tab or i need make more changes in the other tabs?
The option of Minify should be enable?
I use http://cssminifier.com/ for my style.css and works but i realized another pagespeed test ando mobile score was 59.
The results in mobile test:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 5 blocking script resources and 8 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
http://ajax.googleapis.com/…s/jquery/1.10.2/jquery.min.js?ver=1.10.2
http://ambito-financiero.com/…ns/jetpack/_inc/postmessage.js?ver=2.9.1
http://ambito-financiero.com/…/jetpack/_inc/jquery.inview.js?ver=2.9.1
http://ambito-financiero.com/…/_inc/jquery.jetpack-resize.js?ver=2.9.1
http://s7.addthis.com/js/300/addthis_widget.js
Optimize CSS Delivery of the following:
http://ambito-financiero.com/…etpack/modules/likes/style.css?ver=2.9.1
http://ambito-financiero.com/…ubscriptions/subscriptions.css?ver=3.8.1
http://ambito-financiero.com/…modules/widgets/widgets.css?ver=20121003
http://ambito-financiero.com/…modules/sharedaddy/sharing.css?ver=2.9.1
http://ambito-financiero.com/…dgets/widget-grid-and-list.css?ver=3.8.1
http://ambito-financiero.com/…s/contact-form-7/includes/css/styles.css
http://ambito-financiero.com/…ster/external/bootstrap/td-bootstrap.css
http://ambito-financiero.com/wp-content/themes/Newspaper/style.cssPrioritize visible content
Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.
55.9KiB of the response was required to render the above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold.The results in desktop test:
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Enable compression for the following resources to reduce their transfer size by 173.8KiB (74% reduction).
Compressing http://ambito-financiero.com/ could save 46.2KiB (81% reduction).
Compressing http://ambito-financiero.com/…ster/external/bootstrap/td-bootstrap.css could save 27.8KiB (80% reduction).
Compressing http://ambito-financiero.com/…Newspaper/js/min/external.min.js?ver=3.4 could save 25.5KiB (65% reduction).
Compressing http://ambito-financiero.com/…mes/Newspaper/js/min/site.min.js?ver=3.4 could save 14.7KiB (74% reduction).
Compressing http://ambito-financiero.com/…ns/jetpack/_inc/postmessage.js?ver=2.9.1 could save 14.3KiB (74% reduction).
Compressing http://ambito-financiero.com/…jquery.form.min.js?ver=3.50.0-2014.02.05 could save 9.9KiB (62% reduction).
Compressing http://ambito-financiero.com/…modules/sharedaddy/sharing.css?ver=2.9.1 could save 8.9KiB (80% reduction).
Compressing http://ambito-financiero.com/…assets/js/js_composer_front.js?ver=3.6.8 could save 6.6KiB (68% reduction).
Compressing http://ambito-financiero.com/…-form-7/includes/js/scripts.js?ver=3.7.2 could save 6.2KiB (71% reduction).
Compressing http://ambito-financiero.com/…/_inc/jquery.jetpack-resize.js?ver=2.9.1 could save 5.7KiB (72% reduction).
Compressing http://ambito-financiero.com/…/jetpack/_inc/jquery.inview.js?ver=2.9.1 could save 3.5KiB (64% reduction).
Compressing http://ambito-financiero.com/…etpack/modules/likes/style.css?ver=2.9.1 could save 2.9KiB (70% reduction).
Compressing http://ambito-financiero.com/…dgets/widget-grid-and-list.css?ver=3.8.1 could save 1.1KiB (66% reduction).
Compressing http://ambito-financiero.com/…s/contact-form-7/includes/css/styles.css could save 524B (56% reduction).What can i do to improve this? The thing that appear in the list are of jetpack pluging, contact-form, and things of the theme. The screenshots in mobile test only show the menu with any format, and in the desktop text the screen was empty.
I compare the source code of the theme demo with the souce code of my page and its too different. :S. I think this theme is too complicated to config correctly to improve the speed. Its necessary a guide to config the plugins like the theme demo, with the same options, then each user could comment your personal issues. If in the demo has been changed .htaccess for improve the speed and changed a w3 total cache, i think its necessary a guide because the speed of theme is one of best things that it have. If you make a bad config of this items, the theme is slowly like another themes.
Another question, i update the theme with the patch folder, is better reinstall all theme or is the same? I tell this because one of the updates was “clean code” and in my <head> there are a lot of code, more than in the theme demo and another pages that the people put here in the other posts :S
PD sorry for the english 🙂
Hi,
Default the theme have leaderboard on desktop and on mobile you can set which banner you like instead of auto.
http://screencast.com/t/oLy0Ng9ot
Thanks
Hi,
The patch is live now, re-download the theme again from Themeforest.
@mrmobile something went wrong there, we have tested that and works in our case. If someone try it please give a sign here.
Thanks!
Hi,
You can’t add it in menu because that works as a Widget.
You can show the top menu on mobile, now is hidden, you can show it adding this CSS in Theme panel -> Custom CSS
@media (max-width: 767px) {
.td-header-menu-wrap {
display: block;
}
}Hope this help!
Thanks for your message!
Hi Marious,
Is it possible to hide parts of the blog in the mobile theme? Like sidebar, footer, etc.
Thanks!
Hello, so I have a problem with the navigation menu, the main one right below the header/logo. When on my desktop, in full screen everything shows up normally. However, as I was testing the responsiveness of the theme, I noticed that if I minimize my browser window into a size similar to a mobile or tablet device, the menu becomes an icon (the 3×3 square symbol, as it should), but the icon doesn’t work. My website is http://www.dauntlessjaunter.com, and the link to that icon is just …..com/#, and that #pound symbol is just the same page. How can I fix this?
Hi,
We decided to let this as it is now because the style 3 is made to be used to have instead of the logo a full background image for the header, and on mobile that part should stay on top, not on the menu bar.
I will tell you how to make it in your case:
Edit like here: http://screencast.com/t/DcFjrG1zeEWp
Add this CSS in Theme panel -> Custom CSS
/* responsive phone */
@media (max-width: 767px) {
.td-full-logo {
display: none;
}
}Hope this will be ok for you.
Thanks for your message!
Hi,
Add this CSS in Theme panel -> Custom CSS
/* responsive phone */
@media (max-width: 767px) {
.td_block_slide_big {
display: none;
}
}Thanks!
I’ve just search high and low through every theme file and function in this theme and the ONE thing I do NOT see is code to DISPLAY the article bottom ad!
And low and behold, it doesn’t display.
I checked versions 3 and 301 – I checked all theme documentation, not one clue as to exactly where this spot is – I checked demo site and no ads appear at the bottom of articles.
Ad is currently set for bottom, disabled only on mobile.
Hey thanks for the reply nate, but I’m not using revolution. Having even installed it. Just the default slider that comes with the theme.
You can turn off the slider for mobile in the Revolution Slider plugin settings, just click the settings for your slider and look for Mobile Visibility.
To fix the problem you have to use the top grid for the text so it doesn’t bunch up on mobile, it’s a bug in Rivo Slider. Here’s what the author said:
Hi,
please use at those caption the top align instad of bottom, so they both pulled from the top and can not overlap each other any more.
This attribute will be modified in the next version, so situations like this will not even be possible. For now please use the workaround i wrote above.
Thanks a lot,
ThemePunch
Hi,
My logo is wide. In theme panel I have tried header style 3 and header style 6, both are described as full width logo.
In desktop and mobile the logo is displayed below the main menu
When the screen size is standard mobile the logo is reduced in size and is displayed top right above the menu and search icon.
How can I ensure my logo appears below the menu and search icon and is displayed responsively.
Thanks in advance
Hello tagDiv!
I was trying to increase my Pagespeed and got 85 (desktop), 77 (mobile). It is saying that I should “Eliminate Render-Blocking JavaScript and CSS” Will the theme work good, if I minify JS? Please let me know what can I do. BTW I’m using W3TC.
Thanks Mehedi
Just two more things – after that I think this wonderful theme will make my site perfect 🙂
When I click author name I just get to the Start page. Why?
In Mobile is the featured start picture is to small. When i have two lines in the text it dont fit into the picture. It seem that the sentence is squeezed. Is it possible to get mor of the picture in the height?
The Next/Prev arrows, although are visible on desktop, they are not visible on mobile phones. Therefore, I can’t navigate to the next posts. Even your demo site doesn’t show them on mobile phones. Please help solve this problem. Otherwise, it’s impossible to navigate the site using the mobile phone even though this theme is responsive. Thanks.
Hello guys!
I love the theme and planning to implement it across some of my websites. I have noticed little bugs that have been discussed here on the forum and I was wondering when will the official 3.2 Update come out, so I don’t have to take care of all of these manually for each website.
ex: mobile banner, bottom ad etc.
Thanks a lot for your hard work! You’ve developed an amazing product and you should feel great about it!
Cheers!
hi
i don’t think that something from our theme,
anyway
hers the css:
@media (max-width: 767px){
dl.gallery-item {
width: calc(60%) !important;
}
Thanks for you message.
Radu A.
It’s becoming a common user interface element to have a “tap to search” function, where when the magnifier icon (aka “search” icon) is tapped, a viewport specific box will appear either in place with wide screen, or as a modal type element for ease of use on mobile.
Many examples online, but for example you could see this with Google’s YouTube site when on, say, an iPad in portrait mode. The icon is there, box is not. Click icon, new box appears larger and to fit viewport/device for ease of use.
Similarly, a bold new site design by NBC News, http://www.nbcnews.com/
also uses this same approach.
“most” people don’t go to a news portal and “search” for content unless they’re doing a particular research task.
So, “new think” — more “above the fold” space for people “browsing” content or who have clicked in from external link (email, social, etc.) to read specific item. Then, for researchers, tap/click to search with either in place or modal type search box.
For those in the web design field by profession, you can also see this on UX/design sites like “.net magazine” http://www.creativebloq.com/net-magazine
Hundreds of other examples, but just examples.
Radu and co. have followed this concept for the Newspaper theme, where more horizontal space is given for the actual navigation topics and drop downs, with search a tap to click which doesn’t interfere with the main nav element (in theory).
Your needs may vary, but this is why/how Radu and co did it the way it’s now done. It’s not an isolated idea, but a trend which is proven useful for solving above the fold visibility issues on varied mobile devices for content and main navigation over an “always on” search box.
And, again, for those who need an “always on” high visibility search box, you can add the built-in search from WP to any widget area, unless I’m mistaken.
WP admin > appearance > widgets > search
Hope that made sense. 🙂
Just my thoughts on this topic, and it’s not intended to invalidate or argue against your particular needs. Just a comment as to my preference for having Radu work on the fixes to the core elements post migration to v3 framework, versus “changing” too many of the established design elements which are clearly shown in the demo.
Please helpme. I am going crazy soon. I make about 3-4 posts every day but it seems that the dont reach the web instantly – both mobiles, tablets and desktos. It can take hours…
I have tried disabling plugins, empty cache, inactivate slider and more and so on… and I still have problems. I have other sites with other themes that works perfect.
Ok yes its fine now, thank you all for your responses.
The issue:
The sprite files aren’t in the patch you need to manually upload them
Solution:
1. download the entire theme again
2. copy the sprites folder from the theme under images
3. Upload them over the sprites folder under images within the Newspaper theme.
Thank you all again!
