Jump to content

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

Link to post
Share on other sites
  • 2 weeks later...
  • 2 weeks later...

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!

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!

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...