Implement CSS in Web Project

  1. ‹ Older
  2. 2 years ago

    Tony L

    8 Dec 2016 Pre-Release Testers, Xojo Pro Hong Kong

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

  3. @Tony L 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.

  4. Tony L

    8 Dec 2016 Pre-Release Testers, Xojo Pro Hong Kong

    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

  5. Michel B

    8 Dec 2016 Pre-Release Testers RubberViews.com
    Edited 2 years ago

    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.

  6. Tony L

    8 Dec 2016 Pre-Release Testers, Xojo Pro Hong Kong

    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.

  7. @Tony L 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.

  8. Richard D

    24 May 2017 Pre-Release Testers, Xojo Pro Europe (UK, London)

    @Michel B 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.

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

  9. Michel B

    24 May 2017 Pre-Release Testers RubberViews.com

    Yes

  10. Richard D

    25 May 2017 Pre-Release Testers, Xojo Pro Europe (UK, London)

    @Michel B 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>
  11. Michel B

    25 May 2017 Pre-Release Testers RubberViews.com
    Edited 2 years ago

    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.

  12. Richard D

    25 May 2017 Pre-Release Testers, Xojo Pro Europe (UK, London)

    @Michel B 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.

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

  13. Michel B

    25 May 2017 Pre-Release Testers RubberViews.com
    Edited 2 years ago

    @Richard D 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.

  14. Richard D

    25 May 2017 Pre-Release Testers, Xojo Pro Europe (UK, London)

    will use webstyle instead... Michel...

  15. Richard D

    25 May 2017 Pre-Release Testers, Xojo Pro Europe (UK, London)

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

    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" />
  16. Michel B

    25 May 2017 Pre-Release Testers RubberViews.com
    Edited 2 years ago

    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.

  17. Richard D

    25 May 2017 Pre-Release Testers, Xojo Pro Europe (UK, London)

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

  18. Michel B

    25 May 2017 Pre-Release Testers RubberViews.com
    Edited 2 years ago

    That is exactly what I was suggesting. Under normal circumstances I would tend to put such files in Resources, but since HTMLHeader has to be filled at design time, that is probably the simplest.

  19. 3 weeks ago

    Richard D

    Nov 21 Pre-Release Testers, Xojo Pro Europe (UK, London)

    Hi i just try similar thing again and do the copy file in mojave. still don't know how to the external css. i try the both with the ../ and without for the ACMSWeb.css

  20. Maximilian T

    Nov 21 Pre-Release Testers, Xojo Pro Europe, Germany, Berlin

    Did you see this thread: https://forum.xojo.com/23367-tutorial-using-css-in-webapps-to-make-your-webapp-more-beautifu ?

  21. Richard D

    Nov 21 Pre-Release Testers, Xojo Pro Europe (UK, London)

    @MaximilianTyrtania Did you see this thread: https://forum.xojo.com/23367-tutorial-using-css-in-webapps-to-make-your-webapp-more-beautifu ?

    yes i read up on the post and manage to do it when i put the follow code on the App.HTMLHeader after setting up the MAMP and put the css in the WEStyle in my Apache htdocs folder

    <link href="http://127.0.0.1:8080/WEStyle/stylesheet.css" type="text/css" rel="stylesheet" media="all">

    i was using empty style1 and style2 in the IDE and in my css, set the style1 and style2 to something with border and color

    does not work if i use the following thought

    <link href="stylesheet.css" type="text/css" rel="stylesheet" media="all">
    or 
    <link href="../stylesheet.css" type="text/css" rel="stylesheet" media="all">

or Sign Up to reply!