Can I style WP Toolset custom post types with Microthemer?

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 4 years, 11 months ago.

Author Posts

weblad

Hi,

Can I style WP Toolset custom post types with Microthemer?

I’m not talking about styling individual posts already published, but the default layout for single CPTs and archives?

My website will have it’s users creating posts (single CPTs) so I dont want to style each post once it’s published (as wp-types suggested 🙁 )

I was told Divi worked with Toolset.. until I purchased Toolset, and now I’m told it doesn’t work with Divi layouts, so I’m nervous about buying more themes and plugins based on the standard “It works with any theme” answer.

Thanks,
Dave


Sebastian

Hi Dave,

I just did a quick test with the free version of Toolset Types: https://en-gb.wordpress.org/plugins/types/

It certainly will be possible to uniformly style custom posts of a given type with Microthemer. You will often need to customise the CSS selectors Microthemer generates with a post type specific prefix however. Assuming you want to do the following:

  1. Style archive pages for a given post type (e.g. properties) in a particular way that may be different from other archive pages.
  2. Style single posts for a given post type (e.g. property) in a particular way that may be different from other single post types.

This may or may not involve more CSS than you would like. The following video shows how to prefix the CSS selectors Microthemer generates with classes Toolset types adds to the body element, thus limiting the scope of the selector to a given post type (for single or archive).

Video: http://somup.com/cb6bjTVYia

Note: I made a little mistake near the end of the video which I kept in because I also show how to overcome it. On the archive page, I target the heading element and try to change the font color to green. But it doesn’t work because the heading has a link element nested inside which sets a different font color. To correct my mistake, I use the re-target selector option, and then ensure I click on the inner link element rather than the outer heading element. This means I don’t have to redo the color change I made by starting a new selector from scratch.

I hope that helps. Please let me know if you have any further questions.

Thanks,
Sebastian


weblad

Thank you for your detailed answers and for going to the trouble of making a video!And yes, I did spot the mistake thanks to the warning 🙂

My problem /challenge is that I’m only just starting my journey with Toolset – but I think I get the theory so far.

So, I’m using Toolset Views and Layouts too with the WP-Types minimal starter theme (to ensure proper integration with Toolset). Actually, I’m going to be using the full Toolset suite once it’s in full production.

I’m in the process of building the unstyled version of the site now, so I should be better able to explain my confusion shortly.

What I can see you doing in the video is styling a ready-made Property post. But I’m not really getting what’s being done in the DOM tree. If another user created a new Property now, would that new single property have a green title too?

By the way, I really like your product. My fear at the moment is investing my time in learning a new tool, when I already have a ridiculous workload plus I’m now learning Toolset for an actual live project.

To give you bit of background (if you’re interested) we’re developing deskfinder.co.uk, which will be a directory site for co-working spaces and office shares in the UK.

We’re planning on getting up and running as a Minimum Viable Product quite quickly. So it’s important for me to choose the right tools upfront. Hence all the questions!

Thanks again,
Dave


Sebastian

Hi Dave,

Yes, the user’s new single property page would have a green title. That’s because all single property pages have a common class added to the body tag (single-property). I showed that in the HTML pane of the advanced targeting options. I was demonstrating how you can find these page-specific classes.

Once you’ve found the class that describes the type of page, you can prefix the selectors MT suggests, as shown in the video e.g.

.entry-title

becomes:

.single-property .entry-title

I recommend using Microthemer if it will allow you to achieve your goals more easily or quickly than any other method (e.g. coding by hand if you already know some CSS). Otherwise, you might want to consider outsourcing the development and focus on your business objectives, especially if time is your most precious commodity right now.

Either way, I wish you all the best with Desk Finder. And I’m here if you have any further questions.

Thanks,
Sebastian

You must login or register to reply to this topic.