Jump to content
Czar

[2.9.9.79] CSS Theming issues

Recommended Posts

Drop a panel on a form - set ThemeBorder to btNone and -   no border - excellent

 

Drop TW3Image or TW3IFrameHTMLElement and do the same and you continue to have a border displayed. Even if I try to add in CSS to the custom css file I continue to see borders around these components.

 

It is driving me to distraction.

Share this post


Link to post
Share on other sites

Tw3image continues to display a border in 2.9.9.86

 

theme border is set to btnone;

 

I have tried "fixing" it by setting CSS of tw3image but it doesn't work, the image continues to display a border.

 

Can this please be fixed it is very annoying.

Share this post


Link to post
Share on other sites

This has been raised before. The image border is simply a part of the theme. 
Each theme will have properties that reflect the platform they represent. If you dont like a style you can call ThemeReset() on the control to get rid of it.

// Completely reset theme and styling
W3Image1.ThemeReset();

ThemeReset removes the theming styles, but TW3Image can also have some residual settings. In this case, just blank out the StyleClass property completely:

W3Image1.ThemeReset();
w3Image1.StyleClass :='';

If you want your own style, I would suggest just using the GlobalStyleSheet() instance and add your CSS there. Having an extra CSS file just for small potatoes is overkill.
You can get the global stylesheet (which is a sheet created on demand and used by our effects and other sub systems):

// Get global stylesheet
var styles := TW3StyleSheet.GlobalStyleSheet();

// Append our css snippet (Note: Only add once, good for unit Initialization section)
styles.append(#".MyImageStyle {
  /* Add your css here
  }
");

// And apply our custom style, perhaps a nice border, no border, gradient background
W3Image1.StyleClass := '.MyImageStyle';

That should do the trick!

Share this post


Link to post
Share on other sites

Thanks for the reply I didn't know about themereset, I will play around with that. However I am a bit confused. Why have the themeborder property if it doesn't work?

I would expect ThemeBorder set to btNone to remove the border, but it doesn't

Share this post


Link to post
Share on other sites

An empty tw3image continues to display a border

even if I

 

  W3Image1.ThemeReset();
  w3Image1.StyleClass :='';

 

as suggested. Also setting a custom css still makes the image display a border.

 

Share this post


Link to post
Share on other sites

In that case it is a part of the image class and cannot be removed.
This is a mistake and i would have to edit the code to see what is going on.
Some of the controls have look/feel that is hardcoded into the stylesheet - and the border is one of them.

But i will have a look at this pronto and get back to you!

Share this post


Link to post
Share on other sites

Easy fix: Select the theme file you want, then check the "use custom css". This creates a clone of the last selected theme and gives you a css file in the IDE.

Search for ".TW3Image" and look at the css -- im fairly sure you will find a border set there. Remove that, then copy & paste the text into a new textfile and save that under the Themes folder. Now reboot smart and the theme should be available from the normal list -- call it "Ubuntu Ext" for instance. Not a permanent solution, but good enough until the next update.

You can also set the border style manually via: w3image1.handle.style['border'] := '0px none'; If that works, then we know its hardcoded as a part of the theme.

Or, create a new class that inherits from TW3Image, override "StyleTagObj" and just call inherited + ThemeReset() + handle.style['border'] .... that should kill it until i issue a permanent fix

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

×