back

Topic:

Design

How can I prevent style issues when working with external themes?

The way themes handle styles varies, which may lead to style issues in Greyd blocks when using the Greyd plugin together with external themes. However, with the Theme Adaptor we offer you a feature to ensure consistent styling for essential CSS elements like accordions, buttons, and tabs, even when the Greyd theme isn’t active. You can customize styles by copying stylesheets into your theme. The Theme Adaptor will make sure, relevant CSS files (root.css, button.css and inputs.css) are auto-loaded.

To implement custom Greyd styles in your own theme, follow these steps:

  1. Create the style file: In your theme (or child theme), create the following directory structure: /greyd/css/

    Add a root.css file: Inside /greyd/css/ , create a file named root.css .

    Copy and paste base variables: Copy the CSS variable definitions from down below into root.css and adjust them to fit your theme’s color scheme, font sizes, and spacing needs.

    Optional – Customize buttons and Iinputs: For more detailed customization, you can also include buttons.css and inputs.css files:

    • Copy buttons.css and inputs.css from greyd-plugin/src/features/theme-adaptor/assets into /greyd/css/ within your theme.
    • These files offer additional control over button and form styles, allowing you to match the look and feel of Greyd components to your theme’s specific design.

Reference examples: For reference on how other themes were adapted, check the theme-specific examples inside greyd-plugin/src/features/theme-adaptor/assets . These provide a guide on customizing for themes like Ollie and Twenty Twenty-Four.

