Target specific element instead of writing global style rule

Tagged: , , ,

Author Posts

harrisp September 20, 2017 at 3:09 pm

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

Hello,
Assume I use the same raw in two or 3 pages. When I target the row the changes are applied to all 3 pages.
Is there a way I can targer only the raw in the page I am currently editing?

How can I also make a change to the header or footer of a specific page iwthout applying it to all pages?

And something more. How can I know what page am I editing?
The microthemer interface works as a browser. That means that if you accidentally hit a link (i.e. you try to target something but have fotgotten to click the target button) you are then editing another page. If pages are similar in look you might not notice the difference.

Thanks
Harris

Sebastian September 20, 2017 at 4:24 pm

Hey Harris,

1. To make your selectors specific to the current page:

  1. Enable targeting mode via the Target button
  2. Click the gear icon to the right of the Label field to reveal selector modifiers
  3. Click the page-id option. This will prefix all MT selectors with the page-id of the current page, so they will only apply to the current page.

2. To confirm which page you are editing

  1. Hover over the View menu at the top right of the interface
  2. Click the Change site preview URL link
  3. That will reveal the URL of the current page (relative to the root of your site)

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

harrisp September 20, 2017 at 6:03 pm

Thanks!

I am trying to “migrate” from yellow pencil to microthemer and things still seem strange to me 🙂

One more thing. I read I can add custom javascript to pages / elements. Where from and how can I do that?

I might need you again I guess 🙂

And a proposal. It will be nice to add animation css capabilities too.

harrisp September 20, 2017 at 7:25 pm

By the way, is there someware in the documentation all that “selector modifiers” (gear icon contents) explained?

Sebastian September 21, 2017 at 4:02 pm

Hey Harris,

You can add custom JavaScript via the custom code editor. To access code view, go to the View menu and enable the Code editor toggle. A convenient way to switch views if you like keyboard shortcuts is to use the following shortcut:

Ctrl + Alt + C

I’m actually part way though adding animation properties. They will go out very soon, in the next major update.

The Targeting video, which you can access from the Help menu briefly shows use of the selector modifiers. Hovering over each modifier option will display a tooltip explaining what it does. But I see your point, if would be good to document this feature better.

Please let me know if you have any further questions.
Thanks,
Sebastian

harrisp September 21, 2017 at 7:36 pm

Thanks!
I will keep on experimenting and I will ask again for your valuable help if needed,

You must login or register to reply to this topic.