Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Change the content

Can I change the selector's (e.x, button) text content? I now know I can add it if selector haven't a text but can I change it?

Comments

  • edited June 2 Firefox
    Yes, by using some workarounds.
    Too much work really.
    (You can crop, resize, hide, add text(only text or images), etc, in all element or parts of by using css.)

    If you need help with a specific button, reply with the url, which and the text you want to be shown.
  • You can use a pseudo-element. An example which changes the text on the New Discussion button on this page:

    @-moz-document domain("forum.userstyles.org") {
    .BigButton{
        font-size: 0 !important;
      }
    .BigButton:after {
        content: "Testing"!important;
        font-size: 15px!important;
      }
    }
    
  • edited June 3 Firefox
    @calico never thought of font-size 0.. i mean, never thought it would work. Thank you.
  • calico said:

    You can use a pseudo-element. An example which changes the text on the New Discussion button on this page:

    @-moz-document domain("forum.userstyles.org") {
    .BigButton{
    font-size: 0 !important;
    }
    .BigButton:after {
    content: "Testing"!important;
    font-size: 15px!important;
    }
    }
    Wow, thanks you so much!
  • You're both welcome. I can't take any credit for anything other than posting it though, it's a trick I picked up from other forum members here.

  • I can always recommend the articles provided by css-tricks

    https://css-tricks.com/replace-the-image-in-an-img-with-css/ (also works for text)

    https://css-tricks.com/css-image-replacement/
  • That's one of my favorite sites. Thanks for the links!

  • I got to also share this trick for image replacement as a thank-you.
    You can actually "replace" an image by using the border-image property while also setting the background-image to none.
Sign In or Register to comment.