1. Due to issues with external spam filters, QQ is currently unable to send any mail to Microsoft E-mail addresses. This includes any account at live.com, hotmail.com or msn.com. Signing up to the forum with one of these addresses will result in your verification E-mail never arriving. For best results, please use a different E-mail provider for your QQ address.
    Dismiss Notice
  2. For prospective new members, a word of warning: don't use common names like Dennis, Simon, or Kenny if you decide to create an account. Spammers have used them all before you and gotten those names flagged in the anti-spam databases. Your account registration will be rejected because of it.
    Dismiss Notice
  3. Since it has happened MULTIPLE times now, I want to be very clear about this. You do not get to abandon an account and create a new one. You do not get to pass an account to someone else and create a new one. If you do so anyway, you will be banned for creating sockpuppets.
    Dismiss Notice
  4. If you wish to change your username, please ask via conversation to tehelgee instead of asking via my profile. I'd like to not clutter it up with such requests.
    Dismiss Notice
  5. Due to the actions of particularly persistent spammers and trolls, we will be banning disposable email addresses from today onward.
    Dismiss Notice
  6. We have added another rule, please check the Rules post for more information.
    Dismiss Notice
  7. Due to some issues with Freenode, the QQ IRC Channel is moving. See here for more information.
    Dismiss Notice

Stylus help thread

Discussion in 'General' started by OverReactionGuy, Jun 11, 2021.

Tags:
  1. OverReactionGuy

    OverReactionGuy The only Sane one left

    Joined:
    Oct 10, 2014
    Messages:
    20,227
    Likes Received:
    100,102
    I require help with stylus since I have no idea how to use it or where to learn.

    Is there a way to make this text.

    [Aaliyah El-Said of Earth-16]

    Not blue or whatever?

    It hurts my eyes trying to read it, especially using a black background.

    Other than that this thread can be used by other people with their own requests and hopefully someone would help.

    I can't really guaranteed that.
     
  2. Kinematics

    Kinematics Well worn.

    Joined:
    May 14, 2015
    Messages:
    6,538
    Likes Received:
    17,491
    Assuming you've already installed Stylus, create a new rule for this URL or site.

    Next, figure out what you want to change. In this case, you have a run of text inside a post that is colored blue. So we need to figure out how to identify that block of text in CSS.

    Right-click on the text in question, and Inspect it. This should bring up the dev panel of your browser, showing the HTML of the page, and the targeted text should be highlighted.

    There are two things we want: We want to restrict the CSS changes to only be inside a message post; and we want to identify the code that turns the text blue.

    The message post is contained within various div's (or certain other tags) with specific classes. Here on QQ, we have an <ol> (ordered list) which contains all the messages on the page. This has a class of "messageList". Inside the <ol> are <li> tags (list items) for each post, with a class of "message". Inside that are divs for user info (avatar and name and stuff on the sidebar) and the actual message div, which itself contains some navigation elements and such.

    For our purposes, we want the div with a class of "messageContent". To make sure there aren't other instances of that which might overlap (for example, threadmark listings), we'll tie it together with the "message" <li>.

    Code:
    li.message .messageContent {
    }
    
    Now inside this we look for the blue text. With XenForo, color is applied with a <span>.
    Code:
    <span style="color: #0040ff">[Aaliyah El-Said of Earth-16]</span>
    
    Because inline styling (like above) has the highest priority in CSS, we have to mark our override as !important. If you're overriding the normal site stylings (such as default fonts or whatever), you don't need that, though you'll still need to be aware of CSS priorities.

    You have two choices in how to override this. You can either give an explicit color (eg: I want this to be white), or you can force it to return to inheriting the base color (such as off-white on a dark background), which won't need to be changed if you change site styles.

    In order to affect this, and only this, style, we need to know how to specify a span with a blue color style. For this, we use an attribute selector:
    Code:
    span[style*="color: #0040ff"]
    
    In this case, it's referring to any span with an inline style which changes the text color to blue.

    And now put it all together:
    Code:
    li.message .messageContent span[style*="color: #0040ff"] {
    	color: red !important;
    }
    
    In this case I changed the text to red to make it obvious that it's having the proper effect.

    However, let's say we want to inherit the default color instead. In that case, we'd use:
    Code:
    li.message .messageContent span[style*="color: #0040ff"] {
    	color: inherit !important;
    }
    
    However an interesting problem shows up. Instead of showing white text on a dark background (assuming you're using a dark theme, like mine), it's showing black text on a dark background.

    That's because the text is not only surrounded by a span to turn the text blue, but by another span to turn the text black.

    Code:
    <span style="color: #000000"><span style="color: #0040ff">[Aaliyah El-Said of Earth-16]</span></span>
    
    This isn't obvious in the original post, and you'll only notice it when examining the HTML (or when editing your post and looking at the BBCODE).

    Since I'm using a dark theme, I know that there shouldn't be any black text. As such, I can override this color span as well. I still want to inherit the default text color, so I can just add to the rule set I created above.
    Code:
    li.message .messageContent span[style*="color: #0040ff"],
    li.message .messageContent span[style*="color: #000000"]{
    	color: inherit !important;
    }
    
    And now the text shows up as the default off-white.
     
    wasprider and OverReactionGuy like this.
  3. OverReactionGuy

    OverReactionGuy The only Sane one left

    Joined:
    Oct 10, 2014
    Messages:
    20,227
    Likes Received:
    100,102
    Thank you for this! It really helps.
     
    wasprider likes this.