Hi, thank you for a great theme!

I am having trouble trying to figure out why some posts work and some dont.

A) The ones that work does this:
https://juukpromo.com/apple-iphone-7-enters-30-more-countries-from-saturday/

b) The ones that do not work does this:
https://juukpromo.com/onyx-communicator-lets-you-talk-to-people-around-the-globe-with-a-push-of-a-button/

I am going through the sources but cannot find what I need to change in Chrome. The only way to fix this is quite simple, on ones that are like B) – I go edit post, and I do not change anything, I click update and it is back to normal.

What can I do to eliminate this problem? Thank you!

Hello,

I have a blog post written, and it stops at continue reading. When I click on “continue reading”, I cannot see the rest of what I wrote.

Cheers for any help

[moderator note – please do not bump]

Safari chokes on the CSS for animated underlines on linked images, so Safari does not correctly calculate the height of (some) images (sometimes), and block-level elements like <p> or <div> do not expand to the height of the image inside. The images show up, but their containers don’t expand to hold them, so the images spill out of their containers and overlap other elements.

This is what the bug looks like.

This is how that same web page looks when the bug is fixed.

The bug does not happen in Firefox. It happens in Safari on Mac OS and iOS.

The bug only happens to some images, sometimes. It has nothing to do with the image itself — any image may get the bug or not. It seems to me that the more images on the page, the more likely it is to happen.

Sometimes, but not always, refreshing the browser fixes it. Also, resizing the browser window usually fixes it. Using Safari’s web inspector, just clicking a CSS line fixes it. Once you fix the display on the browser side like this, you must empty the cache to see the bug again.

To really fix the bug I had to turn off the animated underline effect on the link <a> which holds the images. Adding this CSS works:

.entry-content a::after,
.entry-content a:hover::after {
    display: none;
}

(I also took the effect off of comment-content a, and comment-respond a, in case anyone posts images there.)

Sapor’s CSS includes the following, which might be an attempt to take the underline effect off of images — but it does not seem to me to be doing anything, since the :after content is not on the <img>, but on the <a>.

.entry-content a img:after {
  display: none;
}

My fix takes the underlines off all links — text as well as images — in the entry-content. I added a simple text-decoration: underline to replace the effect on text in entry-content, and kind of match the effect on other links. This is not as fancy, but the good thing is this underlines a whole text phrase even if the linked text stretches onto a second line.

The animated underline effect does not apply to linked text that goes onto a second line. For my list of recent entries, whose titles are more than one line each in the sidebar widget, I added this CSS to make that underline effect run under the last line of each title:

.widget_recent_entries li a {
	display: inline-block;
}

Here is the site I’m talking about, with my fixes: tressmith.com

What do I write in, in the way of CSS, to change all the green links to a different colour?

‘Continue reading’ was not put on the more link, although the function’s comment sounds like it was meant to be added — it says, “@return string ‘Continue reading’ link prepended with an ellipsis.”

The .com version of Sapor does this, but the .org version does not.

I’ve fixed this in my child theme, and want to share the fix with others, while also suggesting that the theme authors may want to add this in a future update.

The function is sapor_excerpt_more, and it is found in sapor/inc/template-tags.php. It is pluggable, so it is easy to modify from a child theme. ??

If you want “Continue reading” added to your more link, just copy the sapor_excerpt_more function from the .com version of Sapor:
https://wpcom-themes.svn.automattic.com/sapor/inc/template-tags.php
and paste that into your child theme’s function.php. (Only use the lines between the if & endif lines.)

I’ve run into a tiny issue with Sapor css you may want to correct in a future update. Until then, users can correct it in a child theme’s css.

To float an image left or right, a class is added to the image — alignleft or alignright.

In style.css, .alignleft & .alignright both have the same margins.
margin: 5px 20px 5px 0;

This is fine for .alignleft (floats left), but .alignright floats right so its right & left margins should be switched so it can float all the way to the right and have its 20px margin on its left:
margin: 5px 0 5px 20px;

Hello! This is a trouble with the SAPOR theme.

Beneath every post, there is the tag area. My trouble is that each tag button is separated by a zero 0, and i don’t know how to remove those zeros. Can anyone help me? My blog is https://www.foodpolicemx.wordpress.com , there you can see what i’m talking about.

Thanks!