- NewsmagSmart list ads
- NewsmagIntroduction
- NewsmagMain menu
- NewsmagLogo & Favicon
- NewsmagHeader ads
- NewsmagSmart sidebar
- NewsmagSharing buttons
- NewsmagCategory tag on modules/blocks
- NewsmagBackground introduction
- NewsmagTheme colors introduction
Hi,
Unfortunately there no such an option for mobile’s menu. This is on our todo list and will be added on futures updates, as we have over 200 features on our list and we have to take them in the order of priority.
Thanks!
Hello, the website that use this template, the menu has many sections and sub-sections, then cell without collapsing the menu appears, which is a problem, I want users to view the main sections first and on click to show sub-sections. I want to know how to do it so that the menu of the mobile charge collapsed? Thanks
<!– Style compiled by theme –>
<style>
.td-menu-header .td-sp,
.sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu.png’);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.td-menu-header .td-sp, .sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu@2x.png’);
}
}
</style>
<!– JS generated by theme –>
<script>
var td_blocks = []; //here we store all the items for the current page
//td_block class – each ajax block uses a object of this class for requests
function td_block() {
this.id = ”;
this.block_type = 1; //block type id (1-234 etc)
this.atts = ”;
this.td_cur_cat = ”;
this.td_column_number = ”;
this.td_current_page = 1; //
this.post_count = 0; //from wp
this.found_posts = 0; //from wp
this.max_num_pages = 0; //from wp
this.is_ajax_running = false;
this.header_color = ”;
this.ajax_pagination_infinite_stop = ”; //show load more at page x
}
var td_ad_background_click_link=””;
var td_ad_background_click_target=””;
var td_ajax_url=”http://www.rnbjunk.com/wp-admin/admin-ajax.php”;
var td_get_template_directory_uri=”http://www.rnbjunk.com/wp-content/themes/Newspaper”;
var tds_snap_menu=”snap”;
var tds_header_style=””;
var tds_mobile_swipe=””;
var td_search_url=”http://www.rnbjunk.com/search/”;
var td_please_wait=”Please wait…”;
var td_email_user_pass_incorrect=”User or password incorrect!”;
var td_email_user_incorrect=”Email or username incorrect!”;
var td_email_incorrect=”Email incorrect!”;
var tds_more_articles_on_post_enable=””;
var tds_more_articles_on_post_time_to_wait=””;
var tds_more_articles_on_post_pages_distance_from_top=”0″;
var tds_theme_color_site_wide=”#4db2ec”;
</script>
<script type=”text/javascript”>
/* <![CDATA[ */
var wpNotesIsJetpackClient = true;
/* ]]> */
</script>
</head>
<body class=”home page page-id-41827 page-template page-template-page-homepage-loop page-template-page-homepage-loop-php logged-in admin-bar no-customize-support td-full-layout wpb-js-composer js-comp-ver-4.4.2 vc_responsive”>
Now It’s better. but the color is blu. My question is, can i change colors in a easier way bypassing that panel?
Hi,
Please reduce margin bottom value on mobile view: http://screencast.com/t/GPdwCBisWwY
@media(max-width:767px){
.archive .header-content-rec .td-a-rec-id-header{
margin-bottom: 0px;
}
}Thank you!
Hi,
Please use this custom css: http://screencast.com/t/GXij7S2xijYf – http://screencast.com/t/9iaB9bp4 – http://screencast.com/t/F5P26hYkx7H
.td-header-main-menu.td-affix {
top: 60px;
}
.admin-bar .sbNavIframe {
top: 32px;
}
.admin-bar .td-header-main-menu.td-affix {
top: 92px;
}
@media screen and (max-width: 600px){
#wpadminbar {
position: fixed;
}
}
Also on mobile view: http://screencast.com/t/JnxB7M8u – http://screencast.com/t/O2oRyw0gOfxN
Maybe you will have to use !important
Thanks!
I was finally able to pinpoint the issue, and it’s not just me! Just try loading the Homepage with background on Newspaper Tech (Boxed), on a mobile device. You’ll see what I mean. The big slider is only half-visible, while the other half just cuts out of the viewpoint:
http://demo.tagdiv.com/newspaper_tech/homepage-with-background/
If you load the above link on a mobile phone, you’ll find that half of the bigslider is cut out of the screen, ’cause the image dimensions are unproportional.
Please, let me know if you find a solution.
Thanks.
I’ve deleted from style.css, but still having code on the page:
<!– Style compiled by theme –>
<style>
.block-title a,
.block-title span,
.td-tags a:hover,
.td-scroll-up-visible,
.td-scroll-up,
.sf-menu ul .current-menu-item > a,
.sf-menu ul a:hover,
.sf-menu ul .sfHover > a,
.sf-menu ul .td-menu-item > a:hover,
.td-rating-bar-wrap div,
.iosSlider .slide-meta-cat,
.sf-menu ul .current-menu-ancestor > a,
.sf-menu ul .current-category-ancestor > a,
.td-404-sub-sub-title a,
.widget_tag_cloud .tagcloud a:hover,
.td-mobile-close a,
ul.td-category a,
.td_social .td_social_type .td_social_button a,
.dropcap,
.td-forum-category-title .td-forum-category-name,
.td_display_err,
.td_block_mega_menu .td-ajax-next-page:hover,
.td_block_mega_menu .td_ajax-prev-page:hover,
.post-via span,
.td_wrapper_video_playlist
.td_video_controls_playlist_wrapper
{
background-color: #6e61b0;
}
.block-title,
.sf-menu li a:hover,
.sf-menu .sfHover a,
.sf-menu .current-menu-ancestor a,
.sf-menu .current-category-ancestor a,
.header-search-wrap
.dropdown-menu,
.sf-menu > .current-menu-item > a,
.ui-tabs-nav,
.woocommerce .product .woocommerce-tabs ul.tabs,
.td-forum-list-head,
.td-login-panel-title
{
border-color: #6e61b0;
}
.widget_price_filter .ui-slider-handle,
.td_wrapper_video_playlist .td_video_currently_playing:after
{
border-color: #6e61b0 !important;
}
.author-box-wrap .td-author-name a,
blockquote p,
.page-nav a:hover,
.widget_pages .current_page_item a,
.widget_calendar td a,
.widget_categories .current-cat > a,
.widget_pages .current_page_parent > a,
.td_pull_quote p,
.page-nav-post a:hover span,
.td-forum-last-comment-content .td-forum-last-author,
.td-topics-title-details a,
.td-posted-in a
{
color: #6e61b0;
}
.woocommerce .button,
.woocommerce .form-submit #submit,
.widget_price_filter .ui-slider-handle,
.jetpack_subscription_widget input[type=”submit”],
.pp_woocommerce .pp_close,
.pp_woocommerce .pp_expand,
.pp_woocommerce .pp_contract,
.pp_woocommerce .pp_arrow_previous,
.pp_woocommerce .pp_arrow_next,
.pp_woocommerce
.pp_next:before,
.pp_woocommerce .pp_previous:before,
#bbpress-forums .button
{
background: #6e61b0 !important;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.bbp-template-notice,
.td-reply-list-header
{
border-color: #6e61b0 !important;
}
.woocommerce .woocommerce-message:before,
.woocommerce .woocommerce-info:before,
.td-login-button
{
background-color: #6e61b0 !important;
}
.buddypress #buddypress div.dir-search input[type=”submit”],
.buddypress #buddypress .message-search input[type=”submit”],
.buddypress #buddypress .item-list-tabs ul li.selected a,
.buddypress #buddypress .generic-button a,
.buddypress #buddypress .submit input[type=”submit”],
.buddypress #buddypress .ac-reply-content input[type=”submit”],
.buddypress #buddypress .standard-form input[type=”submit”],
.buddypress #buddypress .standard-form .button-nav .current a,
.buddypress #buddypress .standard-form .button,
.buddypress #buddypress input[type=”submit”],
.buddypress #buddypress a.accept,
.buddypress #buddypress #activate-page .standard-form input[type=”submit”],
.buddypress #buddypress .standard-form #group-create-body input[type=”button”],
.post-password-required input[type=”submit”]
{
background: #6e61b0 !important;
}
.buddypress #buddypress .groups .item-meta,
.bbp-forum-title:hover,
.td_login_tab_focus,
.block-mega-child-cats a.cur-sub-cat
{
color: #6e61b0 !important;
}
.page-nav .current,
.page-nav-post span
{
background-color: #6e61b0;
border-color: #6e61b0;
}
.wpb_btn-inverse,
.ui-tabs-nav .ui-tabs-active a,
.post .wpb_btn-danger,
.form-submit input,
.wpcf7-submit,
.wpb_default,
.woocommerce .product .woocommerce-tabs ul.tabs li.active,
.woocommerce.widget_product_search input[type=”submit”],
.more-link-wrap,
.td_read_more {
background-color: #6e61b0 !important;
}
.header-search-wrap .dropdown-menu:before {
border-color: transparent transparent #6e61b0;
}
.td-mobile-content .current-menu-item > a,
.td-mobile-content a:hover
{
color: #6e61b0 !important;
}
.category .entry-content,
.tag .entry-content,
.td_quote_box
{
border-color: #6e61b0;
}
.td-timeline-block-title {
background-color: #6e61b0 !important;
}
.td-timeline-wrapper-links {
border-color: #6e61b0 !important;
}
.td-timline-h1-link span {
background-color: #6e61b0 !important;
}
.td-page-title .td-search-query {
color: #6e61b0;
}
.td-sbig-title-wrap .td-sbig-title,
.td-slide-item-sec .td-sbig-title-wrap,
.td-big-grid-title .td-sbig-title-wrap
{
background-color: rgba(110, 97, 176, 0.7);
}
::-moz-selection {
background: #a093e2;
color: #fff;
}
::selection {
background: #a093e2;
color: #fff;
}
a, .widget_recent_comments .recentcomments .url {
color: #6e61b0;
}
.cur-sub-cat {
color:#6e61b0 !important;
}
.blog-stack .sf-menu .current-menu-item a,
.blog-stack .sf-menu .current-menu-parent .current-menu-item a,
.blog-stack .sf-menu .current-menu-parent > a,
.blog-stack .sf-menu > li:hover > a,
.blog-stack .sf-menu ul li:hover > a,
.blog-stack .td-post-text-content .more-link-wrap:hover a,
.blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat,
.blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat:hover,
.blog-stack .td-mega-menu .block-mega-child-cats a:hover,
.blog-stack .td_mod_mega_menu:hover .item-details a,
.blog-stack .sf-menu .current-menu-ancestor > a,
.blog-stack .sf-menu .current-category-ancestor > a
{
color:#6e61b0;
}
.blog-stack .sf-menu > .current-menu-ancestor > a,
.blog-stack .sf-menu > .current-category-ancestor > a
{
color:#6e61b0 !important;
}
.blog-stack .sf-menu ul li {
background-color: #6e61b0;
}
.blog-stack .td-post-text-content .more-link-wrap a:hover {
outline-color: #6e61b0;
}
a:hover,
.widget_recent_comments .recentcomments .url:hover
{
color: #ed4fef;
}
.td-menu-header .td-sp,
.sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu.png’);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.td-menu-header .td-sp, .sf-sub-indicator{
background-image: url(‘http://cdn.rnbjunk.com/wp-content/themes/Newspaper/images/header/elements-menu@2x.png’);
}
}
</style>
I have to add that about blurred images: this happens on mobile, and limited to Module10, Module6, ModuleMX2. This happens also browsing your sample pages (e.g. http://demo.tagdiv.com/newsmag/category/module-10-category/) on a iphone 4s.
Hi
we need to set a standard for publishing photo with newsmag. Is there a how-to guide for the theme?
Some troubles we’re experiencing:
1) images (some) blurred on mobile
2) wrong aspect ratio or resolution on photo posted by the editors (that’s why I’m looking for the official recommendations to broadcast to the team)
Thanks and regards
Fabio
Hi,
1. Please use this custom css in Theme Panel > Custom Css: http://screencast.com/t/6TEPHxcz917y
.home .td-g-rec-id-custom_ad_3{
margin-top: 20px;
margin-bottom: 20px;
}
Result: http://screencast.com/t/bvrAaHaii
2. Yes it is possible, you have to add a class to that row that you want to hide on mobile view: http://screencast.com/t/TrpfoAGF
And use css code to hide that row on mobile view:
@media (max-width: 767px){
.your class{
display: none;
}
}
Desktop: http://screencast.com/t/avEVO2TFKZ
Mobile: http://screencast.com/t/48NdbHbCgzg
Thanks!
Website: csglobe.com
Problem: Ad Box or Block 10
Located: Homepage, above “NEWS” section
Details: The Ad box, appears over Block 10 element [VIEWERS’ PICKS; LATEST IN TECHNOLOGY; TRENDING VIDEO; MOST READ ON CSG]
Request: How to resolve this issue [we want to have 15/20px distance above and below the ad ]
Request 2: Is there any possibility to show the Block 10 elements [VIEWERS’ PICKS; LATEST IN TECHNOLOGY; TRENDING VIDEO; MOST READ ON CSG] only on desktops and hidden on tablets/mobiles?
Hi,
Seems fine now, the server notification doesn’t show anymore on your page speed test:
*mobile: http://screencast.com/t/8UTXIDjd
*desktop: http://screencast.com/t/LBlVshQrTn
Sorry for the inconvenience! You could try Disqus for your comments system.
Thanks
Hi,
1. Try to change again span from menu-top.php but now like this and see how it goes: http://screencast.com/t/LWb0WDwz
This change will increase the width: http://screencast.com/t/kWHHVFiAFg
2. Please use this css code for logo in mobile view: http://screencast.com/t/Q01I58cibx7H
@media (max-width: 767px){
.header-style-3 .td-logo img {
position: absolute;
right: 0px;
top: auto;
}
}
Thanks!
I am doing quite a few posts on this forum ever since my recent purchase. I apologize for that. I am new to the theme and I hope you’ll pardon my naiveness.
The thing is, my theme works fine and is fully responsive in the full width layout, but when I change it to boxed layout, I find that the Big Slider becomes unproportional and too wide on mobile devices. This means that half of the big slide gets cut and only half of it is visible on mobiles. Here’s a snapshot of what happens on loading the big slider on the mobile:
http://www.allaboutoccult.com/wp-content/uploads/2015/02/aaoCapture1.png
See? It just goes crazy! Moreover, the big featured image on the big slider doesn’t even fill up its container, here’s how it looks:
http://www.allaboutoccult.com/wp-content/uploads/2015/02/aaocapture322.png
I tried regenerating the thumbnails, to no avail. Can anyone help? Thanks a lot,
Hi.
When I click on the menu logo on mobile all the header menu disappears and I can’t select anything like this image:
Do you know what could be the cause?
Hi,
Try this css: http://screencast.com/t/gcyR6NGr8q
.td-post-template-6 .td-post-header {
bottom: 370px;
}
.td-post-template-6 .td-read-down {
position: relative;
top: 400px;
}
Use @media queries to adjust it for mobiles an screen views:
* @media (max-width: 767px): for mobiles screens.
* @media (min-width: 768px) and (max-width: 1023px): for tablet screens.
Thanks
Hi,
@gouravgola
Unfortunately this is how the theme works. We currently have this on our todo list and we are trying to find a solution for it, but I can’t let you know how long it will take for this.
You could use js to detect mobile screens and load different content but you will need custom work for that. The theme hasn’t been designed to use a mobile template.
Sorry for the inconvenience!
Thanks for the message!
Hi,
As Chris stated the @media queries are used to style the content for mobile screen widths. You can edit the theme’s css file and search for @media (max-width: 767px) and remove them, leaving just the style for tablet which is under @media (min-width: 768px) and (max-width: 1023px): http://screencast.com/t/5pibBDJP33d
I suggest you backup your current theme installation before you alter it so that you can revert back to it if something goes wrong.
Hope this helps!
Thanks
Thanks! Now, just to be picky, we can move a little the basket when the user logs in? http://screencast.com/t/Nyu6sQA5aRNd
Then, in the mobile version, as you can see here http://screencast.com/t/JNh3ehhcWPm7 we can move the logo that limits the view on the menu?
Hi,
The thumbs for the images on blocks/modules are created by the theme and loaded at smaller sizes so when on phones or tablets depending on the screen view the thumbs need to get a bit stretched so that they fill their container. You could change this by adding a new thumb size or altering the one you use and have it to use a larger one which would look better on mobiles or tablets.
The size of the images can be changed from functions.php: http://screencast.com/t/FbsZ2g0g
And regenerate thumbnails: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Please also note that if you alter it’s size it you might need some css modifications.
You could change it’s color via css but only if you’re using different blocks on your sidebar as if you’re using the same block/blocks you can’t target via css just one and change it’s color.
Let me know of your situation I’ll let you know if it can be done easily.
Thanks
Hi,
That is happens because the code is included in @media for mobile. If you want to change category title for all views just put the } above:
@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;
}
}
.category .td-page-title span {
font-size: 20px !important;
font-family: Vollkorn !important;
}
Thanks!
I have just started using Newsmag. Its amazing. And exactly as I have always wanted. I have successfully installed it with no problems.
I know Chris has written a comprehensive guide on this and i have read it.
But I guess I am doing something wrong because as of now Google PageSpeed Insights grades it at a disappointing 0/100 for both Mobile and Desktop. I have tried most of what i can implement from the documentation page. Most of my problem has to do with imaging, from what I gather after analysing. Apart from .htacess i have not been able to modify any files yet as recommended.
I would appreciate support to fix just this one problem i have.
Thanks for the help so far.
Two things I’ve noticed:
1. It says ‘This theme requires the following plugin: WPBakery Visual Composer.’ at the top of the page. I currently have Version 4.3.5 installed.
Also there was originally two of these plugins installed. I deleted the lower version.
2. When tagDiv Speed Booster is activated it turns the mobile site to a blank page. – it’s currently still inactive.
So it looks like there’s an issue with the ‘WPBakery Visual Composer’ and the tagDiv Speed Booster seems to block the mobile version being displayed.
Anyone recommend a next step?
Regards
Steve
I have a question,
Are you installing WPTouch to try and “save” and recover from the loses you experienced?
What did you use before the newsmag theme?
Was it responsive, how is google indexing the new theme.
I haven’t ever experienced a drop like this….. and I have around 50 percent of my traffic is Mobile.
If anything I lost more traffic trying out WP Touch Pro then using a normal desktop theme (as bad as that sounds)
Also which are you using to test page speed?
If you believe this is the easiest way to do it, it’s okay.
I succeed getting it working, but I must get rid of this annoying space.
I have this space on desktop & mobile.
