Jump to content
IElite

How to change the style of a TW3Header text?

Recommended Posts

How to change the style of a  TW3Header text?

 

.lblHeader{
  color: #005CB9;
}

If I drop a TW3Label on the form and set its StyleClass = lblHeader';

 

it works fine

 

however, if I try to change the Style class of the one on the headercontrol, it doesn't work

W3HeaderControl1.Title.StyleClass:= 'lblHeader';

I have tried it in both the InitializeForm and InitializeObjects methods and nothing!

 

thanks

 

 

 

Share this post


Link to post
Share on other sites

the !important rule ?

 

 

run-time

w3_setStyle(W3HeaderControl1.Handle.childNodes[0], 'color', '#005CB9');

 

or 

 

design-time

.TW3HeaderControl fieldset{
  color: #005CB9 !important;
}
 
The !important rule overrides that particular property.

 

Share this post


Link to post
Share on other sites

@design time

wouldn't that change all of the headercontrols?

 

.TW3HeaderControl fieldset{
  color: #005CB9 !important;
}
 
 
 

 

run-time

w3_setStyle(W3HeaderControl1.Handle.childNodes[0], 'color', '#005CB9');

 

or 

 

design-time

.TW3HeaderControl fieldset{
  color: #005CB9 !important;
}
 
The !important rule overrides that particular property.

 

Share this post


Link to post
Share on other sites

The TW3HeaderControl is rendered basically:
 

<div id="OBJ4" class="TW3HeaderControl">
  <fieldset id="OBJ5" class="TW3Label">
	<div id="OBJ6" class="TW3LabelText">Header</div>
  </fieldset>  
  <button id="OBJ7" class="TW3ToolButton">Back</button>
  <button id="OBJ8" class="TW3ToolButton" >Next</button>
</div>

A quick overdue of the Smart UI part is required! Come on, Smart company create more beautiful UI components!

 

For instance, the TW3HeaderControl control (SmartCL.Controls.Header unit), the properties Title, NextButton and BackButton are public scope instead of published! The code completion expects published properties. The code insight does not work for me, f.i.
 
  W3HeaderControl1.Title.Caption := 'Header';
  W3HeaderControl1.NextButton.Visible := true;
  W3HeaderControl1.NextButton.OnClick :=
    procedure (Sender: TObject)
    begin
      W3HeaderControl1.NextButton.Visible := false;
      W3HeaderControl1.BackButton.Visible := true;
      W3HeaderControl1.LayoutChildren;
    end;
  W3HeaderControl1.BackButton.Visible := true;
  W3HeaderControl1.BackButton.OnClick :=
    procedure (Sender: TObject)
    begin
      W3HeaderControl1.NextButton.Visible := true;
      W3HeaderControl1.BackButton.Visible := false;
      W3HeaderControl1.LayoutChildren;
    end;
 
Anyway, to change the TW3HeaderControl's color title is just
 
W3HeaderControl1.Title.Font.Color := RGBToColor(0, 92, 185);
 
another approach would be:

var el := W3HeaderControl1.Handle.firstChild;
w3_setStyle(el, 'color', 'rgb(0, 92, 185)');
 
W3HeaderControl1.Handle.firstChild --> will select the first node (the tag fieldset)

 

or

 

w3_setStyle(W3HeaderControl1.Handle.childNodes[0], 'color', '#005CB9'); 

 
 

or editing directly the CSS stylesheet.
 
/*  will override the property color of the tag <fieldset> which parent class = TW3HeaderControl */
.TW3HeaderControl fieldset{

  color: #005CB9 !important;
}
the css keyword !important means that will override the color property
 

color: rgb(255, 255, 255);

       to
color: rgb(0, 92, 185);
 

Share this post


Link to post
Share on other sites

Thank you for helping me understand it better!  Much appreciated!

 

 

I would like to do it in my custom CSS, but I can't 

 

 

.TW3HeaderControl fieldset{
  color: #005CB9 !important;
}


This would change all of my header controls instead of just the one i want to style custom
 
So, i guess iw ill use one of your other suggestions. Thanks!

Share this post


Link to post
Share on other sites

Let's suppose you have 2 W3HeaderControl controls (W3HeaderControl1, W3HeaderControl2), you'd like to change the color title of just one 'W3HeaderControl2'.  

 

The trick is select a specific W3HeaderControl, an insert a sub-class, at Property Inspector, config the StyleClass property to

TW3HeaderControl myHeader


 

and this custom CSS: 

 

.TW3HeaderControl.myHeader fieldset{

  color: #005CB9 !important;

}

Share this post


Link to post
Share on other sites

However, what I really wanted is to be able to do this

W3HeaderControl.Text.StyleClass:= 'lblHeader'

like i do with the buttons

 

 W3HeaderControl1.BackButton.StyleClass:= 'btnStandard';


 W3HeaderControl1.NextButton.StyleClass:= 'btnStandard';

 

I don't mind doing a style class object for the header as a whole, as long as I can style all the parts

 

 Header

  Label

  Button1

  Button2

 

in your case  markus_ja , its just the label

 

 

thanks

Share this post


Link to post
Share on other sites

e.g.. here is my style for my TW3HeaderControl

 

.pnlHeader {
cursor: inherited;
border: 5px solid #7c7a77;
resize: none;
font-size: 12px;
border-radius: 6px;

 background-color: #616A2E; 
}

and here would be the one for the header controls label

.pnlHeader > fieldset > .TW3LabelText {
  color: green;
}

and here is the one for the buttons

btnStandard{
  color: #fff;
  font-size: normal;


  background: #0075d0;
  border-radius: 4px;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.25) inset,
              0 1px 1px 0 rgba(0, 0, 0, 0.10) inset;}

can I combine them into one header style   "pnlHeader"  ?

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

×