Noob error: CSS alterations written to several pages

Author Posts

hoja

Hi All,
this is Holger from Berlin – I’ve just begun using Microthemer and am pretty much a CSS and WordPress Noob as well. Right now I’m tinkering with the first changes of commercial template and have run into a conceptual issue:

Reading that Microthemer applies all changes to a particular page type global, unless limited to a particular page ID I simply started editing, creating selectors and also new folders – until I realized that that these alterations are stored over the place. The changes seem to apply globally, but the folder for the footer alteration is on project page 1, the Intro Text is styled on project page 3 – you get the sense.

At this stage it would not hurt badly to reset my changes entirely – but I wonder what the best practice would be: Do I always need to work in he same portfolio page to introduce changes meant to apply to any other portfolio-page as well? How else can I avoid losing track of changes? And is there possible an easy way to consolidate all my scattered selectors to just one location?

Thanks for any hint!


Sebastian

Hey Holger!

Rather than starting again, you can update your existing selectors so that they only apply to a specific page. This video shows how to do that: https://screencast-o-matic.com/watch/cFVIX4olWj

It might be best to have the page-id modifier permanently on so that you don’t have to worry about unintentionally applying styles to other pages on your site. And only disable this when styling elements that are the same on every page. Like headers, footers and menus.

To keep track of which selectors apply to elements on which page, it might be an idea to label the folders and selectors as such. So you might create a folder called “Project page 1”. And in that, put all of your selectors that target elements on project page 1 (which will be specific to ‘project page one’ because you have enabled the page-id modifier as shown in the video above).

You can choose the name of a selector during targeting. The label field is auto-filled by Microthemer to save you time in some cases, but it’s still good to choose your own labels that will mean something to you. You can change folder and selector names via the selectors menu in the top left of the interface. Hover over a folder/selector and click the edit icon.

Would that help you keep track of your changes?

If you want changes to apply to all portfolio pages, but not other types of pages, that will require manually prefixing the selectors Microthemer suggests with a body class that is common to all portfolio pages (e.g. .page-type-portfolio). I appreciate this is something you would need help with being a CSS novice. If you can post a link to your site I can provide you with step by step instructions.

You can reorganise your selectors using the selectors menu at the top left. Folders can be sorted by dragging the folder icon. And selectors can be arranged within folders or moved between folders by using the icon that appears to the left of the selector name when hovering over it. Would that help you consolidate your scattered selectors? Or do you mean something else by that. Please let me know if I’ve misunderstood some or all of what you’re asking.

Thanks!
Sebastian

P.S. here is another video with some general tips on keeping things organised in Microthemer: https://youtu.be/LVonsMV002g?t=675

(the advanced options are expanded in the video, use the ‘show advanced’ link in targeting mode to see this view).


hoja

Thank you very much for your elaborate answer, Sebastian!

The situation is indeed inverse :o). As the styling options in the template I use are extremely basic I would like to introduce a few global changes to say page type Portfolio: In the sense that if a particular portfolio page starts with a two column text it automatically uses some overrides for the padding settings defined in this template. Just to create a foundation – it may well be that I want to override some of my own basic styling on a per portfolio page / project base later.

I had already watched the clips you have linked and also understood that one should name custom selectors and store them in a matching default or newly created custom folder. No issues here.

What I had not expected however, after having read the statement “selectors act sidewide by default” is that every single portfolio page still comes with its own set of folders for selectors. What happened is that I played around with page elements (which appear on all portfolio-pages) and wrote my globally intended selectors to the customization folders of various portfolio pages (under the assumption that those folders showed equally on every single portfolio page). They are now scattered all over :o).

I guess what I need instead was indeed some global body class as you suggest.
I will send you a link and credentials.


Sebastian

OK thanks Holger. As per your email, we’ll pick this up next week when you have more time.

Cheers,
Sebastian

You must login or register to reply to this topic.