Skip Navigation

[Resolved] How to set different CSS for a View and a Views Widget

This thread is resolved. Here is a description of the problem and solution.

Problem:

In a View we've set a particular appearance with the CSS Editor (view image), bit using the same view in the hoe page with a Widget, the look are not optimal.

How can we set a different CSS rule for the widgets?

Solution:

If the home page is a WordPress page, for example page ID is 123, there should be a CSS class in HTML body tag: "page-id-123".

You can use it to customize the CSS style of home page, for example:

https://toolset.com/forums/topic/how-to-set-different-css-for-a-view-and-a-views-widget/#post-1274397

Relevant Documentation:

This support ticket is created 5 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 2 replies, has 2 voices.

Last updated by lucaC-7 5 years, 7 months ago.

Assisted by: Luo Yang.

Author
Posts
#1274327
Schermata 2019-06-21 alle 10.24.20.png

Hi, in a View we've set a particular appearance with the CSS Editor (view image), bit using the same view in the hoe page with a Widget, the look are not optimal.

How can we set a different CSS rule for the widgets?

Thanks in advance.

#1274397

Hello,

If the home page is a WordPress page, for example page ID is 123, there should be a CSS class in HTML body tag: "page-id-123".

You can use it to customize the CSS style of home page, for example:

.page-id-123 .titolomanuale{
/** here setup your custom CSS codes**/
}

And use ".titolomanuale" to customize the widget area contents, for example:

.titolomanuale{
/** here setup your custom CSS codes**/
}
#1274637

My issue is resolved now. Thank you!