Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 30, 2022 at 10:07 am #1367060
    Guenni007

    if you look to developer tools – there are preset colors and gradients :
    guess the come from Gutenberg Editor – and are set on block-editor.js

    Is it possible to autogenerate a theme.json file with the colors set in Enfold Options – General Styling – but at least the “Main Content Background Color” of the color schemes as preset css – and place it on f.e. child-theme root directory?

    on doing that manually (generate a theme.json) will work well – but if it is possible the this file could get that values from theme setting will be brilliant

    So e.g. as
    –wp–preset–color–enfold-main: #hex-value
    –wp–preset–color–enfold-alternate: #hex-value
    –wp–preset–color–enfold-footer: #hex-value

    etc.
    you can use this as a variable in different color definitions e.g:

    .flex_cell.custom-class {
  background-color: var(--wp--preset--color--enfold-main);
}

    The advantage is obvious: if you change the background color of Main – you don’t have to rewrite the definitions – all of them will be taken over automatically.

    October 8, 2022 at 2:59 pm #1368058
    Günter

    Hey Guenter,

    As far as I see theme.json is mostly related to block editor. So I would not touch that from Enfold.

    What I could think of is adding e.g. all the colors of “General Styling” at top of “dynamic-css.php” e.g.

    
enfold-header-color-bg: "#...';
enfold-header-color-bg2: "#...';
...
enfold-footer-color-bg: "#...';
....

    Best regards,
    Günter

    October 8, 2022 at 3:41 pm #1368060
    Guenni007

    Yes – this went along with the introduction of the block editor – but has a global effect in that I can use this anywhere.
    My attempts to put a manually created theme.json into the child-theme root directory were successful. ( see private Content Area )

    Of course it does not have to be via this method (theme.json). So if you could do it as described above and I can then use these settings for css definitions in this way just as well it’s fine with me.

    div.custom-class {
  background-color: var(enfold-header-color-bg);
}

    The advantage is obvious. e.g.:
    I wanted to assign a background color to only half of a cell within a grid row. There is this css trick to do this with a linear gradient.

    .flex_cell.medien-zelle {
  background-image: linear-gradient(90deg,#ffd322 70%,#fffae8 30%);
}

    but this only works if the second gradient color matches the background! Here in the example page ( see private Content) I have now entered the set background color manually. But if the color changes – because I decided to set another main-color bg – I have to go through all pages and see if I have to change anything.

    October 8, 2022 at 3:57 pm #1368064
    Guenni007

    or most easiest way to manually set variables is to place a list in quick css – f.e.:

    :root {
--white: #ffffff;
--black: #000000;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}
    October 9, 2022 at 3:29 pm #1368119
    Günter

    Hi,

    Added to next release with

    –enfold-……

    for settings in “General Styling” tab.

    Best regards,
    Günter

    October 10, 2022 at 10:36 am #1368240
    Guenni007

    Brilliant – looks great
    especially when I see with how little code you have managed that to make it work.
    Maybe a varible for the font-families for headings and body could be added ?

    October 10, 2022 at 5:17 pm #1368305
    Günter

    Hi,

    Thanks for your feedback.

    Is added to next release:

    –enfold-font-family-theme-body
    –enfold-font-family-heading
    –enfold-font-family-body

    Best regards,
    Günter

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.