:where(:root) {


    /**
     * ====================================================================
     *                             Presets
     * ====================================================================
     */

    /**
     * Colors
     */
    --wp--preset--color--primary: #4F309E;
    --wp--preset--color--secondary: #F9DD61;
    --wp--preset--color--tertiary: #9B82D9;
    --wp--preset--color--foreground: #0e1111;
    --wp--preset--color--dark: #3d3549;
    --wp--preset--color--mediumdark: #9992a3;
    --wp--preset--color--mediumlight: #cbc6d1;
    --wp--preset--color--base: #e9e6ed;
    --wp--preset--color--background: #f9f7ff;
    --wp--preset--color--darkest: #000000;
    --wp--preset--color--lightest: #ffffff;
    --wp--preset--color--transparent: rgb(255, 255, 255, 0);

    /**
     * Font sizes
     */
    --wp--preset--font-size--tiny: clamp(.9rem, 0.9rem +((1vw - 0.2rem)* 0.125), 1rem);
    --wp--preset--font-size--small: clamp(1rem, 1rem +((1vw - 0.2rem)* 0.25), 1.2rem);
    --wp--preset--font-size--base: clamp(1.13rem, 1.13rem +((1vw - 0.2rem)* 0.213), 1.3rem);
    --wp--preset--font-size--medium: clamp(1.3rem, 1.3rem +((1vw - 0.2rem)* 0.375), 1.6rem);
    --wp--preset--font-size--large: clamp(1.5rem, 1.5rem +((1vw - 0.2rem)* 0.625), 2rem);
    --wp--preset--font-size--x-large: clamp(2rem, 2rem +((1vw - 0.2rem)* 1), 2.8rem);
    --wp--preset--font-size--xx-large: clamp(2.6rem, 2.6rem +((1vw - 0.2rem)* 1.438), 3.75rem);

    /**
     * Font families
     */
    --wp--preset--font-family--body: inherit;
    --wp--preset--font-family--heading: inherit;
    --wp--preset--font-family--highlight: inherit;

    /**
     * Spacings
     */
    --wp--preset--spacing--tiny: clamp(10px, 1.5vw, 0.5rem);
    --wp--preset--spacing--small: clamp(.5rem, 2.5vw, 1rem);
    --wp--preset--spacing--medium: clamp(1.5rem, 4vw, 2rem);
    --wp--preset--spacing--large: clamp(2rem, 5vw, 3rem);
    --wp--preset--spacing--x-large: clamp(3rem, 7vw, 5rem);


    /**
     * ====================================================================
     *                             Buttons
     * ====================================================================
     */
    
    /* spacing */
    --wp--custom--greyd--button--spacing--padding--top: 0.66em;
    --wp--custom--greyd--button--spacing--padding--right: 1.33em;
    --wp--custom--greyd--button--spacing--padding--bottom: 0.66em;
    --wp--custom--greyd--button--spacing--padding--left: 1.33em;

    /* typography */
    --wp--custom--greyd--button--typography--font-size: var(--wp--preset--font-size--base);
    --wp--custom--greyd--button--typography--font-family: var(--wp--preset--font-family--body);
    --wp--custom--greyd--button--typography--font-weight: var(--wp--custom--font-weight--semi-bold);
    --wp--custom--greyd--button--typography--line-height: var(--wp--custom--line-height-normal);
    --wp--custom--greyd--button--typography--letter-spacing: 0px;
    --wp--custom--greyd--button--typography--text-transform: none;

    /* small button */
    --wp--custom--greyd--button--small--typography--font-size: var(--wp--preset--font-size--small);
    --wp--custom--greyd--button--small--spacing--padding--top: 0.33em;
    --wp--custom--greyd--button--small--spacing--padding--right: 1em;
    --wp--custom--greyd--button--small--spacing--padding--bottom: 0.33em;
    --wp--custom--greyd--button--small--spacing--padding--left: 1em;

    /* big button */
    --wp--custom--greyd--button--big--typography--font-size: var(--wp--preset--font-size--medium);
    --wp--custom--greyd--button--big--spacing--padding--top: 1em;
    --wp--custom--greyd--button--big--spacing--padding--right: 1.5em;
    --wp--custom--greyd--button--big--spacing--padding--bottom: 1em;
    --wp--custom--greyd--button--big--spacing--padding--left: 1.5em;

    /* primary button */
    --wp--custom--greyd--button--prim--color--background: var(--wp--preset--color--primary);
    --wp--custom--greyd--button--prim--color--text: var(--wp--preset--color--lightest);
    --wp--custom--greyd--button--prim--border--color: var(--wp--preset--color--primary);
    --wp--custom--greyd--button--prim--border--radius: 4px;
    --wp--custom--greyd--button--prim--border--style: solid;
    --wp--custom--greyd--button--prim--border--width: 2px;
    --wp--custom--greyd--button--prim--shadow: none;
    /* hover */
    --wp--custom--greyd--button--prim--hover--color--background: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--prim--hover--color--text: var(--wp--preset--color--lightest);
    --wp--custom--greyd--button--prim--hover--border--color: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--prim--hover--border--style: var(--wp--custom--greyd--button--prim--border--style);
    --wp--custom--greyd--button--prim--hover--border--width: var(--wp--custom--greyd--button--prim--border--width);
    --wp--custom--greyd--button--prim--hover--shadow: var(--wp--custom--greyd--button--prim--shadow);

    /* secondary button */
    --wp--custom--greyd--button--sec--border--color: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--sec--border--radius: 4px;
    --wp--custom--greyd--button--sec--border--style: solid;
    --wp--custom--greyd--button--sec--border--width: 2px;
    --wp--custom--greyd--button--sec--color--background: var(--wp--preset--color--transparent);
    --wp--custom--greyd--button--sec--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--sec--shadow: none;
    /* hover */
    --wp--custom--greyd--button--sec--hover--color--background: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--sec--hover--color--text: var(--wp--preset--color--lightest);
    --wp--custom--greyd--button--sec--hover--border--color: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--sec--hover--border--style: var(--wp--custom--greyd--button--sec--border--style);
    --wp--custom--greyd--button--sec--hover--border--width: var(--wp--custom--greyd--button--sec--border--width);
    --wp--custom--greyd--button--sec--hover--shadow: var(--wp--custom--greyd--button--sec--shadow);

    /* tertiary button */
    --wp--custom--greyd--button--trd--color--background: var(--wp--preset--color--secondary);
    --wp--custom--greyd--button--trd--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--trd--border--color: var(--wp--preset--color--secondary);
    --wp--custom--greyd--button--trd--border--radius: 4px;
    --wp--custom--greyd--button--trd--border--style: solid;
    --wp--custom--greyd--button--trd--border--width: 2px;
    --wp--custom--greyd--button--trd--shadow: none;
    /* hover */
    --wp--custom--greyd--button--trd--hover--color--background: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--trd--hover--color--text: var(--wp--preset--color--lightest);
    --wp--custom--greyd--button--trd--hover--border--color: var(--wp--preset--color--foreground);
    --wp--custom--greyd--button--trd--hover--border--style: var(--wp--custom--greyd--button--trd--border--style);
    --wp--custom--greyd--button--trd--hover--border--width: var(--wp--custom--greyd--button--trd--border--width);
    --wp--custom--greyd--button--trd--hover--shadow: var(--wp--custom--greyd--button--trd--shadow);


    /**
     * ====================================================================
     *                             Inputs
     * ====================================================================
     */

    /* spacing */
    --wp--custom--greyd--input--spacing--padding--top: 0.66em;
    --wp--custom--greyd--input--spacing--padding--right: 1.33em;
    --wp--custom--greyd--input--spacing--padding--bottom: 0.66em;
    --wp--custom--greyd--input--spacing--padding--left: 1.33em;

    /* typography */
    --wp--custom--greyd--input--typography--font-family: var(--wp--preset--font-family--body);
    --wp--custom--greyd--input--typography--font-size: var(--wp--preset--font-size--base);
    --wp--custom--greyd--input--typography--font-weight: 400;
    --wp--custom--greyd--input--typography--letter-spacing: 0px;
    --wp--custom--greyd--input--typography--line-height: 1.6;
    --wp--custom--greyd--input--typography--text-transform: none;

    /* label */
    --wp--custom--greyd--input--label--color--background: var(--wp--preset--color--transparent);
    --wp--custom--greyd--input--label--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--input--label--typography--font-family: var(--wp--preset--font-family--body);
    --wp--custom--greyd--input--label--typography--font-size: var(--wp--preset--font-size--base);
    --wp--custom--greyd--input--label--typography--font-weight: var(--wp--custom--font-weigth-regular);
    --wp--custom--greyd--input--label--typography--line-height: var(--wp--custom--line-height--normal);

    /* primary input */
    --wp--custom--greyd--input--prim--border--color: var(--wp--preset--color--mediumlight);
    --wp--custom--greyd--input--prim--border--radius: 4px;
    --wp--custom--greyd--input--prim--border--style: solid;
    --wp--custom--greyd--input--prim--border--width: 1px;
    --wp--custom--greyd--input--prim--color--background: var(--wp--preset--color--base);
    --wp--custom--greyd--input--prim--color--placeholder: var(--wp--preset--color--mediumdark);
    --wp--custom--greyd--input--prim--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--input--prim--shadow: none;
    /* hover */
    --wp--custom--greyd--input--prim--hover--border--color: var(--wp--preset--color--mediumlight);
    --wp--custom--greyd--input--prim--hover--border--style: var(--wp--custom--greyd--input--prim--border--style);
    --wp--custom--greyd--input--prim--hover--border--width: var(--wp--custom--greyd--input--prim--border--width);
    --wp--custom--greyd--input--prim--hover--color--background: var(--wp--preset--color--base);
    --wp--custom--greyd--input--prim--hover--color--placeholder: var(--wp--preset--color--mediumdark);
    --wp--custom--greyd--input--prim--hover--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--input--prim--hover--shadow: var(--wp--custom--greyd--input--prim--shadow);

    /* secondary input */
    --wp--custom--greyd--input--sec--border--color: var(--wp--preset--color--mediumdark);
    --wp--custom--greyd--input--sec--border--radius: 4px;
    --wp--custom--greyd--input--sec--border--style: solid;
    --wp--custom--greyd--input--sec--border--width: 1px;
    --wp--custom--greyd--input--sec--color--background: var(--wp--preset--color--transparent);
    --wp--custom--greyd--input--sec--color--placeholder: var(--wp--preset--color--mediumdark);
    --wp--custom--greyd--input--sec--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--input--sec--shadow: none;
    /* hover */
    --wp--custom--greyd--input--sec--hover--border--color: var(--wp--preset--color--foreground);
    --wp--custom--greyd--input--sec--hover--border--style: var(--wp--custom--greyd--input--sec--border--style);
    --wp--custom--greyd--input--sec--hover--border--width: var(--wp--custom--greyd--input--sec--border--width);
    --wp--custom--greyd--input--sec--hover--color--background: var(--wp--preset--color--transparent);
    --wp--custom--greyd--input--sec--hover--color--placeholder: var(--wp--preset--color--dark);
    --wp--custom--greyd--input--sec--hover--color--text: var(--wp--preset--color--foreground);
    --wp--custom--greyd--input--sec--hover--shadow: var(--wp--custom--greyd--input--sec--shadow);
}

