- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsWhat is Ajax preloading?
Hi all,
Yesterday we managed to migrate our old theme to newspaper.
http://www.musiccorner.gr
Everything looks great but i have 3 small issues.
1. Between the header menu i put a single line which created with the following css code (i found this code from an answer here in forum)
.td-menu-placeholder .td-menu-header {
border-bottom: 2px solid black !important;
border-top: 2px solid black;
border-right: 0px solid black;
border-left: 0px solid black;
Checking the site through a mobile phone (NEXUS 5) i see a black line, in the upper level of the screen. I suppose that this is caused by the CSS????
2. Checking the site through a PC with screen resolution 1152×864, menu is breaking in two lines. I had to reduce the font size in order to fit into one line.
I thought that the responsiveness of the theme could avoid that to happen. Wrong?
3. Scrolling down the first page you wll find a bolock with 5 tabs (different categories).
Those tabs are changing every 5secs but i want to stop the responsiveness for this. Is this possible?
For developing reasons, also keep in mind that enabling Contact form 7 plugin i had the following issues:
Trying to enter o photo into a post through media gallery was not possible. It was tyrying to read the images with no result (blank page). Disabling the Contact form, everything was fine.
Revolution slider could not save a new slide (Ajax error was the message)
Thanks!
S.
Hi,
I have emulated and tested this on devices you have mentioned and found no issue, you just have to add this css, which fixes the breadcrumbs issue:
.post header h1 {
margin-top: 17px !important;
}ex:
* http://screencast.com/t/DpwwuRAk
* http://screencast.com/t/SQu9m8gG
* http://screencast.com/t/uHtXSmIk
Thanks
Oh yeah, 😛 I didn’t think that 🙂
Weekend, friend…
?
Thanks. Tried it. Works a treat!
As to the “most efficient” way to load the images; you’d have to play with that yourself and figure out what works the best for “all uses” … I don’t know how much of a tradeoff it would be to have to constantly do if/then loading of different images based on the mobile size with gallery type layouts. Lot of queries.
But, my personal thing would be to actually turn off the images for mobile except for the single featured image on the page, and for home page just show tiny thumbnails 100×100 or whatever for the list of stories.
So, on posts you’d see ONLY the single small 300px image and no other images, much like the Apple “reader” mode except with a single image (featured image).
I never test speed of “home page” as that isn’t relevant for most SERPS anyway, since the content is changing and you want your posts found under the topics not the home page anyway.
So, one aspect of “responsive” design (good and bad), is that it’s better to load a 25kb image once than load the 25kb image once and the 12kb image together and switch those out on viewport. Better to load the 25kb image ONCE, then resize to fit the aspect you’re looking at when you look at it.
I agree it’s best to load the image only once. All I’m saying (and is what I believe Google Pagespeed is saying) is that we should request the version of the image that is best fit to the screen at it’s current orientation, and then if the device changes the viewport, the image will be resized locally, which is essentially what newspaper does now at a certain level.
For example, if I load my homepage and resize the browser window down to 767 pixels, I see this image which is only 326px wide being displayed at over 700 px wide WITHOUT reloading the image, as seen in the screenshot below, second image down:
Does that make sense? If someone really was bothered by the pixelated images, they’d probably realize that they could simply re-orient their device to how they loaded the page or simply reload the page. It seems terribly inefficient to me to have every single person download a high-resolution image on the off-chance that they will flip from portrait to landscape while viewing the page…
The other benefit of using the larger image is for retina/HD displays on a mobile device which have higher pixel count than desktop; so again, if you do the pixel math, a 700×500 image on a screen with double the pixel count, loaded half size, would still provide the same number of pixels when shown half size — without having to load alternate retina/HD version of image or use “image stacks.”
I agree, it does look nice on “Retina” phone screens, which is why I disabled my retina plugin on mobile devices. I think it would simply be a better solution to have Newspaper serve a 300 px wide image, and then allow the retina plugin to substitute the @2x version, rather than serving everyone the hi-res image.
Doesn’t that seem more efficient?
@tcdraper
the general reason themes don’t make multiple thumbnails for the sizes you’re talking about, is that when an iPad changes from portrait to landscape it’s not technically reloading the page, just refreshing the viewport and the cached stylesheet is applied; otherwise it would be *worse* for mobile since the images would need to actually be reloaded — ever carry an iPad across the room in unlock mode and have it flip back and forth from portrait to landscape; well, you’d be reloading the images in different sizes more than once.
So, one aspect of “responsive” design (good and bad), is that it’s better to load a 25kb image once than load the 25kb image once and the 12kb image together and switch those out on viewport. Better to load the 25kb image ONCE, then resize to fit the aspect you’re looking at when you look at it.
The other benefit of using the larger image is for retina/HD displays on a mobile device which have higher pixel count than desktop; so again, if you do the pixel math, a 700×500 image on a screen with double the pixel count, loaded half size, would still provide the same number of pixels when shown half size — without having to load alternate retina/HD version of image or use “image stacks.”
This is actually one of the cool things about mod_pagespeed … if you have an image loading over and over at 80% size, it will cache the image at THAT SIZE and serve up the smaller image to people who keep requesting it vs loading the larger image and scaling it.
That was mostly anecdotal … but just some techie crap in case you were curious 🙂
I don’t think Google wants us to have awful image quality on our sites. I think they just want images to be as small as they can be at their current quality and sized correctly for the display device.
For example, the theme is serving 700 pixel wide images on smartphones where the viewport is 320 css pixels, which Google doesn’t like.
The other thing they don’t like is having wasted bytes in an image. I am compressing all of my images at JPEG quality 90 in pixelmator. I then run them through JPEGOptim, jpegtran, and jpegrescan at a quality of 90 and the file size drops by about half. Then I upload them and Google tells me they can still be a few KB smaller… I don’t care about that so much as I care about serving the wrong dimension of thumbnails to visitors.
I wish the theme made different thumbnails for iPad landscape, iPad portrait, and mobile phone so that we wouldn’t be serving oversized images, which Google hates, take a look at the image below:
When I had the retina plugin enabled for mobiles, it was trying to serve a 1490×966 image on the mobile phone. I had to disable that plugin for mobiles, because newspaper is delivering an image larger than a standard 2x retina image for all mobile phones regardless of whether or not they have the pixels to display the entire image.
I guess I’ll focus on the other things I can do something about, but I wish this would be addressed in a theme update if it’s possible with the bootstrap framework…
Still the same thing with breadcrumbs on iPhone 4S and Motorola (Opera Mini and default browser)
I tried that with various values, and it made the desktop one usually break correctly, but mobile is questionable. I think I’ll just stick to default font size for now…
Thanks though!
Hi Lucian,
On V3.3, the theme displayed the Mobile Logo but on V4.4, it isn’t showing it?! Can you please tell me how can I show it on there?
It isn’t a big thing to do that I need to hire a freelancer. After all, you guys has promised “lifetime support” on the theme and I have received good support from tagDiv (especially you).
Please help!
Tell me, will it work?
Salut,
Ne pare rau pentru problemele si dificultatile pe care le intampini.
In ceea ce priveste light-box-ul il poti seta asa: https://forum.tagdiv.com/display-image-using-modal-window/ Din pacate o sa fie nevoie sa activezi modala pentru ficare imagine in parte deoarece nu am introdus inca o optiune pentru a o putea seta in mod implicit pentru toate imaginile. Daca doresti o poti dezactiva asa: https://forum.tagdiv.com/topic/dont-want-light-box-for-images/#post-17108
Asigura-te ca folosesti revolutin slider-ul corect si dezactiveaza plugin-ul speed booster-ul acesta poate fii cauza pentru care slider-ul nu este afisat.
Ai aici un ghid care te poate ajuta sa creezi un slider folosid rev slider.
Din pacate in momentul de fata nu poti controla meniul de pe mobile decat folosid css, poti urmarii topic-urile de mai jos sa incerci aceeasi metoda pentru a personaliza meniul pentru mobil:
* https://forum.tagdiv.com/topic/changing-the-mobile-menu/
* https://forum.tagdiv.com/topic/different-mobile-menu-when-using-megamenu-on-desktop/
Avem aceasta chestiune in vedere si vom incerca sa o imbunatatim in viitoarele update-uri ale temei.
Poti crea cate un sidebar pentru fiecare post daca doresti si sa folosestri sectiunea “Post Settings” pnetru a selecta sidebar-ul pe care vrei sa il folosesti, iar widget-urile din sidebar pot fii adugate si folosid shortcoduri deci poti folosi toate elementele din Visual Composer, doar adauga in fisierul functions.php filtrul add_filter('widget_text', 'do_shortcode'); si pe urma poti folosii shortcoduri in widgetul text.
Popup-ul “more article box” poate fi personalizat din theme panel > post settings: http://screencast.com/t/heoKx1jHg
Te rog anunta-ma daca mai ai alte nelamuriri legate de tema.
Sper sa te ajute!
Mersi!
Thanks, that makes sense. Will give it a try this weekend!
Hi,
Unfortunately you can’t do it, the theme doesn’t have any features that will allow you to do that, the only changes made to the mobile version of your site are layout and style changes which are done via css but the content remains the same, if you like you can hide some of the content also using custom css.
Thanks for the message!
url: giurgiu-net.ro
Salut
Am cumparat tema de ceva vreme, am instalat-o fix ca in documentatie, am facut toate updateurile, am instalat toate pluginurile recomandate, dar am in continuare errori peste erori: lightboxul nu a functionat niciodata, am instalat un alt lightbox care functioneaza doar in thumbnail grid in galerie, revolution slider este in coflict cu ceva nu afiseaza nimic, pe dispozitive mobile nu am control asupra meniului, in articole nu am control la widgeturile din sidebar si nici la morestories popup, va rog sa imi dati niste solutii, nu am mai inalnit atatea probleme intr-o singura tema.
Multumesc
Astept un raspuns asap
Thanks a lot!
Hi,
Unfortunately there is no way at this moment, we have this on our to-do list and we will enable the mobile logo to show with other two style as well, until then you can use the style you have now.
You can use this custom css in theme panel > custom css to get the logo show good as it is now: http://screencast.com/t/3ZBxIJ8J6
@media (max-width: 767px){
.header-style-3 .td-logo img {
right: 0px;
top: 3px;
width: 767px;
height: 48px;
}
}Thanks
Hi,
I want to show a small logo or the mobile logo on the Smart Snap Menu (http://screencast.com/t/jwe27kuyq6). It is currently showing the default logo but I want to replace it with a mobile logo on the Smart Snap Menu.
I believe it is possible. Please help.
Hi Lucian,
Thanks for advice.
It is back to normal after disable mobile theme feature in Jetpack.
Anyway how can i made mobile version different from desktop version?
Cause I think it’s too much content for mobile , even responsive.
Hi,
Use this: http://screencast.com/t/jbcANv0v
@media (max-width: 767px){
.post header h1 {
margin-top: 17px !important;
}
}..and this for the tablet screen: http://screencast.com/t/FjaoP01AZiq
@media (min-width: 768px) and (max-width: 1024px) {
.td-header-bg .header-logo-wrap {
width: 295px !important;
}
}Thanks
Hi,
Please make sure you do it like this: https://forum.tagdiv.com/how-to-manage-the-mobile-theme/
Also that you deactivate all plugins, empty cache, purge files if you use any CDN or cache plugins then try again.
If nothing works please send an e-mail at contact@tagdiv.com with your wp-admin user and pass so we can check this, also send an URL to this topic or specify your issues details.
Thanks
Hi,
Thanks Christopher!
@mrmobile
I have also checked this, and found no issue with this, for this video from your ex, please note that this is the ID of it: http://screencast.com/t/0OW68iQlvPu
I also wanna add also that some video have restrictions regarding the site, meaning that they can be watched only on YouTube http://screencast.com/t/sL82DtoCV9
Thanks
