Microthemer 3.0 – What did we get right? What should we improve?

Tagged: 

Author Posts

Galen February 28, 2015 at 7: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.

Suggestion – Incorporate the kind of functionality in Child Theme Configurator which allows users visually identify the class they are trying to target.

Galen February 28, 2015 at 7:28 pm

Suggestion – direct edit css

It would be good to be able to add custom CSS directly rather than just being able to view it. This would help developers of scaffolds.

Sebastian March 1, 2015 at 9:45 am

Galen, thank you so much for your suggestions. This is great stuff. In response:

  1. We did used to have different forum categories, but found that people only used one forum, even when their question was more relevant to another forum. If the forum grows substantially we may undertake the task of identifying and allocating posts to common categories, but I don’t think we’re there yet. Personally I find that you can’t beat Google custom search no matter how big a forum gets.
  2. Yes, being able to import CSS from a stylesheet into the Microthemer interface is on the roadmap. I’m looking forward to this feature.
  3. I see your point for why providing options for neutralising the existing computed CSS could be useful. I’m slightly unconvinced it will be worth the development time at this stage, but let it sit with me.
  4. I’ll have to play with the Child Theme Configurator plugin a bit to see you mean by this – looks like an interesting plugin though.
  5. You can already add custom CSS yourself. Just click the code editor icon at the top right of Microthemer to switch to custom code editing. We will be adding support for LESS/SCSS and Javascript there too soon.

Thanks again!
Sebastian

Galen March 1, 2015 at 10:59 am

One advantage of the Child Theme Configurator is that it shows the Parent Theme CSS so you can copy and paste blocks of code into the Child Theme CSS and edit them.

I can copy the block of code I want from the Parent CSS into PSPad (free) and reformat into structured CSS then save as parent.css

That gives me a document I can use to create a child-reset.css file

Using that file I can copy and paste my resets into the Child Theme Configurator’s Child CSS

Galen March 1, 2015 at 11:14 am

Until it is possible to import style sheets onto Microthemer and then edit them, I am finding that it helps me to create a new scaffold in Microthemer 3 if I break the original theme style.css file into smaller css files with the names I intend to use to identify the Microthemer folders.

As Microthemer adds !important to the classes created in the UI I presume I can use custom CSS without !important on the classes for any resets?

Gaetan March 1, 2015 at 11:22 pm

Well… The new interface i have to get used to it first. Is there an option to show al css of the changes ive made in a theme so far? i could copy that and paste it directly into a child theme css saving the use of microloader. Not that microloader is a bad solution, i just like to have the least plugins installed as possible.

Sebastian March 2, 2015 at 10:26 am

Galen – you can disable the default behaviour of adding !important to CSS styles via the preferences page. As you understand the rules of CSS specificity, this is probably preferable. Especially if you don’t want to to use !important in your custom code.

Galen March 2, 2015 at 11:15 am

I was actually thinking about it the other way around – using the Child Theme Configurator to create a reset style.css for the theme without using !important and then letting Microthemer use !important to override the reset.

Gantry is going into version 5 in a few months time and there is no backwards compatibility so I will work on a scaffold for Gantry once version 5 is out of beta.

One of the advantages of the Child Theme Configurator is that you can type in background-color or any other css selector in the Rule/Value tab and it beings up a list of the colours with the # and visual reference of the colour so if you’re working on a local server you can just take the child theme style sheet and ‘search + replace’ all instances of that # colour with the one of your choice.

In the Query/Selector tab you can type in hover for example and it will bring up a list of selectors so you can select the hover tab. Great for finding things like the hover state which are not always easy to find in Microthemer UI or tools like Firebug. In Firebug you have to go to the Style tab and check the :hover etc state for each highlighted selector which is time consuming.

I think the Child Theme Configurator might be too daunting for regular users on hosted sites without CPanel access and an understanding of css. On the other hand it is a great tool on a local server for developers of scaffolds and Microthemes.

When a theme uses rgba(0,0,0,0.85) type colours in a child theme (and we do all use child themes don’t we?) then Microthemer cannot always override them as the parent theme css is still there in the background.

batsteek March 7, 2015 at 10:57 pm

RGB colors are deeply needed (transparencies and so on)

