More button styles

  • Resolved belean_cristian

    (@belean_cristian)


    4 years, 1 month ago

    Hi.
    I’m trying to style the default More button and it works until I hit the button, then the default styles kick back in.
    background-image: linear-gradient(rgb(51, 102, 153) 20%, rgb(34, 68, 119) 100%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    The :hover state is still OK and if I click outside anywhere on the page the settings I applied come back.
    How can I make my styling stay active all the time?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Sayontan Sinha

    (@sayontan)

    You can target this selector:

    .photonic-login-box a.auth-button, .photonic-login-box a.auth-button:visited, .photonic-more-button, .photonic-more-button:visited, .photonic-show-gallery-button, .photonic-show-gallery-button:visited

    I think the :visited pseudo-selector is overriding your setting.

    Thread Starter belean_cristian

    (@belean_cristian)

    So, i tried adding the :visited selector but still no luck.
    Apparently there’s a CSS file created based on the lightbox library i select to use and inside that CSS file there’s this setting that gets applied. This CSS file gets loaded after my styling, how could I apply my code to get loaded after the CSS file?

    Plugin Author Sayontan Sinha

    (@sayontan)

    You don’t need to do that. CSS has a concept called “specificity”. You can do this:

    .photonic-login-box a.auth-button, .photonic-login-box a.auth-button:visited, .photonic-more-button, .photonic-more-button:visited, .photonic-show-gallery-button, .photonic-show-gallery-button:visited {
    background-image: rgb(255, 48, 48) !important;
}

    The !important tells the browser that even if there is a CSS definition for the same selector in the page loaded by a later file, this one should be used. It is also possible to make your selector more specific, but for you !important should suffice.

    Thread Starter belean_cristian

    (@belean_cristian)

    @sayontan Thank you for replying so quickly.
    Unfortunately it’s not working as desired. The above code does no difference to the end result.
    The funny thing is that, the whole thing returns to normal when I click anywhere on the page, once the blue background of the button is there. I mean that I just click anywhere and the pink background is back, as expected.

    Plugin Author Sayontan Sinha

    (@sayontan)

    OK, try adding a few more to the selector:

    .photonic-login-box a.auth-button, .photonic-login-box a.auth-button:visited, .photonic-more-button, .photonic-more-button:visited, .photonic-show-gallery-button, .photonic-show-gallery-button:visited, .photonic-login-box a.auth-button:active, .photonic-login-box a.auth-button:focus, .photonic-login-box a.auth-button:hover, .photonic-more-button:active, .photonic-more-button:focus, .photonic-more-button:hover, .photonic-show-gallery-button:active, .photonic-show-gallery-button:focus, .photonic-show-gallery-button:hover {
    background-image: rgb(255, 48, 48) !important;
}
    Thread Starter belean_cristian

    (@belean_cristian)

    Specificity is not the issue here, as this is specific enough and in devtools when I look at the code this one with !important it’s applied, but, still, that button will not behave …
    Any outside the box ideas? I’m willing to try other ways around it …
    Thank you!

    Plugin Author Sayontan Sinha

    (@sayontan)

    Sorry – I am not sure why I put in background-image in the above. That doesn’t make sense. I should have said background-color, and that is what you are using.

    That being said, I think I understand what the problem might be: you are using background-color, but I am targeting a more universal background. For your definitions, change it from background-color to background and see if it helps.

    Regarding specificity, the reason it is showing in blue is because the active selector being targeted is the :focus pseudo-selector, not the :visited pseudo-selector. I added :focus with my second modification (which you have already incorporated).

    Thread Starter belean_cristian

    (@belean_cristian)

    Aaaaannnnddd ….
    It worked … exactly as you said.
    Thank you again for the time and effort.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘More button styles’ is closed to new replies.