Search the Community

I replace code into CustomCSS.js, and not different found, not work

I must change code into CustomCSS.js?

Does not work with "TUniEdit" and with "TUniButton" How could I put these codes from the "CustomHint.js" and "CustomHint.css" files else where, for example "CustomHint.js" -> "MainForm" -> Script and "CustomHint.css" in "CustomCSS" in "TUniServerModule" And how could I change the CSS so that the Hint looks like a BallonHint I tried but I couldn't even change the font size I want with rounded corners and an Arrow to have the shape of a BallonHint .hintClass { color: white; font-size: 34px; // Does not work } .hintClass2 { background: dimgray; color: white; // Does not work visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; } Hint Unigui.7z

Reading this topic I tried to put the code in CustomCSS .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip:hover .tooltiptext { visibility: visible; } Then put in LayoutConfig.Cls := 'tooltiptext' however when hovering the mouse over the components it does not work See, I want a Hint function that when passing the Mouse over any component such as Button, Edit, etc.. the tip that is in the "Hint" property is shown and for that I am enabling "ShowHint"

Solution CustomCSS .x-mask-msg-text { font-size:14px; }

Thank you very much for this solution but just one question Where should I put this CSS ? i put in TUniServerModule.CustomCSS But the margin was bad even if I changed it to x-menu-item-text-default.x-menu-item-indent { margin-left: 98px; /* default 35px */ } .x-menu-item-text-default.x-menu-item-indent-no-separator { margin-left: 98px; /* default * 26px; */ } it didn't solve it. Tested in Google Chrome Versão 110.0.5481.105 (Versão oficial) 64 bits

Did you try the additional solution above? Just add to CustomCSS: .x-css-shadow { box-shadow: none !important; }

@newsanti Can you try this approach? 1. CustomCSS -> .customCanvas { display: flex; } .customCanvas .x-form-item-body { display: inherit; min-height: 1px; } 2. UniCanvas.LayoutConfig.Cls = customCanvas

Hello, For example: CustomCSS -> .x-datepicker-header .x-btn-inner, .x-datepicker-footer .x-btn-inner { font-family: Brush Script MT; font-size: 14px; font-weight: bold; }

