7

In my GTK+2/3 theme I am making for Ubuntu 12.04 LTS, there's a very noticeable problem when it comes to the Sound Menu buttons - they are completely black with white icons:

Black Sound Menu buttons

Obviously, this does not fit in at all. But where do these buttons get their theming from in my theme files? What section do I need to include so these can be themed?

  • you probably should dropbox your current theme you are working on so that the answerer can see and try stuff out. – fossfreedom Oct 8 '12 at 12:51
  • The theme is Salience and is available on Launchpad. If Bazaar is installed, trunk can be checked out here: bzr branch lp:salience or it can be installed via a PPA. – Christopher Kyle Horton Oct 8 '12 at 17:13
  • [facepalm] I just remembered this already has a bug report and is technically off-topic. X( If it gets resolved there, this question can link back to it so other theme-makers can find the solution and adapt it to their own code. – Christopher Kyle Horton Oct 8 '12 at 17:16
  • 4
    This question is subject to this Meta question: meta.askubuntu.com/questions/4216/… – fossfreedom Oct 8 '12 at 18:44
0

Alright. It looks like the code for the spinning play button is found (in Ambiance) at /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css.

/**************
 * spinbutton *
 **************/
.spinbutton.button:active,
.spinbutton.button:insensitive,
.spinbutton.button {
    border-radius: 0;
}

.spinbutton.button:active:nth-child(last),
.spinbutton.button:insensitive:nth-child(last)
.spinbutton.button:nth-child(last),
.spinbutton.button:active:backdrop:nth-child(last),
.spinbutton.button:insensitive:backdrop:nth-child(last),
.spinbutton.button:backdrop:nth-child(last) {
    border-radius: 0 7px 7px 0;
}

.spinbutton.button,
.spinbutton.button:active,
.spinbutton.button:backdrop,
.spinbutton.button:active:backdrop,
.spinbutton.button:hover,
.spinbutton.button:hover:backdrop {
    background-image: none;
    background-color: transparent;
    border-image: none;
    border-width: 0 0 0 1px;
    border-left-color: alpha (shade (@bg_color, 0.6), 0.22);
}

.spinbutton.button:active {
    background-image: -gtk-gradient (radial, center center, 0.0, center center, 0.5,
                                     from (alpha (@selected_bg_color, 0.2)),
                                     to (alpha (@selected_bg_color, 0.0)));
}

.spinbutton.button:insensitive,
.spinbutton.button:insensitive:backdrop {
    border-left-color: alpha (shade (@bg_color, 0.6), 0.18);

    color: shade (@bg_color, 0.66);
}

.spinbutton,
.spinbutton:hover {
    color: @fg_color;
}

/***********
 * spinner *
 ***********/
@keyframes spinner {
    0.00% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }

    12.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)); }

    25.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)); }

    37.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)); }

    50.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)); }

    62.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)); }

    75.0% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)); }

    87.5% { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)); }

    100%  { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.875)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.750)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.625)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.500)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.375)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.250)), to(transparent)),
                              -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor, 0.125)), to(transparent)); }
}

.spinner {
    background-color: transparent;
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));
    background-position: 14% 14%, 0% 50%, 14% 86%, 50% 100%, 86% 86%, 100% 50%, 86% 14%, 50% 0%;
    background-size: 20% 20%;
    background-repeat: no-repeat;
}

.menu.spinner,
.primary-toolbar .spinner,
.primary-toolbar .spinner {
    color: @selected_bg_color;
}

.spinner:active {
    animation: spinner 1s infinite linear;
}
|improve this answer|||||
  • Sorry, this doesn't work. I still have all-black buttons. – Christopher Kyle Horton Sep 30 '12 at 17:49
  • Not sure, then. That's the only place I've found like that. There are a few places that look like backgrounds for the buttons, but then I can't find a button for the center. So I'm not sure if that's the files or not. Then again, I haven't found how it's being drawn either. I know it's labeled as a "button", but I've also seen "spinner". Since it spins while loading, that could be it. Regardless, this is all I've found so far. – Sly Sep 30 '12 at 18:25
  • Thank you anyways for the help. I've been taking stabs at this problem now and then for quite some time now, and I honestly have no idea what is causing it. Curiously enough, the problem goes away if I try this theme (without the above fixes) on 12.10, but I would like to have it working on 12.04 first. – Christopher Kyle Horton Oct 1 '12 at 0:50
  • Answer updated. – Sly Oct 1 '12 at 2:38
  • Okay, so your second version does change the spinner color on the play button from white to orange when I click on it. The icons otherwise stay white and the backgrounds are still solid black. We might be getting closer, though. – Christopher Kyle Horton Oct 2 '12 at 11:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.