Logic Machine Forum
CSS Text position - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: CSS Text position (/showthread.php?tid=2222)

CSS Text position - DGrandes - 05.09.2019

Hi,

Is there any way to align text menu by css class?
I've created a menu css class and I want to align them horizontally with fixed separation.

It is possible?

Thanks

RE: CSS Text position - admin - 05.09.2019

Post a screenshot of what you want to achieve. For standard controls any CSS changes will affect all controls of the same type.

RE: CSS Text position - DGrandes - 05.09.2019

(05.09.2019, 07:31)admin Wrote: Post a screenshot of what you want to achieve. For standard controls any CSS changes will affect all controls of the same type.

Hi,

I have this:

   

And I want to get this by css:

   

RE: CSS Text position - admin - 05.09.2019

Can you provide a backup?

RE: CSS Text position - DGrandes - 05.09.2019

(05.09.2019, 09:28)admin Wrote: Can you provide a backup?
.gz   Project-LogicMachine-2019.09.05-11.37 (1).tar.gz (Size: 31.03 KB / Downloads: 23)


RE: CSS Text position - admin - 05.09.2019

Use this custom CSS. Modify width and height as needed. line-height should be the same as height for text to have middle vertical alignment. Element position should be adjusted in the editor.
Code:
.MenuInicio{
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  text-transform: uppercase;  
}

.item-control.ClasePorDefectoVisible{
  color: white !important;
  border-top: #05a3b7 0.2em solid;
  background-color: #424242;
}


RE: CSS Text position - DGrandes - 05.09.2019

(05.09.2019, 09:51)admin Wrote: Use this custom CSS. Modify width and height as needed. line-height should be the same as height for text to have middle vertical alignment. Element position should be adjusted in the editor.
Code:
.MenuInicio{
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  text-transform: uppercase; 
}

.item-control.ClasePorDefectoVisible{
  color: white !important;
  border-top: #05a3b7 0.2em solid;
  background-color: #424242;
}


Thank you!

It works
What is ".item-control" for?

RE: CSS Text position - admin - 05.09.2019

You can just put .ClasePorDefectoVisible there. Multiple selectors are sometimes needed to avoid "!important".

RE: CSS Text position - DGrandes - 05.09.2019

(05.09.2019, 13:05)admin Wrote: You can just put .ClasePorDefectoVisible there. Multiple selectors are sometimes needed to avoid "!important".
Ok! thanks

RE: CSS Text position - Domoticatorino - 11.09.2019

Hi folks,
I am studying the threads because I want to improve visualisation tricks.

Further to thread above, I cannot understant where it is call "MenuInicio". Because when I test the example you show in visualisation page is complete white.

Thanks.

RE: CSS Text position - admin - 11.09.2019

It's set in Additional classes. If you are testing the attached backup then make sure that you have at least one object on each plan otherwise it won't be shown because empty plans and plan links to such plans are not rendered at all.

RE: CSS Text position - Domoticatorino - 11.09.2019

(11.09.2019, 08:20)admin Wrote: It's set in Additional classes. If you are testing the attached backup then make sure that you have at least one object on each plan otherwise it won't be shown because empty plans and plan links to such plans are not rendered at all.

Yes,
you're right. The problem is the missing object. I forget everytime.
Thanks.
(11.09.2019, 08:20)admin Wrote: It's set in Additional classes. If you are testing the attached backup then make sure that you have at least one object on each plan otherwise it won't be shown because empty plans and plan links to such plans are not rendered at all.

Sorry Admin. Where I should declare Additional classes of Menu.Inicio?

RE: CSS Text position - Daniel - 11.09.2019

In the same place where ClasePorDefectoVisible, you can add more than one class to an element

RE: CSS Text position - DGrandes - 23.01.2020

Hi,

Is there any way to do the same with an "icon"? text-align center and line-height don´t work with this type of element.

Thanks

RE: CSS Text position - admin - 23.01.2020

Why do you need this for icon? Do you have icons with different sizes? If so it would be easier to make icons the same size.

RE: CSS Text position - DGrandes - 23.01.2020

(23.01.2020, 08:07)admin Wrote: Why do you need this for icon? Do you have icons with different sizes? If so it would be easier to make icons the same size.

Because if I do a table with text and icons text aling in the center but icon stays where I put in visualization.
It would be easyer if I could center the image with text.

Thanks