Different Style for Different Text in Same Label (CSS)

Post Reply
Pleu
Posts: 5
Joined: Mon Apr 14, 2014 1:21 am

Different Style for Different Text in Same Label (CSS)

Post by Pleu »

I'm using CSS to style my labels, and I'd like to have the first line styled differently to the rest of the rest of the label.

How do I do this?

phasma
Posts: 191
Joined: Sat Aug 03, 2013 7:00 pm
Discord: phasma#4694

Re: Different Style for Different Text in Same Label (CSS)

Post by phasma »

You can pass HTML to a label. Is the method I use for this.

Pleu
Posts: 5
Joined: Mon Apr 14, 2014 1:21 am

Re: Different Style for Different Text in Same Label (CSS)

Post by Pleu »

I was under the impression that you could somehow tag specific parts of the label, but I can't quite remember, or find anything online on how it can be done.

User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

Re: Different Style for Different Text in Same Label (CSS)

Post by Oneymus »

If you're familiar with HTML, it's fairly trivial. Here's an (untested) example of an inline style:

Code: Select all

<p style="color: blue">Some blue text.</p>
<p style="color: red">Some red text.</p>
You'll want to look up some CSS to throw in the style attribute. You can also pass style information in tag format, but it's a little less flexible/more verbose.

Pleu
Posts: 5
Joined: Mon Apr 14, 2014 1:21 am

Re: Different Style for Different Text in Same Label (CSS)

Post by Pleu »

Oh yeah, I remember how it's done now, but it doesn't seem to be working on Mudlet.

This as the text:

Code: Select all

<p class="a">Test</p>
<p class="b">Test2</p>
This as the CSS:

Code: Select all

p.a {
    font-size: 13px;
}

p.b {
    font-size: 9px;
}
This would work when doing regular HTML, but it doesn't seem to do anything in Mudlet. Am I doing something wrong, or is it just not implemented?

User avatar
Oneymus
Posts: 321
Joined: Thu Sep 17, 2009 5:24 am

Re: Different Style for Different Text in Same Label (CSS)

Post by Oneymus »

I dropped this code into an alias exactly as shown here, and it works as expected. Are you getting errors? Are you looking at said errors?
Code: [show] | [select all] lua
echo("Starting HTML test...\n")

createLabel("htmlTest", 50, 50, 100, 100, 1)
setBgColor("htmlTest", 50, 50, 50)

echo("htmlTest", 
	[[<p style="color: blue">Some blue text.</p>]] ..
	[[<p style="color: red">Some red text.</p>]]
)

echo("End HTML test.\n")

Pleu
Posts: 5
Joined: Mon Apr 14, 2014 1:21 am

Re: Different Style for Different Text in Same Label (CSS)

Post by Pleu »

Sorry, I meant my HTML + CSS example doesn't work, not yours.

Basically, CSS Selectors don't work, so I guess I'll have to use HTML for any formatting.

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: Different Style for Different Text in Same Label (CSS)

Post by Vadi »

How were you using them? That is, what commands?

Pleu
Posts: 5
Joined: Mon Apr 14, 2014 1:21 am

Re: Different Style for Different Text in Same Label (CSS)

Post by Pleu »

Using Geyser, I have code as follows:

Code: Select all

css = CSSMan.new([[
	background-color: rgb(255, 255, 255);

	.a {
		background-color: rgb(0, 255, 255);
	}
]])

x = Geyser.Label:new({
  name = "x",
  x = 0,
  y = 0,
  width = "10%",
  height = "10%",
})
x:setStyleSheet(css:getCSS())
x:echo([[
  <p class="a">Class a</p>
  <p class="b">Class b</p>
]])
I'd expect it to color the background white, while making the background of "Class a" cyan, but instead it makes the whole thing cyan. It seems to be ignoring the CSS class selector and just applying it regardless.

User avatar
Vadi
Posts: 5035
Joined: Sat Mar 14, 2009 3:13 pm

Re: Different Style for Different Text in Same Label (CSS)

Post by Vadi »

Yeah, it might not be accounting for the CSS selectors.

Post Reply