change font Header mainmenu

[valadi]

add css code

 

.x-menu-item-text {  
font: bold 14px B mitra;
  color: green
}

 

 

plz image attach image 

 

 

 

how change font Header mainmenu ?

 

 

[Abaksoft]

Thanks valadi

It's useful.

[valadi]

how change font Header mainmenu ?

[Farshad Mohajeri]

how change font Header mainmenu ?

Hello

Are you still using trial edition?

Do you have any plan to switch to commercial edition?

[valadi]

Yes i have

Now I using trial edition

[Sherzod]

how change font Header mainmenu ?

 

Hi,

Perhaps the code is not optimal and is redundant,

But, try :

procedure TMainForm.UniFormCreate(Sender: TObject);
var
  fSize: Byte;
  MainMenuFirstItemName: string;
begin
  fSize := 20;
  MainMenuFirstItemName := FormMainMenu1.Name;

  UniSession.AddJS('Ext.util.CSS.createStyleSheet(".x-btn-default-toolbar-small .x-btn-inner { font-size: '+ IntToStr(fSize) +'px; color: green}");');
  UniSession.AddJS(
    'Ext.onReady(function(){'+
    ' var oldHeight = MainForm.'+MainMenuFirstItemName+'.container.up(''.x-toolbar'').getHeight();'+
    'MainForm.'+MainMenuFirstItemName+'.container.up(''.x-toolbar'').setHeight('+ IntToStr(fSize + 24) +');'+
    ' var newHeight = MainForm.'+MainMenuFirstItemName+'.container.up(''.x-toolbar'').getHeight();'+
    ' MainForm.form.el.setTop(newHeight - oldHeight);'+

    ' Ext.get(MainForm.'+MainMenuFirstItemName+'.container.up(''.x-toolbar'').id).select(''.x-btn'').elements.forEach(function(el){Ext.getCmp(el.id).setHeight('+ IntToStr(fSize + 19) +')});'+
    ' var dLeft = Ext.get(MainForm.'+MainMenuFirstItemName+'.container.el.select(''.x-btn-inner'').elements[0]).parent().el.getWidth() + Ext.get(MainForm.'+MainMenuFirstItemName+'.container.el.select(''.x-btn-inner'').elements[0]).parent().el.getLeft();'+
    ' MainForm.'+MainMenuFirstItemName+'.container.el.select(''.x-btn-inner'').elements.forEach(function(el, i){if (i=0) {Ext.get(el).el.parent().el.parent().el.setLeft(dLeft + 5); dLeft += (5 + Ext.get(el).el.parent().el.parent().getLeft());}});'+
    '});'
  );
end;

 

Best regards.

[bugra]

Hi Delphi Developer.

 

Your code actualy won't work cause it get error second AddJS.

You see the error in firebug console. It says MainForm.UniMainMenu1 is undefined.

 

First AddJS work and can change header font and color however if there is unitoolbar in project it can change its captions too.

 

If it's ok to you and valadi delete second AddJS and use it like that or add customCSS in server module like

.x-btn-default-toolbar-small .x-btn-inner {
   font: bold 14px B mitra;
  color: green
}

both same thing.

[Sherzod]

Hi!

 

MainForm.UniMainMenu1 is undefined:

 

UniMainMenu1 - should not be "TUniMainMenu", should be the first item, "TUniMenuItem"

 

Sorry, are you sure, you specify the first item? - MainMenuFirstItemName := FormMainMenu1.Name;

 

Best regards.

[bugra]

Oh sorry

 

But it still problem when there is uniToolbar. Unitoolbar caption color change and menu over them. Maybe cannot change height is a good opinion cause if we do this we might change toolbar position and then probably change another object possition and another and another...

[Sherzod]

Ok, no problem.. (sorry, I'm not clear pointed a variable in the code..)

 

We will analyze..

[bugra]

Ok if you wanna change only UniMainMenu's color and font size here is a code:

procedure TMainForm.UniFormCreate(Sender: TObject);
var
 k,j: Integer;
  fSize: Byte;
  MainMenuName: string;
  MainMenuItem : TUniMenuItem;
begin 
 fSize := 20; //this is the max size
  for k := 0 to UniMainMenu1.Items.Count-1 do
  begin
    MainMenuName := UniMainMenu1.Items[k].Name;
    MainMenuItem := UniMainMenu1.Items.Items[k];

    UniSession.AddJS(
     'Ext.onReady(function(){'+
     'var id = MainForm.'+MainMenuName+'.getItemId( )+"-btnInnerEl";'+
     'Ext.util.CSS.createStyleSheet("#"+id+" { font-size: '+ IntToStr(fSize) +'px; color: green}");'+
     '});'
    );

    for j := 0 to MainMenuItem.Count - 1 do
    begin
      UniSession.AddJS(
       'Ext.onReady(function(){'+
       'var id = MainForm.'+MainMenuItem.Items[J].Name+'.getItemId( )+"-textEl";'+
       'Ext.util.CSS.createStyleSheet("#"+id+" { font-size: '+ IntToStr(fSize) +'px; color: green}");'+
       '});'
      );
    end;
  end;
end;

It can't effect uniToolbar or another component. But your font size can not be more than 20 cause code doesn't change unimainmenu's height.

 

Thank you for your help DD and I hope this answer (or any of that in these posts) work for you valadi