Does Microthemer apply styles sitewide?

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

Author Posts

graffig

Sebastian,

A really daft question I’m sure, considering I’ve had the plugin for ages 🙂

Does MT apply styles written to a property sitewide? For example, if I change the styling to say a bulleted list on one page is that styling applied to all bulleted lists sitewide?

I have some really weird styling issues happening to a site I’m creating with OceanwP and Elementor Pro and I’m trying to target why the styling on my themes post pages for the above element are different to my standard pages.

Thanks in advance.


Sebastian

Yes Microthemer does apply site-wide styles. The particular selector you choose plays a role in this though. If a selector hooks into a class or id that is only present on one page, or a set of pages, it will not apply site-wide. A very broad selector (e.g. ul) will definitely apply site-wide, although you have to be careful with super broad selectors like that because they might style more elements across the site than you want.

Could you send me a link to the pages that do/don’t have the list styling you want to apply?

Cheers,
Sebastian

P.S. it’s possible to ensure selectors only target the current page, and no other page, by enabling the page-id CSS modifier. This option is to the right of the selector label field in targeting mode.


graffig

Good morning Sebastian,

Many thanks again for getting back to me so quickly.

Would you have a direct email address I can send you the log in details and page references for the styling issues – this site is not ‘live’ yet and has an ‘under construction’ plugin activated for now.

Cheers,

Darron


Sebastian

No problem, please send access details via our secure contact form: https://themeover.com/support/contact/

Cheers!
Sebastian


Sebastian

Hey Darron,

Thanks for sending me access to your site.

Copying MT CSS code
I noticed that you have copied some Microthemer CSS code to simple CSS, which outputs the CSS code to the head of the page. This means that the CSS code is output twice if you have Microthemer active. But overriding these previous MT styles in MT now will not be possible because the simple CSS code is output after MT’s stylesheet. Because of the source order, the simple CSS code will trump MTs code. So I recommend removing the code from simple CSS while you make changes in MT. And then copy the latest MT code back to it afterwards, if that is what you like doing.

Fixing the styling issue
But in terms of the lists and headings formatting issue, that styling is applied by your theme, not by Microthemer. So the above info is just an FYI to save you some potential confusion if certain MT changes don’t appear to do anything.

The (fairly complex) selectors in your theme that added extra spacing / misaligned the bullets is shown below. I’ve created 3 selectors in MT to override these styles. See the Content folder. All the selectors I created start with Theme override – …

So your theme just had some styling that was affecting content on the wound care page differently from the rest of the site. And I’ve shown by example how to fix this with Microthemer. Hopefully looking at the selectors and styles I’ve added in MT will help you understand/learn.

Theme selector that removed the left margin on bulleted lists, causing bullets to be out of place:

.single-post.content-max-width .entry-header, .single-post.content-max-width ul.meta, .single-post.content-max-width .entry-content h1, .single-post.content-max-width .entry-content h2, .single-post.content-max-width .entry-content h3, .single-post.content-max-width .entry-content h4, .single-post.content-max-width .entry-content h5, .single-post.content-max-width .entry-content h6, .single-post.content-max-width .entry-content blockquote, .single-post.content-max-width .entry-content p, .single-post.content-max-width .wp-block-image, .single-post.content-max-width .wp-block-gallery, .single-post.content-max-width .wp-block-video, .single-post.content-max-width .wp-block-quote, .single-post.content-max-width .wp-block-text-columns, .single-post.content-max-width .entry-content ul, .single-post.content-max-width .entry-content ol, .single-post.content-max-width .wp-block-cover-text, .single-post.content-max-width .post-tags, .single-post.content-max-width .comments-area {
    margin: 1.5em auto;
 
}

Theme selector that indented content by adding left/right padding:

.single-post.content-max-width .thumbnail, .single-post.content-max-width .entry-header, .single-post.content-max-width ul.meta, .single-post.content-max-width .entry-content h1, .single-post.content-max-width .entry-content h2, .single-post.content-max-width .entry-content h3, .single-post.content-max-width .entry-content h4, .single-post.content-max-width .entry-content h5, .single-post.content-max-width .entry-content h6, .single-post.content-max-width .entry-content blockquote, .single-post.content-max-width .entry-content p, .single-post.content-max-width .post-tags, .single-post.content-max-width .entry-share, .single-post.content-max-width nav.post-navigation, .single-post.content-max-width #author-bio, .single-post.content-max-width #related-posts, .single-post.content-max-width .comments-area {
    padding-left: 20px;
    padding-right: 20px;
}

Ensuring styles only affect the current page

Microthemer does have an option for applying styles to just one page. This is set when creating selectors in targeting mode. The following video shows an example of this (it also shows how to use the re-target option to change the targeting of an existing selector): https://screencast-o-matic.com/watch/cFVIX4olWj

I hope that helps.

Cheers!
Sebastian

P.S. I tried to reply to your private message but got a bounce back from the email address you provided via the contact form. Please send me another message via the contact form if you would like to discuss any sensitive information.


graffig

Afternoon Sebastian,
You’ve have gone beyond the call of duty once again!!!

Thank you so, so much.

Yeah, that blinking main email address of mine is proving to be a right pain – checked this afternoon and looks like I’m on a few blacklists 🙁 will create an alternative Gmail address today and update my account details accordingly.

Those selectors created by OceanWP and Elementor Pro above are something else hey! Thank you for adding the ones for Themeover and adding into the Content folder as mentioned – very much apprecited again. I did indeed have difficulities getting the styles applied by Themeover to take affect.

I wonder why the theme targets the single post type items like this – tbh, I very sledom have to set up post articles for clients (none of them wish to update their sites themselves), however, it might be worth raising the issue with the Theme dev?

With regards applying Themeover styles to specific pages, thank you again for the enclosed video, extremely helpful and always appreciated.

In summary, I can’t help feel I need to spend at least a few hours straight with Themeover when time permits, rather than using it to ‘firefight’ styling issues randomly when and where required. After being an early adopter of your plugin I still know I’ve only scratched the surface of what’s possibly and really do need to familiarise myself with the workflow and structure of all that is available. as an end user.

With that in mind, keep the videos on the channel coming as I’m rubbish at reading docs, my Hi-Fi stack is testiment to this 🙂 I find them really helpful and informative, also a little unerving as again, I realise how little I know concerning Themeover.

Once again Sebastian, many, many thanks for all your help over the last few months. With that in mind and I cannot remember if I’ve asked this before, do you have a donations page on which I can donate a few quid.

Have a great rest of the week. Hopefully I can leave you in peace for a wee while longer.

Kind regrds,

Darron


Sebastian

Hey Darron,

Thanks so much for the kind words. I’m glad I was able to help. I plan to add a series of short how to videos in the not too distant future. In the meantime, I would check out the targeting video for learning some of the useful advanced features: https://themeover.com/videos/?name=targeting

Oh and I don’t have a donations facility, but I appreciate the thought!

Have a great day 🙂

Sebastian

You must login or register to reply to this topic.