Integration with Central Colour Palette

Tagged: , , ,

This topic contains 12 replies, has 4 voices, and was last updated by  Sebastian 3 months ago.

Author Posts

Galen

I’m using Central Colour Palette on one of my Oxygen test sites and was wondering if there was any possibility of integrating it with Microthemer.

https://en-gb.wordpress.org/plugins/kt-tinymce-color-grid/

It works for ACF and Max Mega Menu.


Sebastian

Hi Galen,

I notice from the plugin screenshots that there is an option within Central Colour Palette to “Add global CSS variables”. It may be possible to enable that feature and then reference the color variables in Microthemer’s code editor (support for entering CSS variables via the color picker is coming soon).

So in Microthemer you would have:

p.test {
   color: var(--jewel);
}

Where Jewel is the name of a color within your Central Colour Palette settings.

If this works, great! If not, could you send me a link to one of the pages on your site after enabling “Add global CSS variables” so I can troubleshoot?

Thanks,
Sebastian


deanphillips1991

Ah this would be great. I use O2 for my global colours but having them in a system like this, with different shades (and variables?) would be ace.


Galen

Thanks Sebastion,

I was thinking more about something that would pull those colours into the Microthemer colour picker automatically as swatches in the same way it does for ACF and Gutenberg.

Maybe under the Preferences panel as a Global Colours tab as with Oxygen and Divi?

I am using https://oxyagency.tools/ within Oxygen but I use Microthemer a lot in most projects and it would be nice to be able to set Global Swatches in Microthemer to that limited palette automatically.

This is all part of trying to streamline my workflow so I can roll out web sites more efficiently.


deanphillips1991

So you wouldn’t want them to change based on when change them inside that tool? You just want them to show up, is that correct?

Doesn’t the style grab feature in MT grab them already?


Galen

Ideally change when they changed inside that tool and also be restricted when that tool is checked to restrict the palette to those colours.

If not, then at least to be able to add Global Colour(s)watches in Microthemer Preferences would be useful.

MT grabs too many colours including those from imported sets. The beauty of Global Colours is being able to change them once in one place.


Sebastian

I understand your points Galen. I will add support for pulling from Advanced custom fields and Oxy Agency Tools (as requested by Dean in another thread) and Central Colour Palette. I will do this when I add support for CSS and Sass variables on the picker. I’ll move on to style option improvements once I’ve finished the Oxygen integration features I’m currently working on.

Thanks for the suggestions!

Sebastian


webworx

Hi Sebastian,

I have invested in an MT (Lifetime) license because I want MT to be a permanent part of my Oxygen workflow. And, I am super-excited about getting proficient using this fantastic tool you’ve created.

I was wondering if you wouldn’t mind to share with me your thoughts on the following questions:

1) Does MT make Oxygen’s Selector Detector redundant? In other words, once a person has developed a workflow where they design in Oxygen and style in MT, does there remain a use case for Selector Detector?

2) I’ve noticed that in several of your tutorial videos, you have Oxy Agency Tools installed. I assume from this that there must be minimal functional overlap between OAT and MT. What is your workflow when using OAT and MT together?….and, how do you envision that workflow will change once you have implement some level of integration between OAT and MT?

That’s it…just these 2 questions…

Thanks in advance,

Dale


deanphillips1991

Hey Dale!

I’m a big O2 + MT user so I thought I’d throw my input in.

1. MT makes the built in selector detector in O2 a thing of the past. You won’t ever need to use it again and you’ll be a much happier person. The built-in one is cool, for something that’s built-in but it has so many flaws.

2. OAT is used to grab the colour variables. You can use them in any area via MT (not just O2 parts) which is handy. I think it’s great to use them vs hand-coding, as you have the copy to clipboard with OAT and it’s easy to use.


webworx

Hi Dean,

Hey thanks a lot for the insight!…very much appreciated!

I took the mostly unhelpful animated gif on the OAT website and opened it in Preview on macOS. This decomposed the gif into about 150 individual clips which turned out to be very helpful toward visualising how the theme colours feature works (I think?).

So, what I did was to start totally from scratch, no Design Sets, no Templates….nothing, nada inside of Oxygen.

Outside of Oxygen, I started with just my colour palette and my design mockup.

First thing I did was to enter my colour palette into OAT, then I cut and pasted the OAT variables and colours into Oxygen Settings | Global Styles | Global Colours.

But, this is where I get this feeling that I am totally missing something.

Isn’t it the whole point of Global Styles that you enter all your colours in one place and then use them everywhere?

Ok so I don’t actually “need” OAT for this…my first couple of Oxygen sites were built without using OAT. I just used the colour picker that available whenever an element is selected in the Oxygen editor.

But, I haven’t quite sorted out how to use OAT with MT as you referenced in your comment. So, I’m thinking that’s where I’ll have my ‘ah-ha’ moment. Despite searching for it, I haven’t found any tutorials on using OAT and MT together. Would you happen to know of any that you can point me to?

Anyway, thanks again for sharing your insights…I am seeking the killer “Oxygen & Friends” workflow. I’m not there yet but I’m truly enjoying the journey.

Cheers,

Dale


Sebastian

Thanks so much for sharing your tips Dean.

1. I agree Microthemer’s targeting options can be used as a replacement for O2s selector detector

2. Agency tools provides a handy UI for managing variables, and you can still use them in MT easily as they will be listed in MT’s CSS property menus e.g. (font-size) – expand the ‘Site variables’, and use the refresh icon after updating variables in OAT.

The other advantage of defining vars in OAT is that they can be used in Oxygen too. But you may want to define variables in MT sometimes, if you like writing the code, or OAT doesn’t support a variable type.

I haven’t made ant MT-OAT tutorials yet, but I’m happy to add that to my ToDo list 🙂


webworx

Thanks Sebastian,

I’m slowly moving in the direction of visualising how to use OAT with MT in the context of O2 workflow.

Also, I’m happy to contribute to your ToDo list…anytime! 🙂

Cheers and thanks again!

Dale


Sebastian

Ha! All contributions are welcome 🙂

I’m here if you have any further questions about the workflow once you get stuck in.

Cheers,
Sebastian

You must login or register to reply to this topic.