Footer widget area links styling

  • Resolved gorfeas

    (@gorfeas)


    1 year, 1 month ago

    Hi there,
    I am trying to style the links in the footer widget area.

    I have managed to add

    .widget-area a {
    color: var(–footer–color-link);
    text-decoration: none;
    text-decoration-style: solid;
    text-decoration-color: currentColor;
    }

    and it works However I am having a hard time to define the active (onclick) background color.
    I have tried adding

    .widget-area a:active {
    background-color:transparent;
    }

    but it doesn’t work. When I click on a link it still shows black…
    My webpage is not public and you have to insert this to view it
    frontend: KBqJRdMfk4cBsNH

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator threadi

    (@threadi)

    1 year, 1 month ago

    The black background color comes from the focus, not from the active. You should therefore be able to adjust this:

    .widget-area a:active, .widget-area a:focus {
     background-color: transparent;
    }
    Thread Starter gorfeas

    (@gorfeas)

    1 year, 1 month ago

    Inserted the css snippet but background still turns black when link is clicked upon…

    Any ideas?

    • This reply was modified 1 year, 1 month ago by gorfeas.
    • This reply was modified 1 year, 1 month ago by gorfeas.
    Moderator threadi

    (@threadi)

    1 year, 1 month ago

    Yes, the specificity is not high enough. That’s why it doesn’t apply to the other styles. Write it like this:

    .site .widget-area a:active, .site .widget-area a:focus {
     background-color: transparent !important;
    }
    Thread Starter gorfeas

    (@gorfeas)

    1 year, 1 month ago

    That’s just great. Thank so much for your time.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Footer widget area links styling’ is closed to new replies.