- NewsmagTheme colors introduction
- NewsmagSmart list ads
- NewsmagIntroduction
- NewsmagMain menu
- NewsmagLogo & Favicon
- NewsmagHeader ads
- NewsmagSmart sidebar
- NewsmagSharing buttons
- NewsmagCategory tag on modules/blocks
- NewsmagBackground introduction
Hi,
1. I’m not sure what you mean with created a sidebar as a widget. You can create a custom sidebar from Theme Panel > Template Settings(you can choose a different sidebar for each template) for posts for example: http://screencast.com/t/1Q7yZTzG And it is normal to find it empty in Widgets section, just add widgets to it: http://screencast.com/t/cUctIPwK5tc
And set it to display: http://screencast.com/t/h7SQeDjTM
Result: http://screencast.com/t/88S4IiqgYpZB
2. You use Header Style 3 with blog-stack that why is that issue on mobile. For Classic Block stack we made a special header, this one http://screencast.com/t/FEoXVhLMpcv and in combination with other headers is not guaranteed that everything will work fine.
So if you want to use it like this, please paste this css for mobile view in Theme Panel > Custom Css:
@media (max-width: 767px) {
#td-top-menu .sf-menu {
display: none !important;
}
.blog-stack #td-top-search{
right: -50px;
top: -75px;
}
.header-search-wrap .dropdown-menu {
left: -56px!important;
}
.header-style-3 .td-logo img{
width: 30px;
}
}
Result: http://screencast.com/t/0e2v9SlcLw4e
Thanks!
Hi,
You can use this custom css in Theme Panel > Custom Css: http://screencast.com/t/MGhkwxsVegHO
.td-header-top-menu {
display: block !important;
}
Result: http://screencast.com/t/q2DYx26Abfa
Please also note that the top menu hasn’t been designed to be used on mobile screens so you might need additional customization to it.
Thanks!
In case someone need this, here is the easy full steps for a separate mobile menu.
(line number for NewsMag theme v1.5)
1) themedir \parts\menu-mobile.php
Line 18 change to 'theme_location' => 'mobile-menu',
2) themedir \includes\wp_booster\td_menu.php
Line 9 change to var $is_header_menu_mobile = false;
@wishdigital: you just need to modify here.
3) same file as 2)
Line 235 add this line 'mobile-menu' => 'Mobile Menu',
before 'footer-menu' => 'Footer Menu'
That’s it. Of course you need to create a new menu for the “Mobile menu”.
Hope this help.
Thanks I will go over that, something interesting that happen for them record
I turned off BWM
I turned off Several options of speed buster
I turned off strings
all that in the newspaper theme, and activated speed booster with your code.
as a result I got 69/91. Witch really satisfy me.
did the same with newsmag (in my other site) and I get 63/83 witch is not bad but was doing better without mod_pagespeed.
I am getting a ton of error in the mobile version
Remove render-blocking JavaScript:
Optimize CSS Delivery
ptimize the following images to reduce their size by 115.2KiB (43% reduction).
also images are not optimized, is wird also becuase bith instalation are in the same vps…..
good news is that mobile is working now but grades are not so hot….
I tryed truning all off but is pretty much the same.
Hi,
Unfortunately that is not possible. You can do it but by modifying the whole theme layout which is not an easy task and you need custom modifications for it. Sorry for inconvenience!
Like Alin stated above the Newsmag theme was designed with an fixed grid layout, responsive as it is fluid and style for desktop/tables/mobile screens.
If your issue is small logo you can change Header Style from Theme Panel > Header to show a full header logo:
http://screencast.com/t/KxB24T4U9eIv
http://screencast.com/t/1wxS8CN9QeW
Thanks!
Hi,
The ad size used on mobile is the 300x250 one: http://screencast.com/t/yCjSEmdidVfU
What type of ads you use? If you use image banner then you need to use the div’s presented in theme’s ads guide: http://screencast.com/t/UNBQnGeoA3lv and for mobile use a banner of the dimensions you want.
For adsense ads you can use the panel to change the ad size on mobile/desktops or tablets screens: http://screencast.com/t/yLRQn4jK
When you test this please make sure that you refresh the page not just re-size it.
Thanks
Hi,
The theme already has an option to set a mobile logo also: http://screencast.com/t/GyibelsC04Nx and you can use a logo which fill the whole header: http://screencast.com/t/pst2kwqfDgKa
To implement the full screen header image like on the website you’ve offered as example you need additional customization as the theme doesn’t have an option for that.
A similar look will also provide the VC “homepage post” element: http://screencast.com/t/QaBJ0Be2v which you can set on a page built with VC page builder, here is an example: http://demo.tagdiv.com/newsmag_fashion/
This is how it looks on mobiles: http://screencast.com/t/TK4fSxot
Hope this helps!
Thanks
Theres options in the theme panel under Ads that you can actually disable the ads while on mobile etc.
I was curious if there is a method to have a larger fullscreen logo, The tagdiv recommended size when used full width (no side banner) looks good on mobile but much too small on regular desktop browsers. Is there a way to select a different logo for each screen? Can you implement this function to future releases so I can avoid using a child theme?
Also, I am curious as to using a full screen header photo in place of logo such as this: http://thedianerehmshow.org/ (but as a rectangle, without the cut out space you see on this site).
How can these best be implemented?
If one does not use the banner ad, or align the logo next to the menu, the logo just doesn’t very good at recommended sizes.
Hi
I use Open Sans Hebrew font which was applied everywhere in the Theme Panel.
However, while in desktop all is ok, in mobile, the font of sub title of posts in the main menu only page is still the default one.
Have tried to add font plugin but the problem remained the same.
Eddie
Hi,
Check if the Jetpack – mobile theme is enabled, if it is disable it – https://forum.tagdiv.com/how-to-manage-the-mobile-theme/
If this is not the case disable all plugins, enable only the Visual Composer plugin and check if the issue is still there.
Thank you, Emil G.
Hi,
@Olga You need to disable the mobile theme, please follow this guide for that: https://forum.tagdiv.com/how-to-manage-the-mobile-theme/
Thanks
Hi,
Unfortunately the theme doesn’t have settings for responsive view/mobile view. The content from your homepage/post page is just styled for mobiles screens and it’s the same as on desktop screens.
We plan to improve this system in the future and add options for this but at the moment this can only be achieved via css and use the media queries to target the mobile view and hide content.
This is the media query which you need to used to target the mobile view screens:
/* responsive phone */
@media (max-width: 767px) {
add your css code here
}
Hope this helps! Sorry for the inconvenience!
Thanks
Hello, this was my previous question regarding website speed :
https://forum.tagdiv.com/topic/how-to-do-further-website-optimization/
I followed all of your instructions, my speed test was improved on mobile and desktop.
but yesterday when i changed template layout on my site, google speed test dropped again:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.unbelievable-facts.com%2F&tab=mobile
On desktop it is good 91 out of 100
and there is only 1 render blocking css which you told me it can not be moved.
http://www.unbelievable-facts.com/…content/themes/Newsmag/style.css?ver=1.5
But on mobile there are some more scripts and css files showing on speed test, it wasn’t there before making changes in template:
Remove render-blocking JavaScript:
http://ajax.googleapis.com/…s/jquery/1.11.1/jquery.min.js?ver=1.11.1
http://www.unbelievable-facts.com/…alite/Socialite/socialite.min.js?ver=2.0
http://www.unbelievable-facts.com/…ugins/wpsocialite/wpsocialite.js?ver=1.0
http://www.unbelievable-facts.com/…ensions/socialite.stumbleupon.js?ver=1.0
http://www.unbelievable-facts.com/…jquery.form.min.js?ver=3.51.0-2014.06.20
http://www.unbelievable-facts.com/…ct-form-7/includes/js/scripts.js?ver=4.1
http://www.unbelievable-facts.com/…themes/Newsmag/js/td_site.min.js?ver=1.5
http://www.unbelievable-facts.com/…includes/js/comment-reply.min.js?ver=4.1
Optimize CSS Delivery of the following:
http://www.unbelievable-facts.com/…content/themes/Newsmag/style.css?ver=1.5
http://www.unbelievable-facts.com/…poser/assets/css/js_composer.css?ver=1.5
http://www.unbelievable-facts.com/…t-form-7/includes/css/styles.css?ver=1.5
http://fonts.googleapis.com/…,600italic,700italic,400,700,600?ver=1.5
http://www.unbelievable-facts.com/…p-includes/css/dashicons.min.css?ver=1.5
http://www.unbelievable-facts.com/…p-includes/css/admin-bar.min.css?ver=1.5
http://www.unbelievable-facts.com/…/wpsocialite/lib/wpsocialite.css?ver=1.5
http://www.unbelievable-facts.com/…p-subscribe/css/wp-subscribe.css?ver=4.1
and these scrips and css don’t seems to have a ‘file id’so i can not move them using speed booster plugin.
please guide me further!
I do not have a Theme Panel tab Responsive Settings, on mobile you can see all the codes, what to do?
Hi,
When I embed a video from Vimeo to a page or a post, the auto resize makes the iframe too tall, so there are black lines above and below the video.
https://www.dropbox.com/s/7yy5aq7ooh0jlce/rt-vide-black-lines.png?dl=0
I’ve tried this with the Vimeo embed code and also with just putting the Vimeo URL and letting the theme do it’s stuff. Both ways display and play the video OK. Apart from the black lines top and bottom.
The iframe should be 640*360. The width is always calculated right (640), but the height is calculated as 384 and not 360. Making the black lines.
The same happens on desktop and mobile. It scales beautifully on a mobile, but still has the wrong height, causing the black lines.
Am I doing something wrong, or any suggestions on how to fix it?
Hello. Ever since I updated the theme (yesterday, 01/29/2015), on the mobile, videos have no sound. I also have allow_url_fopen enabled. Thanks in advance.
Hello Guys,
We are working on a bug fix and are testing the newspaper theme heavily. We have run into what we think might be a bug with the theme.
I know this may come as a surprise, but it only involves Internet Exploder, I mean Explorer. 🙂
The homepage loads fine in most desktop and mobile browsers/OS combinations we have tested, but in the following browser/OS combination, we are getting a blank homepage, with no content. It works in many IE browser versions, but these particular combinations of versions will only load the homepage (partially) and only in compatibility mode.
Windows 7 / IE 11 (works fine with IE 8,9 and 10 on Windows 7)
Windows XP / IE 7 (works fine with IE 8 on Windows XP)
We are testing with browser stack. All other Windows and Internet Explorer browser combinations seem to work properly.
See our screenshots:
Windows XP / IE 7: https://files.secureserver.net/0sgqcFSS2KZwer
Windows 7 / IE 11: https://files.secureserver.net/0sZx0BxpmARvKf
When using with the two combinations listed above, we have to manually activate compatibility mode to get the site to load and it only loads partially. The smaller article thumbnails on the right, don’t show up when in compatibility mode.
Any ideas?
The site: http://fishfarminginternational.com
We are still digging into this, but thought this might be something you are already aware of and might be able to save us some time if you have any suggestions or perhaps someone else has had a similar issue.
Thank you!
note florida site was just moved to the theme about 10 days ago, and is not yet fully optimized.
I was actually waiting on the new version of theme, and I need to optimize the logos (e.g., no mobile logo, footer logo, and the top logo off center due to white space in logo for the old theme layout … etc.
Hi,
1. The theme is built based on a 3 column grid layout so a full width page will use all three columns.
2. You can add a custom css class to the row you don’t want on mobile screens, like this: http://screencast.com/t/7f8qM2Xap3 then use it to hide that row on mobiles using the class you added.
ex:
.hide_on_mobile {
display: none;
}
3. I don’t think so also. You have three types of pagination on blocks: http://screencast.com/t/sdTcb1Uh
Thanks
thanks for the reply. I can’t share my url, here are screenshots
before – menu works (its loading in page content in this screen shot)
https://dl.dropboxusercontent.com/u/41174/Screen%20Shot%202015-01-29%20at%209.53.48%20AM.jpg
after setting theme_location to my custom_menu in /menu-mobile.php – mobile menu changes as desired but main nav mega menu dropdowns do not load (and are not being output in the html code), and other stuff like the padding doesn’t seem to apply.
https://dl.dropboxusercontent.com/u/41174/Screen%20Shot%202015-01-29%20at%209.54.51%20AM.jpg
https://dl.dropboxusercontent.com/u/41174/Screen%20Shot%202015-01-29%20at%209.57.04%20AM.jpg
Hello, i have already follow your these guidelines to speed up my site:
https://forum.tagdiv.com/page-speed-guide/
But still my score on google speed insight is 70 and 84 for mobile and desktop!
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.unbelievable-facts.com%2F
I have few questions please guide me:
1. it is showing i need to optimize CSS Delivery, i saw article about combining many css files to one, but i am not sure if it will be applicable in these 3rd part css below:
Optimize CSS Delivery of the following:
http://www.unbelievable-facts.com/…ontact-form-plugin/css/style.css?ver=4.1
http://www.unbelievable-facts.com/…ser/assets/css/js_composer.css?ver=4.3.4
http://www.unbelievable-facts.com/…content/themes/Newsmag/style.css?ver=1.2
http://www.unbelievable-facts.com/…alize/frontend/css/socialize.css?ver=4.1
first css is of contact form i am using, widget url is :
https://wordpress.org/plugins/contact-form-plugin/
please suggest me good contact form, which will not create any porb.
2nd css is of visual composer i guess, please suggest me its solution too.
2. Minify CSS for the following resources to reduce their size by 10.5KiB (16% reduction).
Minifying http://www.unbelievable-facts.com/…content/themes/Newsmag/style.css?ver=1.2 could save 9.1KiB (17% reduction) after compression.
Minifying http://www.unbelievable-facts.com/…ser/assets/css/js_composer.css?ver=4.3.4 could save 1.4KiB (13% reduction) after compression.
How can i compress them? please guide!
3.Minify JavaScript for the following resources to reduce their size by 4.8KiB (3% reduction).
Minifying http://www.unbelievable-facts.com/…assets/js/js_composer_front.js?ver=4.3.4 could save 2.1KiB (36% reduction) after compression.
Minifying https://www.gstatic.com/swiffy/v7.1.1/runtime.js could save 1.4KiB (2% reduction) after compression.
Minifying http://www.unbelievable-facts.com/…themes/Newsmag/js/td_site.min.js?ver=1.2 could save 775B (3% reduction) after compression.
Minifying http://pagead2.googlesyndication.com/…s/r20150122/r20141212/expansion_embed.js could save 512B (2% reduction) after compression.
How can i minify them? please guide?
And 1 more question, currently i am using dedicated server, should i try CDN? will it help improving page speed? if yes then how much?
Is this feature available or will be available? If not is there a suggest plugin that will work with the theme?
Thanks.
I want to assign a different WP menu to the mobile menu instead of the default main menu.
I have registered a new nav menu location in my child-theme functions and assigned my new menu to the location. I copied /parts/mobile-menu.php to my child theme and edited ‘theme_location’ to my new menu location name.
This works in that it shows my new mobile menu in the mobile view, but at the same time it breaks the main menu’s mega menu features.
Any advice? Thanks.
Hi,
You can change header style to “Blog style – full text logo + menu” and I think that there wont be issues on moblie view. Any if you want to use Style 3 you can use this custom css:
To hide the main menu and place the search button on top for mobile view: http://screencast.com/t/Q2PImmCmYDWG
@media (max-width: 767px) {
#td-top-menu .sf-menu {
display: none;
}
.blog-stack #td-top-search{
right: -50px;
top: -75px;
}
.header-search-wrap .dropdown-menu {
left: -56px!important;
}
}
For tablets please use this custom css in Theme Panel > Custom Css: http://screencast.com/t/vMf2QV8vpxMx
@media (max-width: 1018px) and (min-width: 768px){
.blog-stack .sf-menu > li > a{
padding: 0px 5px 0px 5px;
}
.blog-stack .sf-menu a.sf-with-ul {
padding-right: 25px;
}
.blog-stack .sf-menu > li > a{
font-size: 12px;
}
}
Hope this helps!
Thanks!
