Targeting only pages not blogpage/posts

Hey Martin,

It looks like your blog has been embedded in a regular WordPress Page, so it doesn’t have any helpful classes that would distinguish it from other pages e.g. (.is-blog-archive). So the best solution I can think of is to prefix your selectors that shouldn’t affect the blog with body:not(.page-id-24).

For example:

body:not(.page-id-24) h3

Does that work for you?

Cheers,
Sebastian

Hey Martin,

The blog articles have unique ids of their own, so my previous solution will still affect the single articles. The following article has an id of mtp-1475 for instance: https://www.autismecentrum-groningen.nl/autisme-diagnose-wel-of-niet-vertellen/

The following should work:

body:not(.page-id-24) .fusion-column-wrapper {
   display: block;
}

body:not(.page-id-24) .fusion-image-element {
   margin-right: 4%;
   float: left;
}

The reason .mtp-20 .mtp-633 didn’t work is because space separated CSS selectors define parent/child context. .mtp-633 is not inside .mtp-20 so it doesn’t work. To target multiple pages you need to use commas e.g.

.mtp-20 .fusion-column-wrapper,
.mtp-633 .fusion-column-wrapper {
   display: block;
}

.mtp-20 .fusion-image-element,
.mtp-633 .fusion-image-element  {
   margin-right: 4%;
   float: left;
}

However, that will get tedious if you have to define lots of pages. So if my initial solution isn’t right (perhaps because it still targets too many pages) there is a final option – use custom body classes. This following video explains how to use custom classes. It simplifies the CSS so you just reference one class e.g.

.my-custom-class .fusion-column-wrapper {
   display: block;
}

.my-custom-class .fusion-image-element {
   margin-right: 4%;
   float: left;
}

I hope that helps!

Hey Martin,

I just realised I didn’t post the video explaining how to add custom body classes to pages. Here it is:

https://themeover.com/reuse-styles-with-custom-body-classes/

I wasn’t suggesting that you add custom classes to the inner HTML of the page, the video shows a simpler method. And then the following code should work (replacing my-custom-class with whatever class you add):

.my-custom-class .fusion-column-wrapper {
display: block;
}

.my-custom-class .fusion-image-element {
margin-right: 4%;
float: left;
}

Cheers,
Sebastian

Hmm, how soon to you need to solve this? The feature I’m working on right now, which will hopefully be ready by the end of the month, allows for assigning MT folders to specific pages, or types of page. It supports custom PHP-like logic for edges cases too, so I’m pretty sure I can provide you with a convenient way to target all pages bar the blog page. The custom logic would look like this:

is_page() and !is_page(24)

The trouble is, this feature is not ready this instant.

Cheers,
Sebastian