@Sherzod, I make it to work : 1. when create component (in Form.OnCreate event) i set : TUniControl (MyComponent).JSInterface.JSConfig('userCls', ['customCSSBtn']); 2. in customcss .customCSSBtn.x-btn .x-btn-inner { color: gray !important; } .customCSSBtn:hover { background-color: #ff8c00; } .customCSSBtn.x-pressing { background-color: #ee7600 } my code is based to :

Sherzod, this was me testing:- CSS s:= '.customCheckboxGreen .x-form-checkbox '+ '{ '+ ' font-family: FontAwesome; '+ ' font-size: 16px; '+ ' background-image: none !important; '+ ' margin: 4px 0 0 0; '+ // Top, Right, Bottom, Left '} '+ '.customCheckboxGreen.x-form-cb-checked .x-form-checkbox:before '+ '{ '+ ' content: ''\f046''; '+ ' color: green; '+ '} '+ '.customCheckboxGreen .x-form-checkbox:before '+ '{ '+ ' content: ''\f096''; '+ '} '; CustomCSS.Add(s); // s:= '.customCheckboxRed .x-form-checkbox '+ '{ '+ ' font-family: FontAwesome; '+ ' font-size: 16px; '+ ' background-image: none !important; '+ ' margin: 4px 0 0 0; '+ // Top, Right, Bottom, Left '} '+ '.customCheckboxRed.x-form-cb-checked .x-form-checkbox:before '+ '{ '+ ' content: ''\f046''; '+ ' color: red; '+ '} '+ '.customCheckboxRed .x-form-checkbox:before '+ '{ '+ ' content: ''\f096''; '+ '} '; CustomCSS.Add(s); CHECKBOX cbPurOwing.LayoutConfig.BodyPadding:= '0 2 2 2'; // Top, Right, Bottom, Left *** NEVER UPDATES, MUST BE SET IN IDE *** with cbPurOwing.JSInterface do begin JSConfig('cls', ['customCheckboxGreen']); end; cbPurOwing.ClientEvents.ExtEvents.Clear; s:= 'mousedown=function mousedown(sender, x, y, eOpts) '#13#10 + '{ '#13#10 + // sender.preventDefault(); ' preventDefault(); '#13#10 + ' ajaxRequest(this, ''_eOpts_'', [''eOpts=''+eOpts]); '#13#10 + // eOpts=MouseButton: 0=Left, 2=Right '} '; cbPurOwing.ClientEvents.ExtEvents.Add(s); AJAXEVENT if EventName = '_eOpts_' then begin s:= Params['eOpts'].AsString; // MouseButton: 0=Left, 2=Right b:= StrToIntDef(s, 0); if b = 2 then begin // removeCls, addCls (setCls) configs with cbPurOwing do begin JSInterface.JSCall('removeCls', ['customCheckboxGreen']); JSInterface.JSCall('addCls', ['customCheckboxRed']); end; end else begin with cbPurOwing do begin JSInterface.JSCall('removeCls', ['customCheckboxRed']); JSInterface.JSCall('addCls', ['customCheckboxGreen']); end; end; end; // '_eOpts_' PROCESS LeftClick = Green RightClick THROWS UP CONTEXT MENU (I set disable above) ??? Please advise - thanks - Andy

1. function tabPanel.afterrender(sender, eOpts) { sender._refreshBody = function() { if (sender.tabBar.getRefItems().length == 0) { sender.ownerCt.addBodyCls('customBody') } else { sender.ownerCt.removeBodyCls('customBody') } }; sender._refreshBody(); sender.on('add', sender._refreshBody); sender.on('remove', sender._refreshBody); } 2. CustomCSS: .customBody .x-panel-body { background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"); background-repeat: no-repeat; background-position: center; }

in CustomCSS .x-menu-item-text-default{ font-size:15px; width:220px; }

Hello, 1. UniButton.LayoutConfig.Cls = roundBtn 2. CustomCSS: .roundBtn { border-radius: 10px; }

With this code I can change the font size of the message; but I can't change the font size of the buttons CustomCSS #messagebox-1001-msg { font-size: 30px } #messagebox-1001 .x-btn { font-size: 30px; }

Just add this to CustomCSS: #messagebox-1001 .x-btn { border-radius: 10px; }

Hello, 1. CustomCSS: .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip:hover .tooltiptext { visibility: visible; } 2. UniLabel.Caption = <div class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span></div> 3. UniLabel.TextConversion = txtHTML

This: /* width */ ::-webkit-scrollbar { width: 20px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; } in UniServerModule.CustomCSS?

Hello, Try including only CSS rules in CustomCSS.

Hello, For example: 1. CustomCSS: .customWin .x-panel-header { font: italic small-caps bold 14px cursive, serif; } 2. MainForm.LayoutConfig.Cls = customWin

PopUpMenu Item01 Item02 ... Item99 Only Item01 .. Item22 show the rest are not visible so need a vertical scroll. I tried CustomCSS.Add('.cls'); CustomCSS.Add('{'); CustomCSS.Add(' overflow-y: auto'); CustomCSS.Add('}'); makes no difference

Can you make a simple testcase with customCss you are using?

Something like this I guess: CustomCSS -> .rounded .x-tab-bar-strip { border-color: green; }

Please show me how to set "Mobile UnimEdit: FieldLabel Color, EditText Color, EditText Background Color ?" EditUser.ClientEvents.UniEvents.Clear; s:= 'beforeInit=function beforeInit(sender, config)'#13#10+ '{'#13#10+ ' config.cls='#39'customLabel1'#39';'#13#10+ '}'; EditUser.ClientEvents.UniEvents.Add(s); CustomCSS.Add('.customLabel1 '); CustomCSS.Add('{ '); CustomCSS.Add(' color: red; '); // NO EFFECT CustomCSS.Add(' background-color: #A7D0FE; '); // WORKS CustomCSS.Add(' font-color: blue; '); // NO EFFECT CustomCSS.Add(' text-font-color: red; '); // NO EFFECT CustomCSS.Add(' text-background-color: yellow; '); // NO EFFECT CustomCSS.Add('} ');

Hello, One possible solution: 1. CustomCSS -> ._disabledCls .x-mask { background-color: transparent; } 2. OnFormCreate -> procedure TMainForm.UniFormCreate(Sender: TObject); begin UniDBGrid1.JSInterface.JSConfig('disabledCls', ['_disabledCls']); end;