Web 2.0: Pseudo class selectors in WebStyles?

Targets Web
1

Hi there!
As most of us, I’m trying to find my way around the Web 2.0 Framework.
Having zero previous web development experience, I was quite comfortable with the WebStyles system of the first framework. It made sense to me, in a RADdish way :slight_smile:

I’m now running into this issue:
Say I want to custom-color a button using a CSS property, so I put this in the Opening event of the button:

me.Style.Value(“background-color”) = “coral”

…and it works fine!
But what if I want to set the color (or any other property, really) when it is being hovered by the cursor?
How do I set the background-color of :hover ?

Is it possible to do this via WebStyles?
If not, how would you go about doing it?

Thanks!

2

I did a quick search (no CSS expert) and it looks like the hover is not (easy) available as a direct Style.Value.

You will need some help with Xojo code that could add the CSS class to the control, like @Brock_Nash (he posted the code sample in the forum) or @Lars_Lehmann github https://github.com/StadtLandNetz/Xojo-Web-2.0-Style-Converter

3

This gives you the ability, if you write your own CSS.

With the Xojo onboard-functionalities :hover on labels doesn’t work anymore. Also because they decided to not implement mouseEvents like “mouseOver” and such.

4

Why you say :hover on labels doesn’t work anymore?

This is a regular label on Web 2.0:
image

This is the same label when I “hover” over it:
image

I have this code (App HTML Header):

<style>
label:hover {
color: rgba(190,0,0,1.00) !important;}
</style>
5

I said “With the Xojo onboard-functionalities”

Altering the CSS over the HTMLHeader of the App is not really an onboard-functionality, like the old Style-Editor provided.

So yes - CSS works. But with pure Xojo/Xojo-Code you won’t be able to change to color on mouse hover.

6

Oh, ok, sorry about that.

1 Like
7

Okay, doing it via WebStyles is no longer possible.
Alberto’s trick in the HTML header is interesting, but it’s global in nature.
What I’m interested in, is changing the hover behavior of a single button/label/whatever on a single webpage. Not all of them as a class, everywhere.

I think it’s a reasonable, simple thing to ask and I find it hard to believe that it has got so complicated.
Unless I’m missing something very fundamental here, which is not unlikely.

for example, a nice, elegant way of doing it could have been:
me.Style.Value(“background-color” , "hover") = “coral”

I guess, my question becomes: how do you arbitrarily change CSS properties of an single control without involving WebStyles?

8

There’s not really anything out of the box to do this right now. My GraffitiStyle class, however, can accomplish what you’re looking for.

As an example, untested:

var myButtonClass as GraffitiStyle = GraffitiStyle.Create( Session, "myButtonClass", "background:rgba(0, 0, 0, 0.2);color:#00f" )
var myButtonClassHover as GraffitiStyle = GraffitiStyle.Create( Session, "myButtonClass", "background:rgba(0, 0, 0, 0.8);color:#f00", GraffitiStyle.States.Hover )
myButtonClass.AddTo(Button1)
9

just have a look at this

It combines CSS and a new class of Webstyle, so you can decide per control which style you want to apply.

It is similar to @Anthony_G_Cyphers GraffityStyle classes with the difference, that you set in my Classes the CSS in the HTMLHeader, not in Xojo-code.

10

Anthony, Lars, thank you for your suggestions. I’ll look into them.

For the record, I really think that such functionality ought to be part of the framework.
I hope it reaches a level of maturity where we won’t be needing to resort to workarounds like these to respond to such ridiculously simple and common requirements. Especially when it used to be there and it was taken away!

1 Like
11

Hi everyone,

Did anybody manage to solve this directly using Xojo codes?

I need to change some properties for a container control upon mouse hover
without resorting to global app level changes.

TIA

12

Whats the reason why you don’t want to use CSS?

13

Lars,

I mean how to implement that kind of CSS in Xojo without having to set it at app level.

For normal CSS property, i used the xx.style.value property to set the CSS directly in XOJO

Stations(i).Style.Value("margin-top")="10px;"
Stations(i).Style.Value("margin-bottom") ="10px;"
Stations(i).Style.Value("margin-right") ="10px;"
tations(i).Style.Value("margin-left")= "10px;"
Stations(i).style.value("box-shadow") = "4px 4px 2px #C1E1C1"

But for some CSS properties , like hover, i have no idea how to implement it.
e.g, the following wont work.

Stations(i).Style.value(“hover”)=“{ color: red;}”

Is there any solution to implement the above?