Change CSS in RunTime

[mikromundo]

Hi, in UniTreeMenu I have a CSS. In RunTime I want to change the background-color:

.x-treelist-nav {       /* Aqui ira determina a COR DE Fundo do menu */
    background-color: [[MENU_COLOR]] !important;    //<------ I want to change here

}

thanks for help !!!

[belo]

/* CustomCSS */
.tree_menu .x-treelist-nav {
    background-color: red;
}

// RunTime

procedure TMainForm.btnAddClick(Sender: TObject);
begin
 UniSession.AddJS('$(''#'+TUniControl(UniTreeMenu1).JSId+''').addClass(''tree_menu'')');
end;

procedure TMainForm.btnRemoveClick(Sender: TObject);
begin
 UniSession.AddJS('$(''#'+UniTreeMenu1.JSId+''').removeClass(''tree_menu'')');
end;

Best Regards

Eduardo Belo

[mikromundo]

obrigado  belo... mas consegui aqui...era isso que queria:

 

     UniSession.AddJS('$(''.x-treelist-nav .x-treelist-item-text'').css({ ''color'': ''' + ( ColorToHtml( btnSelColor_MenuFont.Color ) ) + ''' })' );

 

deu certinho !!!

Mas muito obrigado mesmo assim !!!

 

[Freeman35]

@mikromundo eğer herkes kendi dilinde yazarsa, forum çok karışacak.

[mikromundo]

You're right @Freeman35 Excuse me. Eduardo Belo is a personal friend and I didn't pay attention to that.

[Haklin0816]

A way to add custom CSS to individual frames and forms:

Create a CSS file to override or add classes. If you create a new class and want to assign it to a component put the class name in LayoutConfig.Cls of the component.

1. CSS File example.css:

/*Rounded edges on edits*/
.x-textfield .x-input-wrap-el {
    -webkit-border-radius: 3px; !important;
}
/*class FormSubmitButton*/
.FormSubmitButton {
    font: 16px 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
    background: #47a404;
    background-color: #47a404;
    color: #fff;
    font-weight: 600;
    border-radius: 3px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}
.FormSubmitButton.x-hovered {
    color: #fff;
    background: #378003;
    background-color: #378003;    
}
.FormSubmitButton .x-inner-el {
    padding: 7px;
    border: 0px;
    background-color: #47a404;
    background-image: none;
}
.FormSubmitButton.x-hovered .x-inner-el {
    background: #378003;
    background-color: #378003;     
}

 

2. Set LayoutConfig.Cls of your button to FormSubmitButton

3. Put the following in form/frame OnCreate

procedure Ttestframe.UniFrameCreate(Sender: TObject);
Var Script:String;
begin
        Script := 'var fileref = document.createElement("link");'+#13#10+
        'fileref.rel = "stylesheet";'+#13#10+
        'fileref.type = "text/css";'+#13#10+
        'fileref.href = "/css/example.css";'+#13#10+ //<-- Path to CSS file
        'document.getElementsByTagName("head")[0].appendChild(fileref);';
        TUnimForm(Self.OwnerForm).WebForm.Script.Add(Script); //<-- In Frame
        //Self.WebForm.Script.Add(Script); //<-- In Form
end;

 

[mikromundo]

Thanks @Haklin0816

Very nice.

[55143681]

On 12/14/2019 at 8:34 AM, belo said:

/* CustomCSS */
.tree_menu .x-treelist-nav {
    background-color: red;
}

// RunTime

procedure TMainForm.btnAddClick(Sender: TObject);
begin
 UniSession.AddJS('$(''#'+TUniControl(UniTreeMenu1).JSId+''').addClass(''tree_menu'')');
end;

procedure TMainForm.btnRemoveClick(Sender: TObject);
begin
 UniSession.AddJS('$(''#'+UniTreeMenu1.JSId+''').removeClass(''tree_menu'')');
end;

Best Regards

Eduardo Belo

for cBuilder:

void __fastcall TMainForm::UniBitBtn1Click(TObject *Sender)
{//修改背景颜色
UniSession->AddJS("$(\"#"+UniTreeMenu1->JSId+ "\").addClass('tree_menu')");
}
//---------------------------------------------------------------------------

void __fastcall TMainForm::UniBitBtn2Click(TObject *Sender)
{//恢复背景颜色
UniSession->AddJS("$(\"#"+UniTreeMenu1->JSId+ "\").removeClass('tree_menu')");
}
//---------------------------------------------------------------------------

[55143681]

On 4/24/2021 at 7:18 AM, Haklin0816 said:

A way to add custom CSS to individual frames and forms:

Create a CSS file to override or add classes. If you create a new class and want to assign it to a component put the class name in LayoutConfig.Cls of the component.

1. CSS File example.css:

/*Rounded edges on edits*/
.x-textfield .x-input-wrap-el {
    -webkit-border-radius: 3px; !important;
}
/*class FormSubmitButton*/
.FormSubmitButton {
    font: 16px 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif;
    background: #47a404;
    background-color: #47a404;
    color: #fff;
    font-weight: 600;
    border-radius: 3px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}
.FormSubmitButton.x-hovered {
    color: #fff;
    background: #378003;
    background-color: #378003;    
}
.FormSubmitButton .x-inner-el {
    padding: 7px;
    border: 0px;
    background-color: #47a404;
    background-image: none;
}
.FormSubmitButton.x-hovered .x-inner-el {
    background: #378003;
    background-color: #378003;     
}

 

2. Set LayoutConfig.Cls of your button to FormSubmitButton

3. Put the following in form/frame OnCreate

procedure Ttestframe.UniFrameCreate(Sender: TObject);
Var Script:String;
begin
        Script := 'var fileref = document.createElement("link");'+#13#10+
        'fileref.rel = "stylesheet";'+#13#10+
        'fileref.type = "text/css";'+#13#10+
        'fileref.href = "/css/example.css";'+#13#10+ //<-- Path to CSS file
        'document.getElementsByTagName("head")[0].appendChild(fileref);';
        TUnimForm(Self.OwnerForm).WebForm.Script.Add(Script); //<-- In Frame
        //Self.WebForm.Script.Add(Script); //<-- In Form
end;

 

for cBuilder:

void __fastcall TMainmForm::UnimFormCreate(TObject *Sender)
{
String Script;
Script = "var fileref = document.createElement(\"link\");";
Script+="fileref.rel = \"stylesheet\";";
Script+="fileref.type = \"text/css\";";
Script+="fileref.href = \"/css/example.css\";"; //<-- Path to CSS file
Script+="document.getElementsByTagName(\"head\")[0].appendChild(fileref);";
//TUnimForm(Self.OwnerForm).WebForm.Script.Add(Script); //<-- In Frame
this->WebForm->Script->Add(Script); //<-- In Form
}