Related articles & tutorials

How can I prevent style issues when working with external themes?

The way themes handle styles varies, which may lead to style issues in Greyd blocks when using the Greyd plugin together with external themes. However, with the Theme Adaptor we offer you a feature to ensure consistent styling for essential CSS elements like accordions, buttons, and tabs, even when the Greyd theme isn’t active. You […]

Read more

Topic

Design

How to upload Adobe fonts

At the moment, the WordPress Core does not support adding Adobe Fonts through the user interface, unlike Google Fonts or actual font files (WOFF2, TTF, etc). However, it’s still possible with a PHP snippet to get your Adobe Fonts into the website, both in frontend and backend. Ideally you have created a child theme before, […]

Read more

Topic

Design

Columns vs. rows vs. grid – When to use which block

In this video, we will show you when to use columns, when to use rows and when to use the new Block Editor grid function to structure your website in the best possible way. We take a look at the different variants and discuss the respective advantages and disadvantages so that you can make the […]

Read more

Topic

Design

How can I stretch post slider content to the same height?

When displaying content in a post slider, a common issue is that the length of your dynamically inserted content may vary and thus the individual posts in your slider have different heights. If you want to display several posts next to each other and want to stretch them to the same height, this is the […]

Read more

Topic

Design, Templates & Post Types

