How to import Styles from Web 1.0 to Web 2.0

Hello,
I’m currently trying to convert my Web 1.0 project to Web 2.0.
When I’m just opening my Web 1.0 project in Xojo 2020.1, the styles will be still in the project.
When I’m trying to assign them to an object, I’m getting the error message:

Expected a value of type class WebStyle, but found a static namespace reference to class NaviButton.

What can I do to fix this?

I did also try to rebuild my styles using definitions, but there aren’t all the stylefeatues available which were available at Web 1.0 (e.g. round corners or gradient background)

Well, you cannot easily do that. Web 2.0 did away with Web 1.0 styles as you know them. You must use a bootstrap theme. That is fine if you like crayola colored buttons… But I digress. @AlbertoD showed a way in an other post (possibly only visible to testers) to import Web 1.0 styles. Basically, you copy the underlying javascript of your styles (from a saved text file), and add them to your selected bootstrap theme. Then you code the style to each control that needs it. Cumbersome at best, but feasible.

For developers creating applications that run in a browser, as opposed as web applications that go together with a website, importing styles is almost a must have feature that I do not understand to be in the plans at all.

can you give me the link to that post?
I’m also in the testers group.

here it is

Some of what is discussed there dates when we could not simply add the bootstrap theme to the project, but the general idea still makes sense. I believe also that others such as @Brock_Nash did something similar using dictionaries to hold styles and add them programmatically if and when needed. I don’t have a specific link for that.

Maybe this could be something for you:

Work is still in progress, but you can already use CSS classes, where you get back all styling functions as in Web 1.0

1 Like

This does sound interesting.
I will definitly take a deeper look into that.

I “solved” it like AlbertoD.
In my mainpage I created a method named “Style_Navibutton” using the Attribute Object as Webbutton.
In the method i’m declaring the style definitions like this:

Object.style.value(“font-family”) = “Lucida Grande, sans-serif”
Object.style.value(“font-weight”) = “bold”
Object.style.value(“font-style”) = “normal”
Object.style.value(“font-size”) = “10pt”
Object.style.value(“text-decoration”) = “none”
Object.style.value(“text-align”) =“left”
Object.style.value(“color”) =“rgba(255,255,255,1.00)”
Object.style.value(“border-top”) =“1px none rgba(182,182,182,1.00)”
Object.style.value(“border-left”) =“1px none rgba(182,182,182,1.00)”
Object.style.value(“border-bottom”) =“1px none rgba(182,182,182,1.00)”
Object.style.value(“border-right”) = “1px none rgba(182,182,182,1.00)”
Object.style.value(“padding-left”) =“20px”
Object.style.value(“padding-right”) ="-20px"
Object.style.value(“border-top-left-radius”) =“0px”
Object.style.value(“border-bottom-left-radius”) =“0px”
Object.style.value(“border-bottom-right-radius”) =“0px”
Object.style.value(“border-top-right-radius”) =“0px”
Object.style.value(“background-color”) =“rgba(255,255,255,0.00)”
Object.style.value(“background-image”) =“none”

The style information I got from style.css of my current WEB1.0 applicaton.

In the opening() event of my buttons I do this:
Style_Navibutton(me)

So I’m running the style method referring to the control as an attribute.