Add drop shadow styling or something to help distinguish embedded content in topics


(Tobias Eigen) #1

I know this has probably come up before here but I could not find it - sorry if I am not searching diligently tonight. :blush:

A member of my discourse site pointed out that screenshots embedded in topics are hard to distinguish from the text written by the post author.

Here’s his point:

http://discourse.kabissa.org/t/repost-and-quote-from-other-blogs-doing-it-right/2050/5?u=tobiaseigen

And his example of a post where the text written by the author that is hard to distinguish from the embedded screenshot, and that a drop shadow would fix that:

http://discourse.kabissa.org/t/repost-and-quote-from-other-blogs-doing-it-right/2050

Some sort of drop shadow styling or at least a way when mousing over to show that the embedded content is special would be helpful, methinks. This is an ssue I have come across also here on meta, where we often are talking about and sharing screenshots of discourse views.


(Jeff Atwood) #2

I definitely recommend adding this as custom CSS to your instance under Admin, Customize.

Personally I feel images should float by default, if borders are needed, add through CSS or in the image itself, even.

We also don’t want to have a lot of CSS that others have to override when setting up their Discourse instances to taste.


(lid) #3

Custom css can do the trick, but it would affect all images. when really by default floating image works better and is more visually appealing in most cases.
For the cases that a break of flow is needed, it will be nice if it can be achieved in the markdown.


The css below can generally work it will apply to pasted, uploaded or external images, but it might also apply to unintended images such as images in a onebox (I didn’t test it )
There is no straightforward rule to target uploaded / pasted / external images added by user.

.cooked img:not(.thumb):not(.avatar):not(.emoji){
    box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.3);
}
  1. default image no special styling

2 quick an ugly way to achieve flow breaking .wrapping the image in a quote.

3.but it would have been nicer if the user could just “mark” the image to be “special” and css rule would apply.


(Tobias Eigen) #4

I agree with you on this. But it would still be useful, methinks, to have something happen on mouseover to indicate it is embedded content, some sort of shadow border.

This is not so bad and works for me - I will just start doing this when I want to distinguish embedded screenshots from my text. Thanks!