Implement CSS in Web Project

Hi All,

I would like to try to implement CSS in my web project, I know very little about CSS but my colleague can help me in this. She wrote me some CSS scripts but I failed to implement them into my project. The test project has simply a title bar, a navigation bar, and 2 canvas buttons (suppose to have hover effect). Can someone show me the direction? Thanks a lot in advance.

https://drive.google.com/open?id=0B2DNp_dIdcJXQTRHa3NPclhSRnc

Place your CSS in App.HTMLHeader, and make the style the same name as a WebStyle you apply to your control.

For instance

<style> .Style1 { color: red; } </style>

Your colleague should find that very simple to do.

That said, without any knowledge of CSS, you may encounter cases that go way over your head.

Yes, I did it in the way you said but seems it’s not working yet. Just want to try to separate the design work out from the app programming.

I should point out that overriding the styles as they are generated by Xojo is not supported. Much of what’s in the CSS code is necessary for the app’s appearance to be correct, specifically control positioning, size, shape etc.

Sorry Greg, I don’t quite understand, shouldn’t I name the style the same as the CSS class?

Sure you can. I’m just pointing out that if you do that and your controls no longer appear or work correctly, you’ll have to troubleshoot that yourself.

Humm… yes, I understand… I did try to work on by myself and I tried to follow Lars Lehmann’s tutorial: https://forum.xojo.com/23367-tutorial-using-css-in-webapps-to-make-your-webapp-more-beautifu/0

If your knowledge in CSS is limited, I would recommend you start by using WebStyles, and only use CSS for what WebStyles do not support. Somes CSS features may not work at all, for technical reasons too long to explain here.

Okay, I figured out that the CSS style (at least for my project) works with canvas and buttons, just don’t know why it doesn’t work with WebRectangle.

It depends largely on what you are trying to do as some style attributes will cascade down to the contained elements and some will not. Also keep in mind that Xojo controls usually have an outer container for positioning and an inner container for the control itself. You’ll need to use a browser’s developer tools to figure that out though.

And I should point out that we do change the structure of controls from time to time, so applying styles directly to the DOM may not work for all eternity, nor all previous versions.

[quote=302200:@Michel Bujardet]Place your CSS in App.HTMLHeader, and make the style the same name as a WebStyle you apply to your control.

For instance

<style> .Style1 { color: red; } </style>

Your colleague should find that very simple to do.

That said, without any knowledge of CSS, you may encounter cases that go way over your head.[/quote]

does doing this still work on the latest version of Xojo??

Yes

i try my existing web project on Xojo 2015r4.1 and it work. i use 2016r4.1 or 2017r1.1 and it does not work anymore. it basically ignore the following part on my app.HTMLHeader

<style type="text/css">
.ssBG1 {background-color: #c9f1f1;}
.ssBG2 {background-color: #a1e7e7;}
.ssBG3 {background-color: #f1f1c9;}
.ssBG4 {background-color: #f6f6dd;}
.ssBG5 {background-color: #ddf6ea;}
.ssBG6 {background-color: #f1fbf6;}
</style>

You want to add !important.
https://www.w3schools.com/w3css/w3css_color_themes.asp

<style type="text/css"> .ssBG1 {background-color: #c9f1f1 !important} .ssBG2 {background-color: #a1e7e7 !important} .ssBG3 {background-color: #f1f1c9 !important} .ssBG4 {background-color: #f6f6dd !important} .ssBG5 {background-color: #ddf6ea !important} .ssBG6 {background-color: #f1fbf6 !important} </style>

Incidentally, I fail to see why you need to do it this way, as basically webstyles manage background color quite correctly.

[quote=332613:@Michel Bujardet]You want to add !important.
https://www.w3schools.com/w3css/w3css_color_themes.asp

<style type="text/css"> .ssBG1 {background-color: #c9f1f1 !important} .ssBG2 {background-color: #a1e7e7 !important} .ssBG3 {background-color: #f1f1c9 !important} .ssBG4 {background-color: #f6f6dd !important} .ssBG5 {background-color: #ddf6ea !important} .ssBG6 {background-color: #f1fbf6 !important} </style>

Incidentally, I fail to see why you need to do it this way, as basically webstyles manage background color quite correctly.[/quote]

it work. so do i need to always use !important??

Yup. All the reasons why, IMHO, you should use first webstyles properties, and extra CSS only for properties not supported by webstyles.

will use webstyle instead… Michel…

what if i want to refer to a external css in the HTMLheader?? where should i put the css file both on the mac or windows and also when i am debug the web app, where should i put the external css file??

so far i have try various combination for the href

compile mode

<link type="text/css" href='ACMSWeb.css' rel="Stylesheet" media="all" />

debug mode

<link type="text/css" href='../ACMSWeb.css' rel="Stylesheet" media="all" />

Basically the technique works the same with embedded and external CSS.

The path is more complex with Mac, but under Windows and Linux, I would tend to use a CopyFile step to place the css file next to the executable.

Can’t i do the same method doing CopyFile and have the css next to the application file?