Widget rules not working

I am now using this theme on my site: http://www.desispy.com/ but the widget rules don't seem to be working, I am trying to create a text widget in the mainbody top for a mobile ad selecting smartphones only but it shows throughout the whole side.

Another example is the headlines widget I have set as desktop online but it is showing on tablets and smartphones, I used to have the old news theme and the rules worked perfectly on that - please advise?

Hi,

Could you please provide me with a URL to your website and back-end access via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Hi,

Unfortunately highlights is a simple widget area without css class needed for widget rules, please edit News2/gavern/config/widgets.json and change this fragment:

Code: Select all

{
      "name": "Highlights Area",
      "id": "highlights",
      "description": "Widgets area for the highlighter widget",
      "before_widget": "",
      "after_widget": "",
      "before_title": "",
      "after_title": ""
   },


to:

Code: Select all

{
      "name": "Highlights Area",
      "id": "highlights",
      "description": "Widgets area for the highlighter widget",
      "before_widget": "<div id=\"%1$s\" class=\"box %2$s\">",
      "after_widget": "</div>",
      "before_title": "",
      "after_title": ""
   },


If your widget rules still don't work, please select "visible at all pages except" add page i.e. homepage (it doesn't matter), then select "visible at all pages" again and save the widget - it's kind of bug in some cases, we'll try to fix it.
(I've already done it in text widget inside your mainbody top area).

Hi Piotr,

Thanks for looking into this but 2 issues:

1) When i change the widgets.json file as above it creates a large white space (another blank row) under the highlights section on desktop view and it does indeed remove the highlights on mobile view but does leave an empty white space

2) the text widget into the mainbody top area you create for mobile view only works but it does create a blank white space on desktop view

Please advise?

Hi,

In both cases, please select "Clear" widget style from widget rules and white spaces should disappear.

Hi Piotr,

Unfortunately even selecting clear as the widget style for the text widget on mainbody top (smartphone view only), it still leaves a blank white space on desktop view- please advise?

Could you please publish this widget on mainbody top area? THen I'll be able to check it.

Hi Piotr,

I have managed to overcome the issue with the blank spaces on mainbody top and also highlighter but adding the text widget to the highlighter position for mobile other and the highlight feature for desktop only.

Both are selected as "Clear" widget style otherwise an extra line blank space is created around the box.

The only issue now is on the highlighter field in desktop view the text is top aligned - any idea how to solve?

Try to add the following css code:

Code: Select all

.gk-nsp-highlighter > .gk-nsp-highligher-items-wrap ol li a {
    position: relative;
}


I have made this change and in chrome it works perfect now but in IE the text in the headlines field disappears - any ideas?

Please check your website now, I;ve added this code:

Code: Select all

.gk-nsp-highlighter > .gk-nsp-highligher-items-wrap ol li a {
   top: 20px;
}


Thank you Piotr, the issue is now fixed.

Four more things I am trying to work out...

1) The Logo which is using CSS saved as svg is now showing on iphone device, it shows on android mobile and responsive web browser view but actually on an iPhone device the top logo just shows a blank space - any idea why?

2) On the right sidebar on the homepage, I have a featured NSP widget at the top pulling articles using tag "featured" and Order by: "random" BUT the articles are static and the same everytime instead of a random selection. I used to have the same setting on my old theme (News) and it worked fine - any idea?

3) Is there a way to remove the left panel social icons (or move below the article) on Pages but still keep them on Posts?

4) is there a way to reduce the size of the featured image? My posts are showing a massive version of the feature image which is dis-proportional to the rest of the site.

Your advice and help would be hugely appreciated.

2 further things I should have added to the list above...

5) How do you turn of the auto zoom/interact feature when you hover over an image? I disabled "Interactive elements" on News2 template options but this hasnt changed anyting?

6) My post titles are changing as ALL CAPS on the post pages even though they have been published in lower case with appropriate capitals and are showing fine on widgets just all caps on the post pages, any idea how to change this?

Regarding your issues:
1) Did you have the same problem with i.e. png file? I've checked default demo website with png logo and don't see this problem.

2) Please check your featured NSP widget now.

3) Please check this similar thread: https://www.gavick.com/forums/news2-wp/ ... view-38284

4) Featured images in News Show Pro widgets, wchich exactly? In each widget you can set featured image size (Artilce layout tab).

5) Try to add the following CSS code:

Code: Select all

.gk-nsp-art .gk-nsp-image:hover {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}


6) Add also this code:

Code: Select all

h1 {
text-transform: none;
}