Note : I have just discovered that if there is a RGB color in a background definition of an external css, I just can’t access to the background pane to modify it. ;(

Sebastian March 8, 2015 at 5:40 am

I completely agree. The colour picker is a relic left over from version 2. It needs a full overhaul. This is a top priority todo feature. For now, you can actually manually enter rbga() values in any color field.

batsteek March 8, 2015 at 11:34 am

@Sebastian

Yes you can, but when you do that, the top left wheel (the one that appears at the position of the MT logo) spin forever and in the end, the content is not saved (at least, during my tests).

Good to know that it is in top position in the todo 🙂

Talking about the todo, is it possible to know what will be inside the next update ? (I know, I’m curious)

Sebastian March 9, 2015 at 8:04 am

Hmm. That shouldn’t be happening. I just tried entering this on my testing site:

rgba(225, 225, 225, 0.5)

It set the color to black with 50% opacity as expected. If you are getting a bug I’d be happy to look into it for you.

Cheers,
Sebastian

ps the results of the survey we just emailed out (it will arrive at 11:30am your time) will influence which updates we prioritise so I’ll have to come back to you on that one…

batsteek March 9, 2015 at 8:19 am

Thanks for your quick answer.

I did the test again and still the spinning wheel.
Unfortunately, this is a dev site (using Genesis framework) so I can’t allow you the access but I will install MT in a live one and will try again later.

I got the survey through Twitter and I have already answered 🙂

NoahjChampion March 9, 2015 at 3:57 pm

Feature Request:

I would like to disable the auto save feature.

I’ve built my own theme and it allows for a unique stylesheet per page per post.

I would like to use Microthemer to create the style but not have it auto save and auto apply.

This way I can take the edits I’ve made and put them in a compressed stylesheet like I want.

Something like a “Apply these Session Changes” to Microthemer.

Thoughts?

NoahjChampion March 9, 2015 at 9:37 pm

Hi,

To add to the above I just thought of this.

How about the option to save/archive/download the compiled css from Microthemee?

So there would be options for example… “Save & Apply” / “Archive” / “Download”.

Save & Apply would do what Microthemer already does.

Archive would save the styles made by Microthemer in its directory but no apply them.

Download would all to download the styles as a stylesheet to do as we need.

Thoughts?


NoahjChampion March 9, 2015 at 9:39 pm

Per Page Post Post Mirothemer Stylesheet Option.

Reference Link: https://wordpress.org/plugins/zia3-css-js/screenshots/

– If something could be extended to allow the stylesheets of Microthemer to be used per page per post rather than just globally would be awesome. I would do it myself, but I don’t have the knowledge to, but more so the time to anymore.

Thoughts?

dmccan March 11, 2015 at 4:16 am

It could be I don’t realize how to do these things, but here are a couple of items I’ve noticed in my first go round:

* Rather than go to the back-end to click the Microthemer button and be taken to the front-end, I would like to have a button in the regular WP admin tool bar on the top.

* After making some edits, I would like to be able to step out of Microthemer to play around with the changes I’ve made so far without going back to the admin and then traversing back to the front.

* Maybe I’m doing it wrong, but when I double click on a page title (h1) for instance, I get that instance and when I go to advanced and try to drag down, all I see are the different states for that heading (hover, visited, etc), not down to all headings (h1). Is there a trick to that?

* I want to style all of the buttons the same color. The buttons are divs, for instance one for leaving a comment, one for saving a comment. Once I create a button style on one of the buttons, I would like to be able to apply it to the other one.

* When I create a selector, I would like to be able to get back to it via a drop down or something so that I can continue to style that element.

* In the document “Customizing Your WordPress Site – Applying New Styles”, the last sentence says:

‘If you have the “always show” advanced options checkbox ticked you may find that Microthemer is a very handy tool for quickly viewing the computed CSS on your site.’

I don’t see that “always show” option.

Thanks,

David

Sebastian March 11, 2015 at 5:05 am

batsteek – thanks for filling out the survey, let me know if you want me to look at your live site.

Noah – thanks for your feature suggestions (and for also filling out our survey 😉
One of your suggestions is already in the works, which I was thinking of calling ‘Draft mode’. When draft mode is active, style changes can be seen when working in Microthemer but they will not render on the website for normal visitors. It would allow for the safe editing of a live site without worrying about temporary display problems that might occur during editing.

However, in terms of your styles-per-page request this ‘Draft mode’ feature may not give you exactly what you want. It sounds like you want to find a way of isolating the styles you enter during say a 30 minute period (while you style one page) and then export them. Whereas the styles you enter in Microthemer are always added to the one stylesheet (active-styles.css) in the order set by the folders, selectors, and media queries.

It’s unlikely that we’ll include a feature for adding styles on a per-page basis because in most cases this doesn’t actually lead to page speed gains. This post explains that the browser will cache the stylesheet after loading it for the first time so that subsequent pages load faster than if the styles are split into different stylesheets for different pages. HTTP requests can slow a site down (because only 2 can happen at the same time from the same domain resulting in a bottleneck), so it’s best to combine all stylesheets into one using a minification/caching plugin like W3 Total Cache. I think W3 total cache is a much better way to implement performance optimisations because it tackles lots of different performance issues in one automated way. Bear in mind that you will need to use the ‘clear all caches’ feature in W3 Total Cache after making style edits in Microthemer in order to make your changes visible to the outside world (which means you get get something similar to the pending ‘draft mode’ feature by simply using W3 Total cache).

If you’re dead set on having different stylesheets per page (which I appreciate might sometimes be the best approach in specific circumstances), you might want to create a new folder in Microthemer for every page that you want to target with specific styles. If you then selectively export that folder alone as a design pack (using the export option in the left toolbar) you will isolate only those styles. Do this for all page-specific folders. And then import each page specific design pack one by one using the ‘Overwrite’ option (this will delete all existing styles so you might want to export everything to a design pack as backup first). Then view the CSS Microthemer generates using the option in the left toolbar. This will show you only the page-specific styles you isolated into one folder. You can then copy and paste the generated CSS to your own stylesheets.

Note: the re-importing with overwrite method I just described is a bit awkward. It will soon be possible to quickly view the generated CSS for an exported design pack on the ‘Manage Design Packs’ page (an additional generated-styles.css file will be created in the design pack).

I hope that helps! Please let me know if I’ve missed the mark on something.

Cheers,
Sebastian

Sebastian March 12, 2015 at 8:46 am

David – Many thanks for providing feedback on your initial experience of playing with Microthemer. I will address each of your points in turn.

  1. Rather than go to the back-end to click the Microthemer button and be taken to the front-end, I would like to have a button in the regular WP admin tool bar on the top.
    This request was recently put forward by another customer and has been added to our TODO list
  2. After making some edits, I would like to be able to step out of Microthemer to play around with the changes I’ve made so far without going back to the admin and then traversing back to the front.
    If I understand you correctly, my advise for this would be to have one tab on your browser open for making general WordPress edits like updating posts/pages, another browser tab for applying edits in Microthemer, and a third tab for viewing the frontend (if you don’t always want to view the frontend from the Microthemer interface). That’s how I set things up. But I may be missing the point of your question.
  3. Maybe I’m doing it wrong, but when I double click on a page title (h1) for instance, I get that instance and when I go to advanced and try to drag down, all I see are the different states for that heading (hover, visited, etc), not down to all headings (h1). Is there a trick to that?
    There is probably a link element inside the h1 element and that is actually what you clicked. You can travel up to the h1 element by clicking the up arrow on the Inspector tab of the advanced wizard. The scenario often happens when two elements occupy the same space – with the parent element wrapping the child element with no padding making them easily distinguishable. The Inspector tab is very useful for dealing with this.
  4. I want to style all of the buttons the same color. The buttons are divs, for instance one for leaving a comment, one for saving a comment. Once I create a button style on one of the buttons, I would like to be able to apply it to the other one.
    You can achieve this by broadening your targeting. The selector code Microthemer generates via the selector wizard is always the most specific it can be. So if the HTML allows for targeting just one button, that is the default selector it will suggest. When initially creating selectors by double-clicking, it’s often a good idea to drag the slider down on the Targeting tab as far down as possible so that you are using the broadest option that doesn’t target more things than intended. In your case, you might drag it down to the selector that looks like div.buttons (dragging it down all the way to just ‘div’ would be too far, a div is a very generic element so you would rarely want to apply the same styles to all divs)
  5. When I create a selector, I would like to be able to get back to it via a drop down or something so that I can continue to style that element.
    You can do this. Click the folder icon in the top toolbar to reveal all folders and selectors you’ve created. Click a selector to continue styling it. Once you have navigated onto a selector, you can also access the quick edit options by clicking it’s name in the top toolbar. This might be useful for your button problem. As you’ve already created the button and would like to broaden the selector targeting to all buttons – you could try editing the selector code. This could involve deleting the id portion. So you might change div#area div.button to just div.button.
  6. In the document “Customizing Your WordPress Site – Applying New Styles”, the last sentence says: ‘If you have the “always show” advanced options checkbox ticked you may find that Microthemer is a very handy tool for quickly viewing the computed CSS on your site.’ I don’t see that “always show” option.
    Good spot – I will update the docs. This option has been removed because Microthemer now just remembers your configuration of the advanced options. If you click the advanced options link it will show the advanced wizard every time you double-click something – unless you click that link again. In which case is will not show the advanced options next time.

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

Sebastian

dmccan March 12, 2015 at 1:11 pm

Hi Sebastian,

Thank you for the thoughtful reply.

1. That is great. Hopefully you can use it from both the front and back end.

2. That is a good suggestion and will work fine. However, for long term there is no reason to shoot from front to back like that. I think that Beaver Builder and Visual Composer allow you to step in and out of editing mode. When WordPress adds front end editing this will be more evident.

3. Yes, perhaps it is just the way the theme is setup and I can play with that.

4. Since the buttons are divs that does not work, which is why I’d like to be able to add other elements to the already styled ones. For example, you often see elements grouped together like:

.widget-title,
#comments-number,
#reply-title,
.attachment-meta-title {
color: #ffffff;
}

5. Thanks for telling me about how to use the folders.

David

batsteek March 12, 2015 at 7:54 pm

One more :

First, I confirm that I’m still a MT addict and I really love the tool ! But as I use it more and more, I face some issues/worries that I would like to be fixed/enhanced 🙂

The tabs system to manage media queries (imho) is one of them.

– The need to open a new tab for each property/settings is really painful when you are tweaking your styles.
– There is not enough room to deal with more than 4 tabs (when the names (put in the tabs titles) are a bit long) > when there is more, the tabs dribble on the other part of the interface (in the settings) and are not clickable anymore) -> I use a 15′ Retina screen.
– cleaning a media query (or all media queries at the same time) is painful
– closing a media query tab is painful (if you don’t want to see it anymore)

Thanks 🙂

Abland March 13, 2015 at 7:14 pm

Hi, batsteek,

I added to your helpful trick post and figured it would be a good suggestion, too:

Dashicons (or other) usable in media query labels so instead of Phone (v) – Phone vertical in my use – I could just have a vertical phone icon.

– OR –

The way the sidebar menu has a single image for icons that are positioned in css – a similar method to select an appropriate image for media query labels.

Sebastian March 14, 2015 at 6:21 am

David: It’s currently only possible to create individual selectors by double-clicking various elements that don’t have a common class and then copy the selector code Microthemer generates into one selector using commas to separate the selectors. Are you requesting a feature in the selector wizard targeting tab for ‘Combine with current selector’ whereby the selector suggested by the selector wizard is automatically added to the current selector (with comma separation) without having to copy and paste any code?

This could be quite useful.

Cheers,
Sebastian

Sebastian March 14, 2015 at 6:30 am

batsteek: In answer to points:

  1. The need to open a new tab for each property/settings is really painful when you are tweaking your styles.
    Are you referring to the missing buttons from version 2 for quick previewing the different screen sizes (without having to create editing media query tabs)? They are definitely coming back in the form of pointers on the screen width slider (which will always be visible)
  2. There is not enough room to deal with more than 4 tabs (when the names (put in the tabs titles) are a bit long) > when there is more, the tabs dribble on the other part of the interface (in the settings) and are not clickable anymore) -> I use a 15′ Retina screen.
    I’m glad that you settled on a acceptable solution of using short names. And thanks for sharing that in another post.
  3. cleaning a media query (or all media queries at the same time) is painful
    Can you be more specific about why this process is painful please? Can you think of a way this could be less painful?
  4. closing a media query tab is painful (if you don’t want to see it any more)
    Same question as above.

Thanks!
Sebastian

dmccan March 14, 2015 at 5:52 pm

Hi Sebastian,

Yes, something along those lines. Or perhaps when you double click on an element, in addition to the place to enter a new selector name, there is an option to combine with an existing selector (and then you choose it from a drop down).

David
1 2 3 4

You must login or register to reply to this topic.