I’ve been going through the tutorial and although I’ve been customizing themes and frameworks for a number of years it’s still good refresher knowledge. I purchased microthemer awhile back and haven’t used it that much as I have way too many themes/frameworks to mess around with. But one question I had after running through the tutorials is: When you name a selector in microthemer is that overwriting an existing style? Or is it creating a new one… I’ve always used the “inspect” method and a child theme to write styles etc. But I’m a little confused about what microthemer actually does. Thanks! Do a more advanced tutorial which shows redoing a standard theme with microthemer… that would be useful for someone like me. Cheers!
This is perfect for me. I have muddled my way through this for too long, and made our site look pretty much exactly how we wanted it… but it’s involved a lot of trial and error. I understand rudimentary HTML, but virtually nothing of CSS.
“When you name a selector in microthemer is that overwriting an existing style? Or is it creating a new one…”
At the exact point of naming a new selector and clicking the CREATE SELECTOR button, Microthemer just creates an empty selector. So technically no styles have been overridden. But when you apply your first style to a new selector e.g. setting font-size to 20px, Microthemer updates its stylesheet (/wp-content/micro-themes/active-styles.css) with both the selector and the new style:
#your-new-selector {
font-size:20px;
}
So you are creating a new selector and style in active-styles.css. This doesn’t delete any other styles in your theme or 3rd party plugins, but it may override other styles in terms of CSS specificity. Microthemer overrides CSS styles in a non-destructive way thanks to the rules of CSS specificity, which is also discussed in the tutorial: https://themeover.com/responsive-media-queries/#specificity
I hope that helps answer your question. And thank your for the additional tutorial suggestion.
Hello Sebastian,
I followed your tutorial and it worked great. However I can’t seem to get the same responsiveness on this site http://www.chungssandwichbar.com. On mobile, the fullwidth picture is cut on both sides. Am I not targeting the correct selectors? Or is the picture just too large? I want the sandwich picture to be fluid and shrink in size.
Your feedback would be greatly appreciated. Thank you.