1) Use an image png mode the logo shows at at the very top of the header rather than central in CSS mode. - any idea?

4) I meant the size of the featured image at the top on the actual post page e.g. http://www.desispy.com/first-look-karan ... ay-velvet/ rather than on a widget

7) Is there any way to move the author name, category, permalink etc to below the article?

Thank you so much for all the other resolutions.

1) Try to use png logo and let me know, I'll try to adjust css a little.

2). your original image here is 890 x 1280, so very similar to displayed image. Generally it's possible to display smaller image, but in this case you'll have to remove also the hover effect, let me know if is that ok.

3) Yes, you have to move this fragment from News2/layouts/content.post.header.php:

Code: Select all

<?php if((!is_page_template('template.fullwidth.php') && ('post' == get_post_type() || 'page' == get_post_type())) && get_the_title() != '') : ?>
   <?php if(!(get_post_type() == 'page' && get_option($gk_tpl->name . '_template_show_details_on_pages', 'Y') == 'N')) : ?>
      <?php if(!('post' == get_post_type() && get_option($gk_tpl->name . '_post_aside_state', 'Y') == 'N')) : ?>
         <?php gk_post_meta(); ?>
      <?php endif; ?>
   <?php endif; ?>
<?php endif; ?>


into content.post.footer.php file
i.e. after this line:

Code: Select all

<?php do_action('gavernwp_after_post_content'); ?>


1) I have changed the logo to use png image but now the issue is on mobile view, when you scross down the header bar that shows takes up 2 lines, 1 for the image and breaks the navigation menu bar onto a new line - any advise?

2) Yes please I want to remove the hover and reduce the size of image on post pages, please advise how to do that?

thanks for the other help they all worked good.

In addition to the above, is there also a way to remove/reduce the space above the page title on article pages? (margin/padding setting?)

Hi,

Regarding your issues:
1. Try to add this code:

Code: Select all

#gk-logo-small {
    float: left;
}


2. http://codex.wordpress.org/Function_Ref ... _thumbnail
Please edit News2/layouts/content.post.featured.php and change this line (44):

Code: Select all

<?php the_post_thumbnail(); ?>


to i.e.:

Code: Select all

<?php the_post_thumbnail( 'medium' ); ?>


please check other image sizes in the link above.
if you want to change existing featured images, you'll have to regenarate thumbnails:
https://wordpress.org/plugins/regenerate-thumbnails/
Then, please send me a link to your single post, probably you'll have to also adjust css a little.

3. Use the followingn code to decrease (or set margin to 0):

Code: Select all

#gk-mainbody article>header {
    margin-bottom: 10px;
}


Hi Piotr,

1. Perfect that is now fully resolved, thank you.

2. the featured image is not displaying the correct thumbnail version, http://www.desispy.com/yami-gautam-prom ... mbai-mall/ is an example of a post I made after the code edit, on the source I can see it is pulling the correct thumbnail version but the featured image is still a full blown version with hover effect on, please advise? also advise how to remove the hover effect on the featured image also, thank you.

3. thank you for this but the space I was reffering to was the gap between the menu bar and the title, this CSS has reduced the space between the title and the article post - any advise on how to reduce the space above the title

Thanks again for all your help

Hi,

Regarding the second, add the following css code:

Code: Select all

article figure.featured-image img {
    margin: 0 auto;
    width: auto;
}

article figure.featured-image img:hover {
    -webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
}


remove margin property if you want to align image to the left.

3. Add also this code:

Code: Select all

#gk-mainbody article>header {
margin-top: -30px;
}


Fantastic, thank you so much again. The only things left I am trying to figure out is...

1) there is still a "hover" effect when the mouse goes over the featured image on article pages - any idea how to remove?
2) How do I reduce the gap between the featured image and the article body text below it? (seems to be fairly large gap)
3) How do I reduce the gap between the category description and the article listings on category pages, e.g. http://www.desispy.com/gossip/
4) is there a way to remove the social icons bar on the left of articles?
4)

1) Try to add also this code:

Code: Select all

article figure.featured-image:hover img {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}


2)

Code: Select all

article figure.featured-image {
margin-bottom: 10px;
}


3)

Code: Select all

.category .page-desc p {
    margin-bottom: 0;
}


4)

Code: Select all

#gk-social-aside {
display: none;
}


One more thing I have noticed after all of these changes is that on category pages, e.g. - http://www.desispy.com/gossip/

in chrome it all displays fine with 3 columns etc, but in IE it doesn't all fit on the screen and shows 1 and a half columns - any ideas?

Hi,

Please send me a PM with backend and FTP access and I'll check the issue.