Custom plugins are not getting reflected in page builder

I added a custom theme plugin with additional button and typography options in addition to existing ones. they are not not getting refrected in page builder i was reseloved some compiler issues,

error2 but the additional button and typography are not getting refrected

Hey @nagababu, can you please share your full plugin code, so I can try replicating this? Thanks!

how can i share the code ?

@nagababu just copy the contents of your file here using this code block:
image

You can also join our Slack, it iwll be much easier to communicate there: http://webiny.com/slack

Index.ts:

import StaticLayout from "@webiny/app-page-builder-theme/layouts/Static";
import pageBuilderTheme from "@webiny/app-page-builder-theme";
import CircularSpinner from "@webiny/app-page-builder-theme/components/CircularSpinner";
import {
    DefaultErrorPage,
    DefaultNotFoundPage
} from "@webiny/app-page-builder-theme/components/defaultPages";
import {
    PbPageLayoutComponentPlugin,
    PbPageLayoutPlugin,
    PbThemePlugin,
    PbDefaultPagePlugin
} from "@webiny/app-page-builder/types";
import "./styles.scss";

export default () => [
    {
        name: "pb-theme-default",
        type: "pb-theme",
        theme: {
            colors: {
                primary: "var(--webiny-theme-color-primary)",
                secondary: "var(--webiny-theme-color-secondary)",
                background: "var(--webiny-theme-color-background)",
                surface: "var(--webiny-theme-color-surface)",
                textPrimary: "var(--webiny-theme-color-text-primary)"
            },
            elements: {
                button: {
                    types: [
                        {
                            className: "",
                            label: "Default"
                        },
                        {
                            className: "primary",
                            label: "Primary"
                        },
                        {
                            className: "secondary",
                            label: "Secondary"
                        },
                        {
                            className: "outline-primary",
                            label: "Outline Primary"
                        },
                        {
                            className: "outline-secondary",
                            label: "Outline Secondary"
                        },
                        {
                            className: "simple",
                            label: "Simple"
                        },
                        {
                            className: "bitlabs-primary",
                            label: "bitlabs Primary"
                        },
                        {
                            className: "bitlabs-simple",
                            label: "bitlabs Simple"
                        },
                        {
                            className: "bitlabs-simple-icon",
                            label: "bitlabs Simple Icon"
                        },
                        {
                            className: "bitlabs-button1",
                            label: "bitlabs button1"
                        }
                    ]
                }
            },
            typography: {
                tekWorksh1: {
                    label: "bitlabs Heading 1",
                    component: "h1",
                    className:
                        "webiny-pb-typography-h1 webiny-pb-typography-bitlabs-h2 webiny-pb-typography-tekworks-h1"
                },
                tekWorksh2: {
                    label: "bitlabs Heading 2",
                    component: "h1",
                    className: "webiny-pb-typography-h1 webiny-pb-typography-bitlabs-h2"
                },
                tekWorksh3Primary: {
                    label: "bitlabs Heading 3(primary)",
                    component: "h3",
                    className: "webiny-pb-typography-h3 webiny-pb-typography-bitlabs-font-primary"
                },
                tekWorksh3Secondary: {
                    label: "bitlabs Heading 3(secondary)",
                    component: "h3",
                    className: "webiny-pb-typography-h3 webiny-pb-typography-bitlabs-font-secondary"
                },
                tekWorksh3Teritary: {
                    label: "bitlabs Heading 3(teritary)",
                    component: "h3",
                    className:
                        "webiny-pb-typography-h3 webiny-pb-typography-bitlabs-font-secondary webiny-pb-typography-tekworks-theme-teritary"
                },
                tekWorksh3SecondarySpacing: {
                    label: "bitlabs Heading 3(secondary spacing)",
                    component: "h3",
                    className:
                        "webiny-pb-typography-h3 webiny-pb-typography-tekworks-font-secondary webiny-pb-typography-tekworks-h3-spacing"
                },
                tekWorksh4Primary: {
                    label: "bitlabs Heading 4(primary)",
                    component: "h4",
                    className:
                        "webiny-pb-typography-h4 webiny-pb-typography-bitlabs-h4 webiny-pb-typography-tekworks-font-primary"
                },
                tekWorksh4Secondary: {
                    label: "bitlabs Heading 4(secondary)",
                    component: "h4",
                    className:
                        "webiny-pb-typography-h4 webiny-pb-typography-bitlabs-h4 webiny-pb-typography-tekworks-font-secondary"
                },
                tekWorksP: {
                    label: "bitlabs Paragraph",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography-bitlabs-p"
                },
                tekWorksPSpacing: {
                    label: "bitlabs Paragraph(spacing)",
                    component: "p",
                    className:
                        "webiny-pb-typography-body webiny-pb-typography-bitlabs-p webiny-pb-typography-tekworks-aboutus"
                },
                tekWorksSmallP: {
                    label: "bitlabs Paragraph(s)",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography-bitlabs-p-small"
                },
                tekWorksDesc: {
                    label: "bitlabs Description",
                    component: "p",
                    className: "webiny-pb-typography-description webiny-pb-typography-bitlabs-desc"
                },
                tekWorksPBulleted: {
                    label: "bitlabs Bulleted",
                    component: "p",
                    className:
                        "webiny-pb-typography-body webiny-pb-typography-bitlabs-p webiny-pb-typography-tekworks-bulleted"
                },
                h1: {
                    label: "Heading 1",
                    component: "h1",
                    className: "webiny-pb-typography-h1"
                },
                h1White: {
                    label: "Heading 1 (white)",
                    component: "h1",
                    className: "webiny-pb-typography-h1 webiny-pb-typography--white"
                },
                h2: {
                    label: "Heading 2",
                    component: "h2",
                    className: "webiny-pb-typography-h2"
                },
                h2Primary: {
                    label: "Heading 2(Primary)",
                    component: "h2",
                    className: "webiny-pb-typography-h2  webiny-pb-typography--primary"
                },
                h2White: {
                    label: "Heading 2 (white)",
                    component: "h2",
                    className: "webiny-pb-typography-h2 webiny-pb-typography--white"
                },
                h3: {
                    label: "Heading 3",
                    component: "h3",
                    className: "webiny-pb-typography-h3"
                },
                h3White: {
                    label: "Heading 3 (white)",
                    component: "h3",
                    className: "webiny-pb-typography-h3 webiny-pb-typography--white"
                },
                h4: {
                    label: "Heading 4",
                    component: "h4",
                    className: "webiny-pb-typography-h4"
                },
                h4White: {
                    label: "Heading 4 (white)",
                    component: "h4",
                    className: "webiny-pb-typography-h4 webiny-pb-typography--white"
                },
                h5: {
                    label: "Heading 5",
                    component: "h5",
                    className: "webiny-pb-typography-h5"
                },
                h5White: {
                    label: "Heading 5 (white)",
                    component: "h5",
                    className: "webiny-pb-typography-h5 webiny-pb-typography--white"
                },
                h6: {
                    label: "Heading 6",
                    component: "h6",
                    className: "webiny-pb-typography-h6"
                },
                h6White: {
                    label: "Heading 6 (white)",
                    component: "h6",
                    className: "webiny-pb-typography-h6 webiny-pb-typography--white"
                },
                paragraph: {
                    label: "Paragraph",
                    component: "p",
                    className: "webiny-pb-typography-body"
                },
                paragraphWhite: {
                    label: "Paragraph (white)",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography--white"
                },
                description: {
                    label: "Description",
                    component: "p",
                    className: "webiny-pb-typography-description"
                },
                descriptionWhite: {
                    label: "Description (white)",
                    component: "p",
                    className: "webiny-pb-typography-description webiny-pb-typography--white"
                },
                primaryColorText: {
                    label: "Primary color text",
                    component: "p",
                    className: "webiny-pb-typography-body webiny-pb-typography--primary"
                }
            }
        }
    } as PbThemePlugin,
    {
        name: "pb-layout-component-loader",
        type: "pb-layout-component",
        componentType: "loader",
        component: CircularSpinner
    } as PbPageLayoutComponentPlugin,
    {
        name: "pb-page-layout-static",
        type: "pb-page-layout",
        layout: {
            name: "static",
            title: "Static page",
            component: StaticLayout
        }
    } as PbPageLayoutPlugin,
    {
        name: "pb-default-page-error",
        type: "pb-default-page",
        component: DefaultErrorPage
    } as PbDefaultPagePlugin,
    {
        name: "pb-default-page-not-found",
        type: "pb-default-page",
        component: DefaultNotFoundPage
    } as PbDefaultPagePlugin
];

