This appears to be caused by the following in the style.css file which changes the corners of the images to a border-radius of 7.5px. This applies to the "feature images" for each article as well as the "ribbon".

Starting on line 123 in style.css

img {
max-width: 100%;
height: auto;
border-radius: 7.5px;
}

This was determined using the "Web Developer Tools" inspector in the Firefox browser.

Thanks for tracking that down Richard. Do you have any ideas about how to fix it?

Thanks for tracking that down Richard. Do you have any ideas about how to fix it?

Not yet. CSS isn't my long suit. But it may take defining or redefining the img tag. I'm open to suggestions. (@theevilskeleton :smile: )

Thanks for tracking that down Richard. Do you have any ideas about how to fix it?

Not yet. CSS isn't my long suit. But it may take defining or redefining the img tag. I'm open to suggestions. (@theevilskeleton :smile: )

I suspect that file header.php line 112 can be modified to override the round corner by changing it to:

<img style="border-radius 0:0" width="250px" src="<?php echo get_template_directory_uri() . '/images/fmag-ribbon.png'; ?>" />

But confirmation of this would be good before I go "messing about".

Hmm, it looks close. But I think the colon needs to go between the label and its list of values. I.e.

border-radius 0:0

should be

border-radius: 0 0

Also, excerpted from https://www.w3schools.com/cssref/css3_pr_border-radius.asp:

Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

So I think if you want all four corners to be the same value, then you can just list one value. I.e.

border-radius: 0

Other than that, I think your patch would be OK. Bonus points though if you can figure out how to do it from the style.css file. Hint: read up about CSS selectors and combinator selectors.

• https://www.w3schools.com/css/css_selectors.asp
• https://www.w3schools.com/css/css_combinators.asp

I wanted to fix this issue, but I can't seem to preview the website because it errors.

Perhaps you could try to simply exclude the magazine-sitelogo class? Currently, styles.css looks like this in line 123:

img {
    max-width: 100%;
    height: auto;
    border-radius: 7.5px;
}

We can try patching it by excluding the class like this:

img {
    max-width: 100%;
    height: auto;
}

img:not(.magazine-sitelogo img) {
    border-radius: 7.5px;
}

I edited the CSS directly from Firefox and it worked.

I think that would also work. But it is a little unusual and perhaps a little hard to read. More commonly, general selectors are "overridden" by more specific selectors. So I think the following would also have the same effect.

img {
    max-width: 100%;
    height: auto;
    border-radius: 7.5px;
}

div.magazine-sitelogo img {
    border-radius: 0px;
}

As a general coding rule/guideline it is a better practice to express things in the positive sense rather than the negative because that is the way people tend to think. I.e. this:

if A is not less than B then do C

is better written in the positive sense as:

if A is greater than or equal to B then do C

New release v1.13 of the theme has corrected the rounded corner on the logo banner.