Jump to content
Sign in to follow this  
petermm

CSS class name vs StyleClass property

Recommended Posts

that is correct, by default, SMS will look for a class in the style sheet that matches your component.  If you want to override this, you assign it to StyleClass

If I have a control - "TMyControl"

then if it exists in the style sheet 

.TMyControl{

background-color: red;

}

It will use it

However, if I assign my controls StyleClass to say

MyControl.StyleClass:= 'SomethingElse';

then it will look in StyleSheet for that

.SomethingElse{

background-color: red;

}

 

 

Share this post


Link to post
Share on other sites

Finaly I've found the following: All exrension to my Custom CSS are ignored. I had to create my own TW3StyleSheet in FormCreate, following a suggestion in an other post in this forum, and add my extensions there. Still confused a little bit...  

Share this post


Link to post
Share on other sites
1 hour ago, petermm said:

Finaly I've found the following: All exrension to my Custom CSS are ignored. I had to create my own TW3StyleSheet in FormCreate, following a suggestion in an other post in this forum, and add my extensions there. Still confused a little bit...  

No, you should not have to do that.

In Project Options\Linker

Check "Use Custom theme"

Compile your project - It now shows up in your Project Manager as "Custom CSS"

Now any changes you make to the custom theme , will reflect in runtime after you run or compile

 

Share this post


Link to post
Share on other sites

There are two ways to change CSS:

  1. Use custom theme + edit and add css there
  2. Use an existing theme and add your own css through code using TW3StyleSheet

The drawback of #1 (using a custom theme) is that you will copy the Theme that was in Smart Mobile Studio at that point. If (and when) new controls and styles are added to Smart Mobile Studio, your css file will not get them. That's a small problem if you only add new styles, but if you also edit and change the CSS, it may be hard to back port the changes to a newer theme.

Also, using a custom theme makes it harder for you to test your app with different themes. It also makes it pretty much impossible to change the style dynamically at startup based on the device it's run on. This feature is not yet in Smart Mobile Studio, but I do have a proof of concept which works nicely.

If the reason for your editing the theme is to generally make your own (change colors, fonts, anything), I'd suggest that you copy the desired theme file to a new one in the Themes-folder (copy default.css MyBeautifulTheme.css) and edit the new file there. The advantage is that you will then be able to use that theme in any Smart Mobile Studio projects you write. You'll also be able to share the theme with other SMS programmers.

Making your own theme is actually not hard. The idea is to edit the constants in the beginning of the theme file (colors, padding etc.), the generic font definitions (.ThemeFontSmall etc.) and the generic border and background types (.TW3ControlBackground etc.) As all the controls use these generic definitions, the changes are reflected everywhere in the theme.

Share this post


Link to post
Share on other sites

The problem is, that methode #1 (use custom theme and add css) does not work for me.  As mentioned before,  all changes to my Custom CSS are ignored at runtime. I guess it has to do with the project history (It is one that was build with SMS 2.x some years ago).  Maybe the app.css file is located at a wrong place (...\www\res at the moment) or the initialization sequence is not correct for some reason... Don't know where to look next at the moment. 

Share this post


Link to post
Share on other sites

What I've found now is, that the 
 

   <link rel="stylesheet" type="text/css" href="res/app.css"/>

was missing in index.html. Maybe that was because the project includes a "Custom Template" that loads another CSS for some DHTMLX components used.

I've added  link rel="stylesheet" type="text/css" href="res/app.css"  to the Custom Template now and the problem seems to be gone 😊

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×