freedowsRoO Posted March 14, 2019 Share Posted March 14, 2019 Hi guys! how you guys doing? I created a menu with a treeview in my aplication and i'm editing the CSS to let the application more beatiful. So, i change the background, imgs and font but i can't find how to change the CSS of hover and activated itens properties. Any ideia? Thanks! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 15, 2019 Share Posted March 15, 2019 Hi!, Can you please explain in more details providing part of your code, screenshots?! 1 Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 15, 2019 Author Share Posted March 15, 2019 7 hours ago, Sherzod said: Hi!, Can you please explain in more details providing part of your code, screenshots?! I just want to edit the TREEVIEW CSS. I can set the background and font color with the ".PanelTreeview .x-grid-cell" but the other properties like "focused" or "selected" doesn't work. Here is my CSS: /*SIDE MENU TREEVIEW INTERNO*/ .PanelTreeview .x-grid-cell { color: #767f8e; font: normal 1.0vw "Roboto", sans-serif; /* background-color: #2f353f !important; */ border-color: #fff; border-style: solid; } .PanelTreeview .x-grid-tree-node-expanded .x-tree-icon-parent { background-image: url(images/plants.png); } .PanelTreeview .x-grid-row-focused .x-grid-td { border-bottom-style: solid; border-bottom-color: #e2eff8; background-color: #e2eff8; } .PanelTreeview .x-grid-row-selected .x-grid-td { background-color: #c1ddf1; border-bottom-style: solid; border-bottom-color: #c1ddf1; } .PanelTreeview .x-grid-row-before-focused .x-grid-td { border-bottom-style: solid; border-bottom-color: #e2eff8; background-color: red; } .PanelTreeview .x-grid-row-before--selected .x-grid-td { background-color: red; border-bottom-style: solid; border-bottom-color: #c1ddf1; } and in my treeview i add this code in uniEvents: function beforeInit(sender, config) { config.cls='PanelTreeview'; } Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 15, 2019 Share Posted March 15, 2019 Sorry, which component are you using? 1 Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 15, 2019 Author Share Posted March 15, 2019 8 minutes ago, Sherzod said: Sorry, which component are you using? TUniTreeView Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 15, 2019 Author Share Posted March 15, 2019 Any ideia? To found the CSS class responsive to the treeview i'm running the application and using F12 to find the treeview css class, but no success at this moment. Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 15, 2019 Author Share Posted March 15, 2019 I found this solution: It's almost solve my problem, now i need that when I hover over the item it changes color. Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 16, 2019 Author Share Posted March 16, 2019 @Sherzod i did what i want but i found a 'bug'. The solution above doesn't work when i have a login form. As you can see in my example, the treeview in login form works well and in main form not work. tree.rar Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 16, 2019 Share Posted March 16, 2019 22 minutes ago, freedowsRoO said: i did what i want but i found a 'bug'. The solution above doesn't work when i have a login form. As you can see in my example, the treeview in login form works well and in main form not work. Hi, Can you please make a simple testcase?! I will check Thanks Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 16, 2019 Author Share Posted March 16, 2019 28 minutes ago, Sherzod said: Hi, Can you please make a simple testcase?! I will check Thanks Of course! I did it in my last post. =] 51 minutes ago, freedowsRoO said: @Sherzod i did what i want but i found a 'bug'. The solution above doesn't work when i have a login form. As you can see in my example, the treeview in login form works well and in main form not work. tree.rar Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 16, 2019 Share Posted March 16, 2019 59 minutes ago, freedowsRoO said: Of course! I did it in my last post. =] Ok, sorry, Can you try use like this?: Uses ... ServerModule; procedure TMainForm.UniFormCreate(Sender: TObject); begin UniServerModule.CustomCSS.Add( //<------------ // cor interna da treeview '#' + UniTreeView1.JSName + '_id .x-tree-view{'+ ' background-color: #2f353f;'+ '}'+ '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn{'+ ' background-color: #2f353f;'+ ' color: #767f8e;'+ ' font: normal 0.8vw "Roboto", sans-serif;'+ ' height: 40px; ' + ' padding-top: 10px;'+ '}'+ // Config da linha selecionada '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-selected .x-grid-cell-inner-treecolumn {'+ ' background-color: #212529;'+ ' color: #ffffff;'+ ' font: normal 0.8vw "Roboto", sans-serif;'+ ' border-Left: 3px solid #6e8cd7;'+ '}' + // Config ao passar o mouse em cima da linha '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-over .x-grid-cell-inner-treecolumn {'+ ' background-color: #212529;'+ ' color: #ffffff;'+ ' font: normal 0.8vw "Roboto", sans-serif;'+ ' border-Left: 3px solid #6e8cd7;'+ ' margin: 2px #2f353f; '+ '}' // // Altera imagem que expand o menu // '#' + UniTreeView1.JSName + '_id .x-tree-view .x-tree-lines .x-grid-tree-node-expanded .x-tree-elbow-plus {'+ // ' background-image: url(images/elbow-minus.png);'+ // '}'+ // // // Altera imagem que expand o menu // '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn {'+ // // '}' ); end; 1 Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 16, 2019 Author Share Posted March 16, 2019 No success yet, your code only work the second time that i running the application. 3 hours ago, Sherzod said: Ok, sorry, Can you try use like this?: Uses ... ServerModule; procedure TMainForm.UniFormCreate(Sender: TObject); begin UniServerModule.CustomCSS.Add( //<------------ // cor interna da treeview '#' + UniTreeView1.JSName + '_id .x-tree-view{'+ ' background-color: #2f353f;'+ '}'+ '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn{'+ ' background-color: #2f353f;'+ ' color: #767f8e;'+ ' font: normal 0.8vw "Roboto", sans-serif;'+ ' height: 40px; ' + ' padding-top: 10px;'+ '}'+ // Config da linha selecionada '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-selected .x-grid-cell-inner-treecolumn {'+ ' background-color: #212529;'+ ' color: #ffffff;'+ ' font: normal 0.8vw "Roboto", sans-serif;'+ ' border-Left: 3px solid #6e8cd7;'+ '}' + // Config ao passar o mouse em cima da linha '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-over .x-grid-cell-inner-treecolumn {'+ ' background-color: #212529;'+ ' color: #ffffff;'+ ' font: normal 0.8vw "Roboto", sans-serif;'+ ' border-Left: 3px solid #6e8cd7;'+ ' margin: 2px #2f353f; '+ '}' // // Altera imagem que expand o menu // '#' + UniTreeView1.JSName + '_id .x-tree-view .x-tree-lines .x-grid-tree-node-expanded .x-tree-elbow-plus {'+ // ' background-image: url(images/elbow-minus.png);'+ // '}'+ // // // Altera imagem que expand o menu // '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn {'+ // // '}' ); end; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 16, 2019 Share Posted March 16, 2019 28 minutes ago, freedowsRoO said: No success yet, your code only work the second time that i running the application. 4 hours ago, Sherzod said: Ok sorry we will try to find another solution 1 Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 16, 2019 Author Share Posted March 16, 2019 3 minutes ago, Sherzod said: Ok sorry we will try to find another solution Thanks so much for your help. 1 Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 18, 2019 Author Share Posted March 18, 2019 Hi again! @Sherzod I'm using the UNIGUI 1.0 and i realized that this version don't have the 'uniTreeMenu' i saw that the TreeMenu does exactly what i'm trying to do with the 'Treeview' component. So my question is. The treeMenu was released in wich version? I'll upgrade my UNIGUI. 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 18, 2019 Share Posted March 18, 2019 2 hours ago, freedowsRoO said: I'm using the UNIGUI 1.0 and i realized that this version don't have the 'uniTreeMenu' i saw that the TreeMenu does exactly what i'm trying to do with the 'Treeview' component. So my question is. The treeMenu was released in wich version? I'll upgrade my UNIGUI. Hi, It is available from build: But, better if you will upgrade to the latest version and build 1 Quote Link to comment Share on other sites More sharing options...
freedowsRoO Posted March 18, 2019 Author Share Posted March 18, 2019 Thank you! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 18, 2019 Share Posted March 18, 2019 Thank you! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.