• Resolved axsu

    (@axsu)


    Hi!

    How can I change the background colors of the Midnight style?

    Here is an example: https://prnt.sc/w0i75x

    I have an accessibility issue with the last item. The background color is too light and that makes the text difficult to read.

    Is there any way to solve this?

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @axsu!

    More than fixing the background color (which isn’t really possible, it’ll get lighter and lighter as the number of posts increase over time), what you want is to make the text readable. To do so you’ll need to change the styling of the link in a way that it provides enough contrast so people can actually read it.

    At the moment the only way to make styling changes to the Midnight theme (or any other widget theme) is via PHP filter hooks (I plan to add another solution that should make it easier on a future update, for now this is the only way.) Use the wpp_additional_theme_styles filter hook to add your custom CSS rules and change the styling of links, like so for example:

    /**
     * Make popular posts links red in 'Midnight' theme.
     *
     * @param  string $additional_styles
     * @param  string $theme_name
     * @return string
     */
    function wpp_additional_css_rules($additional_styles, $theme_name){
        if ( 'midnight' == $theme_name ) {
            $additional_styles .= '.wpp-list li a { color: red; }';
        }
        return $additional_styles;
    }
    add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

    If you have any questions don’t hesitate to ask.

    Thread Starter axsu

    (@axsu)

    Hi @hcabrera!

    Thank you for your answer. I tried to apply your code but it doesn’t work for me.

    Anyway, I also used browser’s “inspect” mode to find a color that could fit with the background but for now without success. What works for the first position it doesn’t for the last one. ??

    Plugin Author Hector Cabrera

    (@hcabrera)

    That’s odd. Can you please share your site’s URL so I can have a look?

    Plugin Author Hector Cabrera

    (@hcabrera)

    Marking as resolved due to inactivity.

    OP, if you still need help with this please leave a comment below.

    Thread Starter axsu

    (@axsu)

    Hi @hcabrera!

    Sorry for the delay.

    This is the website: https://bit.ly/37Bmz88

    If you can check with Lighthouse extension you will see that those titles are detected as accessibility issues. https://prnt.sc/w79yb5

    Plugin Author Hector Cabrera

    (@hcabrera)

    Hi there!

    Yeah, I’m not sure this is going to be an easy fix. Just had a look and I’m not sure that making this particular theme (and its other versions) 100% accessibility friendly is possible. I’ll spend some more time playing with the design and see if there’s anything we can do to improve things but don’t hold your breath.

    Thread Starter axsu

    (@axsu)

    Hi @hcabrera!

    I had an idea if could help you in some way. Maybe it’s wrong, but let’s try…

    I applied, via browser Inspector, a specific background color for each item of the list and it seems it could work.

    You can see the result here:
    https://prnt.sc/w95aiz

    And here are the styles:

    • First item: inherit
    • Second item: background: rgb(0 51 51 / 90%);
    • Third item: background: rgb(0 51 51 / 80%);
    • Fourth item: background: rgb(0 51 51 / 70%);
    • Fifth item: background: rgb(0 51 51 / 60%);

    But… I applied this in my styles.css and has no effect in the frontend.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Hey @axsu, sorry for the late reply. You know, holidays and all ??

    But… I applied this in my styles.css and has no effect in the frontend.

    If you haven’t figured this out yet have another look at the comment I left above (you can also read here for a more detailed explanation in case you’re curious.)

    Thread Starter axsu

    (@axsu)

    Hi @hcabrera!

    I had to use !important in the CSS and the styles are working now!

    If someone need this, the only change I did to your example is the following one:

    $additional_styles .= '.wpp-list li a { color: red !important; }';

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to make the Midnight background color more accessible?’ is closed to new replies.