Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.
The devs are no longer actively involved in the forum, so any bug reports regarding the extension or website should be sent to them directly at contact@userstyles.org.

Change the content

edited June 2018 in Style Development Chrome
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 2018 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 2018 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.