WordPress.org

Ready to get started?Download WordPress

Forums

BlackBird
[resolved] Circular vs square graphics (13 posts)

  1. slarra
    Member
    Posted 1 year ago #

    Uber noob here... No website coding or WordPress expertise at all!

    And, before my inquiry, let me thank you for creating the Blackbird WordPress template - its design is really appealing to me.

    For my first and only experience of this kind, I used the Blackbird template to build a website for my wife's small business (http://www.editorspen.com/). I inserted graphics showing her logo in place of the squirrel, owl, and kangaroo graphics on the Blackbird template. When I access her website using IE, those graphics are square, and show exactly as I want them to. But, when I access her website using Chrome, they are round, which cuts off some of the wording above her logo.

    How can I ensure those graphics will appear square, thereby showing the whole logo, when the website is accessed using Chrome?

    Thanks!

    slarra

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

  3. slarra
    Member
    Posted 1 year ago #

    OK... uber noob, remember!? If you can provide a little more help, I'd appreciate it.

    I assume that I install the plug-in (tho I have no idea how to, but I can probably figure that out) and it somehow fixes the website's design properties to resolve this issue.

    Does this plug in change the website coding so that it will display round or square graphics in IE? Reading thru the (mostly Greek to me) description of the plug-in, I'm left with the impression that this will make IE recognize the rounded (to an extreme, making the whole graphic a circle shape) corners. If that is indeed the case, is there some way just to set the graphics properties to be a square, with square corners?

    Thanks,

    slarra

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I assume that I install the plug-in (tho I have no idea how to, but I can probably figure that out) and it somehow fixes the website's design properties to resolve this issue.

    Yes, that is a correct assumption.

    Does this plug in change the website coding so that it will display round or square graphics in IE?

    Yes, but only in its condition whereby the styles that control the rounded corners are in the original stylesheet (style.css).

    If that is indeed the case, is there some way just to set the graphics properties to be a square, with square corners?

    Yes, square on all browsers?

  5. slarra
    Member
    Posted 1 year ago #

    Thanks, Andrew, for the follow-up!

    Yes, I would prefer to just have those graphics show up as square (with square corners) when viewed with any browser.

    slarra

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have a section in the dashboard named, "Custom CSS", "Custom Styles" or "Jetpack"?

  7. slarra
    Member
    Posted 1 year ago #

    Yes, I have Jetpack (v2.1.1)!

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    In the Custom CSS section of Jetpack, enter this;

    .feature-content-inner .circle,
    .feature-content-inner .circle img {
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -khtml-border-radius: 0;
    }
  9. slarra
    Member
    Posted 1 year ago #

    OK! That fixed the problem. Thank you.

    Before we mark this as resolved, I thought I should mention that the code you identifed above got flagged with two warnings (yellow traffic sign symbol with exclamation point) in the JetPack editor.

    First warning message said:
    Standard property 'border-radius'should come after vendor-prefixed property '-moz-border-radius'.

    Second warning message said the same as above.

    Tho the fix worked as intended, are those warning messages anything I need to deal with?

    Thanks!

    slarra

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't see why it would be problematic, but there must be a reason behind it for Jetpack to start crying.

    Try this code instead;

    .feature-content-inner .circle,
    .feature-content-inner .circle img {
     -moz-border-radius: 0;
     border-radius: 0;
     -webkit-border-radius: 0;
     -khtml-border-radius: 0;
    }
  11. slarra
    Member
    Posted 1 year ago #

    Well... that change you suggested resolved one of the two warnings, but the other remained (same message, associated with the line that contains '-webkit-border-radius: 0;').

    JetPack warnings or not, your edits resulted in the graphics displaying as squares, so I'm happy.

    Thank you, Andrew!

    slarra

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you want to have a final try at removing the errors, try this;

    .feature-content-inner .circle,
    .feature-content-inner .circle img {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -khtml-border-radius: 0;
     border-radius: 0;
    }
  13. slarra
    Member
    Posted 1 year ago #

    That last suggestion worked a treat! No more warning messages, and - most importantly - my graphics are square when viewed with Chrome (and IE).

    Thanks for the extra effort, Andrew!

    slarra

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic