choose a specific page to use microthemer on

Author Posts

johannesodeg April 20, 2015 at 6:24 pm

Heads up! this post was created when Microthemer was at version 3. The current version is 7. Some references to the interface may be out of date.

Can I choose a specific page to use microthemer on?

I want to remove the main menu from a specific page, but keep it in mobile view ( the mobile version in canvas theme )

Sebastian April 21, 2015 at 2:01 am

Hi there,

Could you post a link to your site please? I’ll need to look at how the theme creates the mobile menu to advise you on this. And If you want to create selectors that target specific pages as well as specific screen sizes seeing your site will help with that too.

Cheers,
Sebastian

johannesodeg April 21, 2015 at 11:08 am

I was able to fix this after exporting the code from microthemer and add it in a specific page ( using a plugin for page css )
,but I would be happy to do it without using the page specific plugin, only microthemer.

[URL removed by admin on request]
( this is a incomplete site yet )

please delete this url from this post as soon as you can.

Sebastian April 22, 2015 at 10:49 am

Thanks for posting the link.

So step 1 is targeting specific pages. I’m going to update the selector wizard so that it’s easier to prepend selectors with page-specific body classes at some point, but for now here’s how to do it the manual way:

  1. Go to the folders and selectors main menu by clicking the folder icon in the top toolbar
  2. Expand folder and then click the edit selector icon to expand the selector editing fields.
  3. Your cart page has the class “woocommerce-cart” in the body tag. You can limit your styles to only affect this page by prepending all of the selectors with .woocommerce-cart followed by a space.

For example, if you had a selector that targets the heading 1s and you wanted to style it differently just on the cart page you would change this:

.page-title

To this:

.woocommerce-cart .page-title

Simply copy and paste .woocommerce-cart at the start of every selector like this (and make sure you don’t forget the space after .woocommerce-cart ): https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7SjlNUxKeEliZUVmLWs/edit?usp=drivesdk

I see that your cart page also uses this class ‘page-id-9’. This might be preferable if WooCommerce uses the woocommerce-cart class on more than just the cart page you referenced.

Step 2

To hide the menu but only for mobiles, go to the selector you created for the main menu (or double-click it to create a new one) and then go to the behaviour tab. Then add the ‘Phone’ tab (see pic: https://docs.google.com/a/themeover.com/file/d/0B2vCpmXg7SjlNEkxbjNuX09MbHM/edit?usp=drivesdk). Finally, set the display property to none (it’s the first property in the behaviour group).

I hope that helps. Please let me know if you need further assistance with this.

Cheers,
Sebastian

You must login or register to reply to this topic.