Stylus help thread

[OverReactionGuy]

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.

 

[Kinematics]

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>.

li.message .messageContent {
}

Now inside this we look for the blue text. With XenForo, color is applied with a <span>.

<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:

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:

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:

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.

<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.

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.

 

[OverReactionGuy]

Thank you for this! It really helps.