SitePoint: Code Shading

SitePoint needs to darken the shading for the [ code ] tag because I can barely see it in my posts!!

Testing

Using Code Blocks

$x=1;
    
while (mysqli_stmt_fetch($stmt1)){
    $badWordsArray[$x] = array('id' => $badID,
                    'word' => $badWord,
                    'pattern' => "~\b($badWord)(s?)\b~");
    $x=$x+1;
}


$string = 'some bad-ass words here';

$replacements = '****';

$new = preg_replace($badWordsArray[]['pattern'], $replacements, $string);

Using backticks

$x=1;
    
while (mysqli_stmt_fetch($stmt1)){
    $badWordsArray[$x] = array('id' => $badID,
                    'word' => $badWord,
                    'pattern' => "~\b($badWord)(s?)\b~");
    $x=$x+1;
}


$string = 'some bad-ass words here';

$replacements = '****';

$new = preg_replace($badWordsArray[]['pattern'], $replacements, $string);

Using pre

$x=1;
    
while (mysqli_stmt_fetch($stmt1)){
    $badWordsArray[$x] = array('id' => $badID,
                    'word' => $badWord,
                    'pattern' => "~\b($badWord)(s?)\b~");
    $x=$x+1;
}


$string = 'some bad-ass words here';

$replacements = '****';

$new = preg_replace($badWordsArray[]['pattern'], $replacements, $string);

Using spacing

$x=1;
    
while (mysqli_stmt_fetch($stmt1)){
    $badWordsArray[$x] = array('id' => $badID,
                    'word' => $badWord,
                    'pattern' => "~\b($badWord)(s?)\b~");
    $x=$x+1;
}


$string = 'some bad-ass words here';

$replacements = '****';

$new = preg_replace($badWordsArray[]['pattern'], $replacements, $string);

@cpradio,

If I don’t tilt my screen, your code blocks look WHITE.

And after I adjust my monitor, I still can barely see the shading - and I am not blind!!

Good design demands you don’t make end users adapt or adjust for poor design.

The shading needs to be darker!! :wink:

1 Like

Using #f8f8f8 (what exists today)

Using #f0f0f0

ping @orodio, thoughts?

1 Like

@cpradio,

First, I can see your screenshots a little better.

Second, here is my situation that I can’t show you unless you were here next to me…

I have my MacBook Pro monitor at an angle that makes reading the easiest - duh!

Well, for some strange reason, that angle does NOT work well with shading/colors.

So if I adjust my monitor/laptop so the monitor is parallel to the ground, then I can see the shading I am complaining about rather well.

Of course, I do NOT want my monitor horizontal!!

So it comes back to an earlier comment that I made - don’t make users adjust for poor design.

I know on my website, I have made things like shading a tad darker so that I don’t have any issues discerning things, and I assume that will work for other users, although you can’t please everyone.

Does that make sense?

(I’d send you a screenshot, but the issue isn’t as much what is on my screen as how I perceive shading based on the angle of my laptop monitor and the overhead fluorescent lights…)

1 Like

No, as we can’t control your setup, you can. Mount the monitor on an arm to remove its natural tilt?

Can you see a discernible difference between the two screenshots? If so, the change to #f0f0f0 would likely be plenty to make it easier to see the entire code block via its background color.

I have a laptop…

I think the #F0F0F0 is discernible enough for me.

Although how an image appears and how it will look by changing the markup is hard to say. But I think that is a good first start, and hopefully an improvement for everyone here?

(You have to remember that what I am describing is fairly common on laptops… Even on a Mac with its glass monitor, if the monitor is perpendicular to your line of sight, you will have issues with shading. But as you tilt the monitor so it is off-right-angle, then the shading becomes rather clear!)

1 Like

Can you use developer tools to change the class hljs’s background to #f0f0f0 (so you can see if it makes it more discernible)?

Is that for me?

If so, I have no clue what you are saying/asking…

What about tweaking SitePoint so code shading is slightly darker for everyone?

That is what I recommended, but it would be helpful for someone with a laptop to prove that #f0f0f0 makes it better with the common laptop tilt :wink:

To make the change, right click on a section of Code (the background of it is fine), and choose Inspect Element. On the right-hand side of the Dev Tools that should pop up, double click on the background-color style and change #f8f8f8 to #f0f0f0

Okay, I follow you now!

So, to answer your question, YES, I think that #F0F0F0 looks better, and to be safe, I’d recommend #EEE
:smile:

Safe for you - but darkening the background is reducing the contrast between that and the #008080 of the turquoise text, which may create problems for those with visual difficulties.

Then #F0F0F0 is my final offer!! :wink:

Hello, SitePoint. I tinkered with my monitor’s contrast settings, but now I can’t see your shading. This is obviously all your fault. I demand you make it look good on my monitor and I don’t really care how it looks for everyone else.

:wink:

8 Likes

@Jeff_Mott,

I have a Mac, so I don’t have such ridiculous issues like PC users do. Please!!

Really? Such as an awkward monitor tilt? Fairly certain that goes beyond the operating system :wink: Contrast settings go beyond operating system too. :smile:

Mikey, I think what we are trying to say is, not a single other user has complained about the coloring here. And I know for a fact we have many Mac users.

Not trying to be rude, simply pointing out an observation :slight_smile: . I wouldn’t have minded slightly darker shading so I’m glad it’s thrown out there. Thank you for doing that!

If I don’t like the styling on a site I visit often, I set up a custom style sheet for that site, with any changes I desire.

3 Likes

Who are you directing these comments too?

And I have never spoke for every other member or Mac member on here. All I know is what I see (or don’t see).

I would like to think that making things slightly darker (e.g. #F0F0F0) would be an improvement for everyone, but who knows?!

I don’t think this is an issue with my Mac or my Mac’s settings or with me. As stated before, anyone who has ever used a laptop before can tell you that if you look at things at different angles it adversely affects what you see. Doubt this, try looking out of the side of your eyes when sitting next to someone working on a laptop on an airplane. (A few degrees determine whether you can see anything on their monitor or you can snoop away.)

Just saying…

1 Like