Create box around number before clicking

  • Resolved Dan Bollinger

    (@dan-bollinger)


    5 years, 4 months ago

    What would the CSS be for this modification, please?

    I would like a similar box, but with a different background color, to surround the footnote number as happens after clicking. This way it appears more like a button.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author prismtechstudios

    (@prismtechstudios)

    Hi @dan-bollinger! If I’m understanding correctly, you could accomplish that by adding CSS like this – changing the CSS based on how you’d like it to appear.

    
.modern-footnotes-footnote {
  border-radius: 3px;
  border: 1px solid #999;
  box-shadow: 1px 1px rgba(0,0,0,0.2);
  background: #f3f3f3;
  padding: 1px 3px;
}

    Let me know if that works for you!

    Thread Starter Dan Bollinger

    (@dan-bollinger)

    Worked great! Thanks bunches! I used your code as the basis for my formating tweaks. I wanted the typeface to be a little larger, yours seems to be at 70%. The left margin moved it away from the last letter in the sentence to avoid crowding.

    .modern-footnotes-footnote {
    font-size: 75%;
    border-radius: 3px;
    border: 1px solid #666;
    padding: 1px 2px 2px 2px;
    margin-left: 2px;
    background: lightyellow;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Create box around number before clicking’ is closed to new replies.