TWebMainMenu customization

Hi, I would like to use a different font and size for the TWebMenu. What is the best and more "rad way" to do that? I found a site where I can select fonts, sizes and so on and It returns the css. Where can I put that css to be applied to the component?

Thanks in advance,

At this moment, it can be done via CSS.

Add this CSS to the MainMenu demo for example and you should see a different font in the menu:

      ul { font-family : "Courier New" }

Than for your answer Bruno but Where? In which property? I don't do web at all and I wasn't expecting to deal with css. :(

Add this in your project HTML file.

Thanks that works but no way to center it. I have tried with text-align and all "alingns" in the browser devtools but nothing. I really though that with TMS Web Core I would never had to deal with ccs. Please any help and the suggestion to make it more RAD that in future versions.


What exactly do you want to achieve with alignment?

Center the menu like in the image.

It is always aligned to the left.

It mimics by default the VCL style TMainMenu.

To have this different, position the menu Container control center, for example like this in the MainMenu demo:

procedure TForm4.WebFormResize(Sender: TObject);
  webpanel2.Align := alNone;
  webpanel2.Top := 0;
  webpanel2.Width := 250;
  webpanel2.Left := (Width - WebPanel2.Width) div 2;

Bruno, thanks it works. But at the end I started to study css and it is pretty simple.The problem is that if you put a panel and a labels inside the panel, TMS construct it with a div for each label and I cannot make it works. In plain html and css it work like this:

But it have been impossible to make it work with TMS.
Any help please?


I'm not sure what exactly you want to do with the labels inside the panel?
How does this related to the TWebMainMenu your original question refers to?

I want to do the menu with 5 labels and make it look like the codepen I showed you.

If you want exactly this, have you considered just putting the HTML/CSS you want in a TWebHTMLDiv.HTML?

Yes, it could be a good idea, but now I'm trying to learn and understand the framework and very simple things looks cumbersome to me. For example I would like to have a vcl like example that do what I show in the image. 5 labels centered on a panel. I know how to do that in html or in vcl but I cannot make it happens in TMS Web Core. Please I would appreciate that simple thing.

A basic possible implementation is in the attached project. (5.6 KB)