How to know what object means what in hub.css

[MindaugasBacius]

Hei,

How to know what selector in hub.css to correct to get the results?

For example, I want to align the text in the Sense hub sheet objects. But only by knowing that the text alignment can be modified in

 .qv-grid .qv-details-name {...}

and adding to it the following:

text-align:center; 

I will get the correct result.

But how should I know what each and every piece in the hub.css script mean?

There a lot of them, like:

.q-hub-move-app__group__item

.q-task-log-popover .q-task-log-popover-hostname-label

.rain-loader .progress-loader div

Where should I look to understand what do they mean?

Thank you!

[Andrei_Cusnir · Accepted solution]

Hello,

If my understanding is correct, you would like to change the values in the hub.css file, however you would like to find a way to easily distinguish which selectors you need to change to achieve your desired outcome. This can be done with Developers Console from your browser. Here are the steps that I have followed to achieve that:

1. Go to the Hub using Chrome (as example)
2. Hit the button "F12" to enable the Developers Console or "Ctrl + Shift + I"
3. After that you will have to follow the steps below:
4. 
5. If you find this selector in the hub.css file and add your css code there such as:
6. 
7. Save the hub.css and refresh your view
8. You should now see:
9. 
10. As you can see, the styling was applied in the section that we wanted

I hope that this information was helpful. In case it has helped you resolve the issue, please mark it as accepted so other community members could also find this answer easily. In case I have misunderstood the use case scenario please elaborated in detail by providing additional information. 

[MindaugasBacius]

@Andrei_Cusnir , this is super useful!

You have just saved the day!