How can I make dynamic fields only appear when a post data is available?

Imagine you have a post slider / query loop showing employees. Some employees have a LinkedIn profile that is to be displayed below their photo and name, some don't. You would now want your post slider to only display the LinkedIn icon when there is a LinkedIn profile available.There's an easy way to do that […]

Read more

Topic

Design, Templates & Post Types

How can I have several layouts / designs in one post overview?

With the Post Overview or Query Loop block, you can flexibly display posts – as a table, grid or list. In combination with Conditional Content, you can also visually highlight individual posts and/or work with different layouts within one post overview. To do this, simply add the Conditional Content block twice in your query loop. […]

Read more

Topic

Design, Greyd.Blocks, Templates & Post Types

Why does my site not show skip links?

Skip links are an essential accessibility feature. When someone navigates your website using the key board, skip links make their life a lot easier as they can skip elements like forms or menus if they want to navigate on the site instead of having to go through each and every menu element or form field.With […]

Read more

Topic

Design, General Questions, Templates & Post Types

How do I prevent unwanted breaks in texts/headlines?

Depending on your screen size, it may happen that you see unwanted breaks in words (especially long ones), for example in headlines. There is a simple way to make sure words break only where and how you want them to: HTML entities.There are a lot of interesting HTML entities, however we’d like to highlight two […]

Read more

Topic

Design

Why do anchor links not jump exactly to the right position?

If you use anchor links to navigate your site, you may find that the page sometimes scrolls too far or not far enough. This is a common problem in WordPress.But GREYD.SUITE offers a solution: You can set anchors with our block "anchor target" and define the offset individually and even set different values for different […]

Read more

Topic

Design, Greyd.Blocks

How can I stretch elements to the same height?

When having several content boxes or texts in columns next to each other, often the layout is tricky when these elements do not have the same height (e.g. because of different text lengths). However, we offer several ways to make sure, your content looks good:Headline & Paragraph BlockIn the headline & paragraph block we have […]

Read more

Topic

Design, Greyd.Blocks

How can I have two fonts in one headline?

To have two different fonts in one headline or other text-based blocks, just make the text "italic" (cmd+i / strg+i) and insert the following global CSS (in the Customizer or Site Editor): /* Change Font Family on Italic */em {font-family: var(–fontFamily1);} Step 1: Make text “italic” Have two different fonts in one headline

Read more

Topic

Design, Greyd.Blocks

How do I build a sticky header?

You can easily build sticky headers with our content box variation "Pinned Box". You can find out how in our tutorial video in the chapter "Sticky Header".A small note on the side: The name could lead one to assume that sticky headers are built with the Sticky Box variation instead of the Pinned Box. However, […]

Read more

Topic

Design, Templates & Post Types

No results found.