Changing color of playbar elements (Obsidian theme)

  • Unknown's avatar
    mariolunank · Member ·

    Hi, I found out how to change the background color of the playbar for this web:

    Inicio

    Like this:

    .cue-skin-playbar.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
    background: #1C1C1C;
    height: 100%;
    margin: 0;
    width: 100%;
    }

    But I’m still unable to change the color of the font.

    Could you please help me?

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • lindamork · Staff ·

    Hi there,

    I looked at your site and see you’ve added some custom CSS for the playbar so I’ll assume you’ve figured things out. If this isn’t the case, please let us know.

    Cheers!

  • Unknown's avatar
    mariolunank · Member ·

    Dear Linda:

    As I wrote, I figured out how to change the background color of the playbar, but I’m still unable to change the font color.

    By the way, the blog I need help is http://netkaizen.com/ (not the one I linked, sorry, my mistake!). I’d like to change the background color from black to white, but I can’t because then the content (wich is also white) would not be readable.

    Any help with this will be very helpful.

    Thank you in advance!

  • Unknown's avatar
    ogurel · Member ·

    Hi @mariokaizen,

    You can use the below code to change the background color of your site to white and the rest of the elements to black.

    body {
    color: #000;
    background-color: #FFF !important;
}
.page-header .entry-title {
    color: #000;
}
.hentry {
    background: #FFF;
}
a {
    color: #000;
}
h1, h2, h3, h4, h5, h6 {
    color: #000;
}
.obsidian-background-overlay:before {
    background-color: #FFF;
}
.site-navigation .menu > .current-menu-item > a, .site-navigation .menu > .current-menu-parent > a, .site-navigation .menu > .current-menu-ancester > a {
    color: #575757;
}
.site-navigation a:hover, .site-navigation a:focus {
    color: #000;
}
.social-navigation a {
    color: #000;
}
.page-id-1 #post-1 {
    background: #FFF;
}
@media (min-width: 768px)
{
    .site-navigation .sub-menu {
        background-color: #FFF;
    }
    .site-navigation .sub-menu a:hover, .site-navigation .sub-menu a:focus {
        background-color: rgba(80, 80, 80, 0.05);
    }
}
.site-navigation-toggle {
    color: #000;
}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button:focus {
    color: #888;
}
@media (max-width: 767px)
{
    .site-navigation .menu {
        background-color: #dedede;
    }
}

    Please feel free to let me know if you need more customization or other colors for different parts of your website.

    Take care,

    Onur

  • The topic ‘Changing color of playbar elements (Obsidian theme)’ is closed to new replies.