hi , i’m working on a web app in xojo for the first time and i find it interesting but i dont like the styles of buttons and background ect…
i’m looking for a way to change the style or free styles to download.
[quote=188735:@Boudali Alae]hi , i’m working on a web app in xojo for the first time and i find it interesting but i dont like the styles of buttons and background ect…
i’m looking for a way to change the style or free styles to download.[/quote]
You can change the style of buttons and controls any way you like.
Click Insert/Webstyle. You will be able to set the color, the shape (round corners or not, for instance), the fonts, the border. Then simply select the newly created style in the Inspector for your button.
Thank you for the answear , But i think that its noot good enough am i wrong?
if not , is there anyway to work with css in my project
[quote=188739:@Boudali Alae]Thank you for the answear , But i think that its noot good enough am i wrong?
if not , is there anyway to work with css in my project[/quote]
You cannot use CSS directly.
What is it you want to do that you cannot achieve with Web Style ?
That is 100% Incorrect. You may in fact utilize CSS directly in your webapps since Real Studio 2011, and it is fully supported.
How To:
- Paste the CSS in your Application Header.
- Create EMPTY Xojo webstyles with the SAME NAME as the CSS Class names. (By empty, it is meant, DO NOT use the the Xojo Style editor to apply any styles to the webstyle you created).
- Using the Xojo IDE property inspector, set the desired styles using the Style property, by selecting the names of the CSS classes.
Here is a demo web application using user defined CSS.
Download :
There are many more examples in the Xojo Developer’s Library over at that show not-so-well-known tricks that are common misconceptions for Xojo and Web Edition applications. Custom CSS can be used to create advanced Web GUI’s, menus, and such, that Xojo’s WebStyles alone cannot achieve. Although, web edition was thought out so well enough, that developers have room to customize quite a bit.
By the way, custom CSS generators exist all throughout the web. The CSS used for the demo provided came from
There are also Xojo-based webstyles that users have uploaded to XDS as well.
(There are 3 packs (containing many) of styles found at the site.
[quote=188773:@Matthew Combatti]That is 100% Incorrect. You may in fact utilize CSS directly in your webapps since Real Studio 2011, and it is fully supported.
[/quote]
thank you 
WebStyles do quite the same as the CSS generators you peddle.
The OP mentions it is his first time, and you want to embark him on using non documented ways and convoluted methods. That is not fair to a newcomer. The method you present as legitimate is a hack that may break when Xojo modifies Web Styles.
It should be used only when the documented method cannot do.
You present that hack as “fully supported”. This is not true. Xojo does not support it more than any other undocumented code. Worse, the presence of such an artifact in a project would probably mean Xojo reject support requests because of it.
@Boudali Alae : The documented method as described in the UserGuide-Development.pdf chapter 3 (in the Documentation folder next to the Xojo IDE executable) is the only one sanctioned by Xojo, and I strongly suggest you try to use it first. If for some reason, the features available did not suffice, then you can move to the hack, but it should not be your primary method.
It WON’T nor CANNOT break. App.header is created before any Xojo webstyles are appended to the app header. CSS protocol is a “first come, first serve” standard. If you did add webstyles through Xojo they would be ignored because the first instance of a CSS is the ONLY one served up to the web browser when applied. Not only would it be foolish for Xojo to change the order in which styles are added AFTER the user defined app.header, it would cause more bugs than God could count. The user defined header was created explicitly for the purpose of user defined styles and scripts. This was discussed in the 2011 beta email list. Creating an empty style merely makes the user defined names accessible within the Xojo IDE. The user defined header will ALWAYS preceed Xojo appended styles and the CSS protocol will ALWAYS BE “first come, first serve.”
Now… using JavaScript to apply styles could potentially break in future updates if the DOM structure changes, and is not supported as a “permanent” solution. The aforementioned is a guaranteed permanent solution.
Please consult Greg if you have questions or worries of such ever changing.
The point is not about why it works or not. The OP is just learning Xojo, and instead of letting him use the documented procedures described in the literature provided by Xojo, you push him into using undocumented hacks. This is not right.
[quote=188739:@Boudali Alae]But i think that its noot good enough am i wrong?
if not , is there anyway to work with css in my project[/quote]
Michael, I am afraid I have to agree with Matthew as the OP said that what Xojo offers is not enough (I totally concur with him) and he asked how he could work with the CSS directly. That is exactly what Matthew answered and this is the only way to can do nicer things with the web app styling and has been confirm by Greg before. It would be great if each web style had the ability for you to override the Xojo settings in the actual style itself so that you could enter your own CSS but that is not currently possible therefore the only way around this is to use the CSS style changes in the header which works perfectly and is not really a hack when it is the only way to do it.
(on a side note, Matthew please can you reply to my emails, thanks)
[quote=189022:@Nathan Wright]Michael, I am afraid I have to agree with Matthew as the OP said that what Xojo offers is not enough (I totally concur with him) and he asked how he could work with the CSS directly. That is exactly what Matthew answered and this is the only way to can do nicer things with the web app styling and has been confirm by Greg before. It would be great if each web style had the ability for you to override the Xojo settings in the actual style itself so that you could enter your own CSS but that is not currently possible therefore the only way around this is to use the CSS style changes in the header which works perfectly and is not really a hack when it is the only way to do it.
(on a side note, Matthew please can you reply to my emails, thanks)[/quote]
When someone learns how to drive, I am not sure launching him on the race track is the best way to go. Besides, a whole lot of CSS generators on the web do nothing more than a Xojo Web Style.
But indeed, if you want to do fancy CSS, that is the only way to go. It will remain a hack as long as it will not be supported and documented by Xojo. I do regret that not to be the case, but they must have their reasons.
I fully agree with you that it is not ideal by any stretch but is the only way apart from using 3rd party plugins. You could also use the web source control but if my memory serves me right this gets loaded specifically for each page whereas the header is loaded only once as part of the main Xojo page.
Source control will not work. App.HTMLHeader is indeed the right place.
JavaScript could be used too, but is is far less convenient.
Is this because the source control is loaded after the Xojo CSS or something else?
I just verified. HTMLSource is part of .
HTMLHeader is in , where CSS should be.
ah, thanks that makes sense.
Actually, I posted last week an easy way to use Google Fonts that precisely use the CSS styles together with a Xojo Web Style. I found out that not everything needs to be in the header, but it remains possible to set all the standard properties in the Web Style editor.
Whatever is set in the header has priority. So for instance if I set a style as font Deja Vu Red text color in CSS, the Web Style cannot change that. But I will be able to change corners for the control, back color, font size, text justification, and so on, from the Xojo Web Style editor. The best of both worlds, as it were…