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.
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.
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.
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.
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.
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
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