Targeting only pages not blogpage/posts

This topic contains 10 replies, has 2 voices, and was last updated by  Sebastian 2 weeks, 3 days ago.

Author Posts

Martin_1

Hi,

Is there a way to target only the pages on https://www.autismecentrum-groningen.nl/ and completely ignore the blogpage https://www.autismecentrum-groningen.nl/blog/ and all its posts?

That way I can do some global CSS without affecting the blog.

Regards,

Martin


Sebastian

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


Martin_1

Hi,

Not sure if that is the solution. Won’t that affect the blogarticles as well?

What I am trying to achieve is the same as in my previous post but for ALL pages as they are almost all the same in regards to layout. I need to have the text flow on the right and below the image on the pages.

I have added a class for the column (pagearticle), I can add a class for the images (something like pageimage).

Is there a way to do it with those?

To target the column I currently have this:

.fusion-column-wrapper {
display: block;
}

To target the image I currently have this:

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

So I need to add the classes I created.

OR

I can ignore those classess and just add the page ID’s. However I tried to add two page ID’s. Like

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

.mtp-20 .mtp-633 .fusion-image-element {
margin-right: 4%;
float: left;
}
but then the CSS didn’t function any longer.


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!


Martin_1

Darn, I just can’t get it done.

I can add the custom classes to another div that already has the class .fusion-layout-column that controls the column an another div that already has the class .fusion-imageframe that controls the imageframe.

If you look at the source here https://www.autismecentrum-groningen.nl/autisme-coach/ you can see that I added pagearticle to the column and pageimage to the frame that contains the image.

So NOT the classes you provided .fusion-column-wrapper and .fusion-image-element

But the moment I then create something like:

.pagearticle .fusion-layout-column {
display: block;
}

.pageimage .fusion-imageframe {
margin-right: 4%;
float: left;
}

it doesn’t work.


Sebastian

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


Martin_1

Hi Sebastian,

That would have been a great solution but seeing as this site uses a theme that completely replaces a number of Gutenberg/WordPress options, I can’t access the custom fields option.

So I am back to where I was :-(.

Do you have any other solutions?


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


Martin_1

For now I am in no particular hurry. I did ask the creator of the theme if they had a way to get those custom fields back. So maybe they know how (for all I know it could be a setting in their themeoptions somewhere).

Just to be sure. I can’t target all the pages by page-ID and of the class at once without writing the class each time? Like this

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

The above or your new system which you are working on is, for this project, the only way?


Martin_1

Just a thought. This theme does offer cutsom fields through ACF. Would that be of use?


Sebastian

Hey Martin,

I would be happy to add support for ACF body classes too, but that feature isn’t available now, so it would also mean waiting a bit.

You must login or register to reply to this topic.