style.scss:

@import "variables";

@import "[email protected]/app-page-builder-theme/styles.scss";

html {

  scroll-behavior: smooth !important;

  body {

    & {

      // form themes

      .webiny-fb-form {

        background-color: var(--webiny-theme-color-bitlabs-form-background);

        padding-bottom: 2rem;

        & > div {

          padding-bottom: 2rem;

        }

        & .webiny-fb-form-layout-column {

          padding: 0px;

        }

        & .webiny-fb-form-field {

          background-color: unset;

          &__input,

          &__select {

            height: auto;

            padding: 1rem;

            background-color: var(--webiny-theme-color-bitlabs-form-field-background);

          }

        }

        & .webiny-fb-form-page-element-button {

          width: 33.33%;

          margin: 0px auto;

        }

      }

      .webiny-pb-page,

      .webiny-pb-page-document {

        // buttons

        .webiny-pb-page-element-button {

          text-transform: capitalize;

          border-radius: 79px;

          font-size: 1rem;

          font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

          font-weight: 500;

          &:hover {

            text-decoration: none;

          }

          &--bitlabs-primary {

            background-color: var(--webiny-theme-color-bitlabs-primary, #9013fe);

            color: var(--webiny-theme-color-on-primary, #ffffff);

            font-weight: 600;

            padding: 14px 28px !important;

          }

          &--bitlabs-simple {

            background-color: transparent;

            color: var(--webiny-theme-color-bitlabs-simple, #000);

            padding: 0 !important;

            min-width: 0;

            &:hover {

              box-shadow: none;

              transform: none;

            }

          }

          &--bitlabs-button1 {

            background-color: transparent;

            background: linear-gradient(45deg, #fda629, #e85d1b);

            padding: 0 !important;

            min-width: 0;

            &:hover {

              box-shadow: none;

              transform: none;

            }

          }

          &--bitlabs-simple-icon {

            background-color: transparent;

            color: var(--webiny-theme-color-bitlabs-simple, #000);

            padding: 0 !important;

            min-width: 0;

            &:hover {

              box-shadow: none;

              transform: none;

            }

            & svg {

              width: 37px;

            }

          }

        }

        //  typography

        .webiny-pb-typography {

          &-h1,

          &-h2,

          &-h3,

          &-h4,

          &-h5,

          &-h6 {

            color: var(--webiny-theme-color-bitlabs-footer, #323352);

          }

          &-h3 {

            font-size: 1.4rem;

          }

          &--white {

            color: white;

          }

          &--primary {

            color: var(--webiny-theme-color-primary, #ee896b);

          }

          &-bitlabs-font-primary {

            font-family: var(--webiny-theme-typography-bitlabs-primary-font-family, "Noto Serif", serif);

          }

          &-bitlabs-font-secondary {

            font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

          }

          &-bitlabs-theme-teritary {

            color: var(--webiny-theme-color-bitlabs-teritary);

          }

          &-bitlabs-h3-spacing {

            line-height: 2.5rem;

          }

          &-bitlabs-h2 {

            font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

            font-size: 2.3rem;

            letter-spacing: -0.03em;

            line-height: 3rem;

            font-weight: 800;

          }

          &-bitlabs-h1 {

            font-size: 3.5rem;

            font-weight: 800;

          }

          &-bitlabs-h4 {

            font-size: 1rem;

            letter-spacing: -0.03em;

            font-weight: 600;

          }

          &-bitlabs-p {

            font-size: 1.1rem;

            font-family: var(--webiny-theme-typography-bitlabs-secondary-font-family, "Open Sans", sans-serif);

            font-weight: 400 !important;

            color: var(--webiny-theme-color-bitlabs-simple, #383838);

            margin-top: 0.1rem !important;

            line-height: 1.8rem;

          }

          &-bitlabs-aboutus {

            line-height: 2rem;

            letter-spacing: 0.01125em;

          }

          &-bitlabs-p-small {

            font-size: 0.8685rem;

            letter-spacing: 0.01em;

            color: var(--webiny-theme-color-bitlabs-small-para, #4c4c4c);

          }

          &-bitlabs-desc {

            font-family: var(--webiny-theme-typography-bitlabs-secpndary-font-family, "Open Sans", sans-serif);

          }

        }

      }

    }

  }

}

variable.scss:

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:[email protected];700&family=Open+Sans:[email protected];400;600;700;800&display=swap");

// fonts

$webiny-pb-theme-typography-bitlabs-primary-font-family: "Noto Serif", serif !default;

$webiny-pb-theme-typography-bitlabs-secondary-font-family: "Open Sans", sans-serif !default;

// colors

$webiny-pb-theme-bitlabs-primary: #9013fe !default;

$webiny-pb-theme-bitlabs-secondary: #755691 !default;

$webiny-pb-theme-bitlabs-teritary: #696ca9 !default;

$webiny-pb-theme-bitlabs-p-small: #4c4c4c !default;

$webiny-pb-theme-bitlabs-simple: #383838 !default;

$webiny-pb-theme-bitlabs-form-background: #fbfbfb !default;

$webiny-pb-theme-bitlabs-form-field-background: #ffffff !default;

$webiny-pb-theme-bitlabs-footer: #323352 !default;

$webiny-pb-theme-bitlabs-linkedin: #0e76a8 !default;

$webiny-pb-theme-bitlabs-facebook: #4a70aa !default;

$webiny-pb-theme-bitlabs-twitter: #568bcb !default;

body {

    --webiny-theme-typography-bitlabs-primary-font-family: #{$webiny-pb-theme-typography-bitlabs-primary-font-family};

    --webiny-theme-typography-bitlabs-secondary-font-family: #{$webiny-pb-theme-typography-bitlabs-secondary-font-family};

    --webiny-theme-color-bitlabs-primary: #{$webiny-pb-theme-bitlabs-primary};

    --webiny-theme-color-bitlabs-secondary: #{$webiny-pb-theme-bitlabs-secondary};

    --webiny-theme-color-bitlabs-teritary: #{$webiny-pb-theme-bitlabs-teritary};

    --webiny-theme-color-bitlabs-small-para: #{$webiny-pb-theme-bitlabs-p-small};

    --webiny-theme-color-bitlabs-simple: #{$webiny-pb-theme-bitlabs-simple};

    --webiny-theme-color-bitlabs-form-background: #{$webiny-pb-theme-bitlabs-form-background};

    --webiny-theme-color-bitlabs-form-field-background: #{$webiny-pb-theme-bitlabs-form-field-background};

    --webiny-theme-color-bitlabs-footer: #{$webiny-pb-theme-bitlabs-footer};

    --webiny-theme-color-bitlabs-linkedin: #{$webiny-pb-theme-bitlabs-linkedin};

    --webiny-theme-color-bitlabs-facebook: #{$webiny-pb-theme-bitlabs-facebook};

    --webiny-theme-color-bitlabs-twitter: #{$webiny-pb-theme-bitlabs-twitter};

    // overriding default ones

}

hi there is any solution

Hi @nagababu, thanks for providing the code snippet. We will get back to you as soon as possible :wink:

Hey @nagababu, we opened an issue here. If you would like to contribute, you are more than welcome :slight_smile: We have a very tiny bug here that is not overwriting the existing plugins. If you have any other questions, join our slack community here.

hi currently i am using custom the how can i implement custom styles to existing styles there any alternative chance to implement custom theme

is there any alternative way for implementing custom theme

@nagababu While waiting for the fix, you could create your own app template. That way you can structure the app however you like. There are a couple of articles that explain how app templates work: https://docs.webiny.com/docs/app-development/introduction

And here you’ll find how our existing app templates are implemented:


You can easily create your own app templates by following the docs and these code examples. Read through the code and you’ll find how plugins are constructed and where the SCSS files are imported.