Status thumbnails too small after theme upgrade

I am upgrading my site to Genesis News Pro 3. However, my status plugin thumbnails are proportionately smaller than in the previous version of the this child theme. See attached screenshot - status on left. How can I fix?

  • Adam Czajczyk
    • Support Gorilla

    Hello wadams92101,

    I hope you're well today and thank you for your question!

    I suppose that the some CSS rules have been changed with recent update of the theme and this is affecting thumbnails size. The simplest way to solve this would be to adjust the size of thumbnails with additional custom CSS I think but I'm not sure how should those images look on the site.

    Let me know please how big they should be and how they should be positioned and I'll check the site again. Hopefully, we'll be able to solve that in no time :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello wadams92101,

    Thank you for explanation.

    Please try adding this code at the end of the Custom CSS in your theme options. I think there should be a "Custom CSS" box there but if it's not there you may use the "Simple Custom CSS" plugin instead.

    .wdqs-author_avatar img {border-radius:0;-webkit-border-radius:0;width:40px;}
    .wdqs-thumbnail-container {width:49%!important;}
    .wdqs-text-container {width:50%!important;margin-left:1%}

    Let me know if this helped.

    Best regards,
    Adam

  • wadams92101
    • The Crimson Coder

    Very cool plugin. This could really help with Copyblogger/Studiopress/Genesis child theme updates. However, there was a style sheet line edit for which I couldn't get it to work:

    .title-area {
    	background: url(images/Urb-Logo-50.png) left top no-repeat;
    }

    When its like that in my style.css, it pull in the image (a logo to the left of my header title). However, when I plug it into the Custom CSS widget instead, it does not. It seems to be referencing a different URL at the subdomain. Any ideas? check it out at newyork.urbdezine.com

  • Milan
    • WordPress Wizard

    Hello wadams92101

    Hope you are well today and won't mind me chiming here. :slight_smile:

    Please use full image path for that image. When rule used outside of theme, I mean in Custom CSS plugin, full path of image should be used.

    Try to use full path of image and let me know how it goes.
    Best Regards,
    Milan

    • wadams92101
      • The Crimson Coder

      Thanks Milan. I tried but I may have got the full URL wrong. What I tried was

      background: url(background: url(mydomain.com/wp-content/themes/news-pro/images/Urb-Logo-50.png) left top no-repeat;

      It's a multisite with subdomains. Where did I go wrong in my full URL path?

  • wadams92101
    • The Crimson Coder

    This is what I tried most recently - of course sub'ing mydomain for my real name - all to no avail. I cleared my cache each time:

    .title-area {
    	background: url(background: url("mydomain.com/wp-content/themes/news-pro/images/Urb-Logo-50.png") left top no-repeat;
    } 
    
    .title-area {
    	background: url(background: url("http://mydomain.com/wp-content/themes/news-pro/images/Urb-Logo-50.png") left top no-repeat;
    } 
    
    .title-area {
    	background: url(background: url("newyorkcity.mydomain.com/wp-content/themes/news-pro/images/Urb-Logo-50.png") left top no-repeat;
    } 
    
    .title-area {
    	background: url(background: url("http://newyorkcity.mydomain.com/wp-content/themes/news-pro/images/Urb-Logo-50.png") left top no-repeat;
    }

    I also tried adding !important; to the end but that didn't work either.

  • Predrag Dubajic
    • Support

    Hi wadams92101,

    There's double background: url in your code and that makes CSS to throw an error and it won't work.
    Can you try with this code please:

    .title-area {
        background: url("//newyorkcity.mydomain.com/wp-content/themes/news-pro/images/Urb-Logo-50.png") left top no-repeat;
    }

    Let us know if that worked :slight_smile:

    Best regards,
    Predrag

  • wadams92101
    • The Crimson Coder

    Thanks that fixed it. BTW, I'm a little confused re syntax for the plugin. I've been using !important to override native theme properties. Do I need to do that or is the plugin designed to override by default? Also, if I'm changing a property under a selector, do I need to restate the unchanged properties in Simple CSS or just the one I'm changing?

  • Adam Czajczyk
    • Support Gorilla

    Hello wadams92101!

    The "!important" flag should be avoided as much as possible because it makes rules to be difficult to override. By default CSS rules are applied in an order "from top to bottom", for example when you got this HTML:

    <span class="mytext">some text</span>

    and this CSS (though the lines may be spread across different css files, the order is what counts):

    .mytext {color:blue;}
    .mytext {color:red;}

    the "some text" text will be in red. However:

    with this code:

    .mytext {color:blue;}
    .mytext {color:red!important;}

    it will still be red but any rule added after it will not affect the color, like with this code

    .mytext {color:blue!important;}
    .mytext {color:red;}

    the text will remain blue even though it's set to red later.

    The bottom line is: "!important" shouldn't be used unless it's really no other way. It's better to try first different combination of selectors and often simply moving the rule "down/up" in CSS code helps.

    Most of the rules from themes and plugins should however be ready to overwrite them with custom CSS. If nothing works but only the option with "!important" than it's "justified" :slight_smile:

    Also, if I'm changing a property under a selector, do I need to restate the unchanged properties in Simple CSS or just the one I'm changing?

    No, you just need that particular property. For example an original CSS is

    .mytext {
    font-family:Arial;
    font-weight:bold;
    color:red;
    padding-top:20px;
    }

    and you wish to change font color only; this would suffice for your custom css:

    .mytext {
    color:blue;
    }

    I hope that helps!

    Best regards,
    Adam

  • wadams92101
    • The Crimson Coder

    Thanks, that helps but just wondering in the Simple Custom CSS plugin, how will my custom override conflicting native theme css without !important? For example, if the style.css file in the theme says:

    .mytext {
    color:red;
    }

    and my custom css in the Simple Custom CSS plugin field says:

    .mytext {
    color:blue;
    }

    which prevails and how?

  • Milan
    • WordPress Wizard

    Hello wadams92101

    Hope you are doing well today. :slight_smile:

    CSS styles overriding works based on order it gets applied. So if your theme is applying that style and after theme's style.css ( or file where your theme defines style ) you are inserting another stylesheet for the same selector, second stylesheet's rule would be applied there.

    But if your second stylesheet is not able to load after theme's stylesheet, you would need to use !important flag to ignore rule in your theme's stylesheet.

    For more information on this ordering, please refer this article.
    http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

    Hope this helps you. :slight_smile:
    Best Regards,
    Milan

    Best Regards,
    Milan

  • Adam Czajczyk
    • Support Gorilla

    Hello wadams92101!

    So does the Simple Custom CSS plugin act as a "second style sheet."?

    It should act that way. However, even though its developers did their best to achieve this, it may not always work. The problem is that themes and other plugins often either load styles in a not quite "WP codes compliant" way or the complexity of the setup interferes.

    The bottom line is: I would assume that the Simple Custom CSS does act as a "last style sheet loaded". If the style added there doesn't override as expected though I would first try to move that custom rule at the very bottom of the entire code in Simple Custom CSS and only then - if that still doesn't work - used the "!important".

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.