Блог

Главная - Вопросы по программированию - Как я могу применить код из CodePen.io на мой веб-сайт Divi WP?

Как я могу применить код из CodePen.io на мой веб-сайт Divi WP?

#css #wordpress #web #codepen #divi

Вопрос:

Я пытаюсь использовать некоторые стили кнопок, которые я нашел в CodePen.ио на моем сайте. Я строю с использованием Divi и WordPress. Мы будем очень признательны за любую помощь. Код из CodePen выглядит так https://codepen.io/b1tn3r/pen/YjOzRv и код следующий:

Я только добавил CSS. Я не могу добавить больше, иначе он не позволит мне опубликовать.

CSS:

 //
// ---Retro Button---
//
.retro-btn {
  text-transform: uppercase;
  background: 0 0;
  
  amp;.lg {
    .btn {
      width: 294px;
      height: 54px;
      font-size: 17px;
      line-height: 50px;
      
      .btn-inner .content-wrapper .btn-content .btn-content-inner:before {
        padding-top: 0;
        letter-spacing: .15em;
      }
    }
  }
  amp;.sm {
    .btn {
      width: 165px;
      height: 37px;
      font-size: 10.5px;
      line-height: 32.5px;

      .btn-inner .content-wrapper .btn-content .btn-content-inner:before {
        padding-top: 0;
      }
    }
  }
  
  amp;.primary {
    .btn .btn-inner .content-wrapper {
      amp;:before {
        background-color: #051D41;
      }
      .btn-content {
        background-color: #0d47a1;
      }
    }
  }
  amp;.secondary {
    .btn .btn-inner .content-wrapper {
      amp;:before {
        background-color: #263238;
      }
      .btn-content {
        background-color: #37474F;
      }
    }
  }
  amp;.danger {
    .btn .btn-inner .content-wrapper {
      amp;:before {
        background-color: #590000;
      }
      .btn-content {
        background-color: #CC0000;
      }
    }
  }
  amp;.warning {
    .btn .btn-inner .content-wrapper {
      amp;:before {
        background-color: #6A3800;
      }
      .btn-content {
        background-color: #FF8800;
      }
    }
  }
  amp;.success {
    .btn .btn-inner .content-wrapper {
      amp;:before {
        background-color: #00481F;
      }
      .btn-content {
        background-color: #009A3E;
      }
    }
  }
  amp;.info {
    .btn .btn-inner .content-wrapper {
      amp;:before {
        background-color: #164E62;
      }
      .btn-content {
        background-color: #33b5e5;
      }
    }
  }

  .btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    padding-top: 3px;
    position: relative;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    font-style: normal;
    letter-spacing: 0;
    text-rendering: auto;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity .1s ease-out;
    transition: opacity .1s ease-out;
    z-index: 5;
    -webkit-font-smoothing: antialiased;

    // size
    width: 240px;
    height: 46px;
    font-size: 12px;
    line-height: 24px;
    
    background-color: transparent;
    text-decoration-color: initial;
    border-color: initial;
    -webkit-tap-highlight-color: transparent;

    amp;, amp;:focus {
      outline-color: 0;
      outline-style: none;
      outline-width: 0;
    }

    amp;:hover {
      .btn-content-inner:before {
        background-color: rgba(13,13,13,.1);
      }
    }

    amp;:before {
      content: " ";
      background-color: rgba(13, 13, 13, .3);
      width: calc(100% - 2px);
      height: calc(100% - 4px);
      bottom: -1px;
      left: 1px;
      position: absolute;
      border-radius: 3px;
      z-index: 1;
      -webkit-transition: background .12s ease-out, -webkit-transform .12s ease-out;
      transition: background .12s ease-out, -webkit-transform .12s ease-out;
      transition: transform .12s ease-out, background .12s ease-out;
      transition: transform .12s ease-out, background .12s ease-out, -webkit-transform .12s ease-out;
    }

    amp;.btn-left {
      amp;:before {
        -webkit-transform: skewY(1deg) translate3d(0,-.5px,0);
        transform: skewY(1deg) translate3d(0,-.5px,0);
      }

      .btn-content {
        -webkit-transform: skewY(-1deg);
        transform: skewY(-1deg);
      }
    }

    amp;.btn-right {
      amp;:before {
        -webkit-transform: skewY(-1deg) translate3d(0,-.5px,0);
        transform: skewY(-1deg) translate3d(0,-.5px,0);
      }

      .btn-content {
        -webkit-transform: skewY(1deg);
        transform: skewY(1deg);
      }
    }

    amp;.btn-center {
      amp;:before {
        -webkit-transform: translate3d(0,-1px,0);
        transform: translate3d(0,-1px,0);
      }

      .btn-content {
        -webkit-transform: translate3d(0,1px,0);
        transform: translate3d(0,1px,0);
      }
    }

    amp;.btn-active {
      .btn-inner .content-wrapper .btn-content {
        -webkit-transition: background .12s ease-out,color .12s ease-out,-webkit-transform .12s ease-out;
        transition: background .12s ease-out,color .12s ease-out,-webkit-transform .12s ease-out;
        transition: transform .12s ease-out,background .12s ease-out,color .12s ease-out;
        transition: transform .12s ease-out,background .12s ease-out,color .12s ease-out,-webkit-transform .12s ease-out;
        -webkit-transform: translate3d(0,2px,0);
        transform: translate3d(0,2px,0);

        .btn-content-inner {
          opacity: .1;
        }
      }

      amp;:before {
        -webkit-transform: translate3d(0,-3px,0);
        transform: translate3d(0,-3px,0);
      }
    }

    .btn-inner {
      display: block;
      height: 100%;

      .content-wrapper {
        position: relative;
        font-family: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
        height: calc(100% - 3px);
        margin-top: -3px;

        amp;:after, amp;:before, 
        amp; .btn-content:after, 
        amp; .btn-content:before, 
        amp; .btn-content .btn-content-inner:before {
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }

        amp;:before {
          background-image: initial;
          background-color: #004d40;

          content: " ";
          border-radius: 3px;
          top: auto;
          bottom: -3px;
          z-index: 1;
          -webkit-transition: background .185s ease-out, -webkit-transform .185s ease-out;
          transition: background .185s ease-out, -webkit-transform .185s ease-out;
          transition: transform .185s ease-out, background .185s ease-out;
          transition: transform .185s ease-out, background .185s ease-out, -webkit-transform .185s ease-out;
        }

        amp;:after {
          background-color: rgba(13, 13, 13, 0.15);

          content: " ";
          border-radius: 3px;
          z-index: 3;
          width: 0;
          top: 2px;
        }

        .btn-content {
          background-image: initial;
          background-color: #26a69a;
          color: #ebf1f8;

          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          border-radius: 3px;
          text-indent: 0;
          z-index: 3;
          overflow: hidden;
          padding: 0 16px;
          -webkit-transition: border .185s ease-out,background .185s ease-out,color .185s ease-out,-webkit-transform .185s ease-out;
          transition: border .185s ease-out,background .185s ease-out,color .185s ease-out,-webkit-transform .185s ease-out;
          transition: border .185s ease-out,transform .185s ease-out,background .185s ease-out,color .185s ease-out;
          transition: border .185s ease-out,transform .185s ease-out,background .185s ease-out,color .185s ease-out,-webkit-transform .185s ease-out;
          
          amp;:before, amp;:after {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            color: rgba(255,255,255,.8);
            opacity: 0;
            -webkit-transition: opacity .1125s ease-out .05s, -webkit-transform .185s ease-out .05s;
            transition: opacity .1125s ease-out .05s, -webkit-transform .185s ease-out .05s;
            transition: transform .185s ease-out .05s, opacity .1125s ease-out .05s;
            transition: transform .185s ease-out .05s, opacity .1125s ease-out .05s, -webkit-transform .185s ease-out .05s;
          }

          amp;:before {
            content: " ";
            -webkit-transform: translate3d(0,50%,0);
            transform: translate3d(0,50%,0);
          }

          amp;:after {
            content: " ";
            -webkit-transform: translate3d(0,-50%,0);
            transform: translate3d(0,-50%,0);
          }


          .btn-content-inner {
            display: block;
            -webkit-transition: opacity 75ms ease-out .1125s;
            transition: opacity 75ms ease-out .1125s;

            amp;:before {
              content: attr(label);
              padding-top: 9.5px;
              font-size: .8em;
              font-family: 'Press Start 2P', cursive;
              letter-spacing: .06em;
              -webkit-transition: opacity .3s ease-out, background-color .1125s ease-in;
              transition: opacity .3s ease-out, background-color .1125s ease-in;
              opacity: 1;
              z-index: -1;
            }
          }
        }
      }
    }
  }
}

Комментарии:

1. хорошо.. общий ответ заключается в том, что вы должны справиться с этим в отношении разработки тем wordpress. Само это усилие будет считаться не по теме (в соответствии с атрибутом wordpress, который вы отметили). Этот вопрос можно было бы рассмотреть по теме, чтобы wordpress.stackexchange.com, но в отношении того, что вы прилагаете эти усилия: занимаетесь разработкой темы. Вы должны сначала попытаться обработать эти изменения в теме и задать свой вопрос этому сообществу, когда у вас возникнут проблемы в этой связи.

2. спасибо вам за информацию!

Ответ №1:

Вы можете добавить пользовательский CSS на сайт WordPress, используя тему Divi, с помощью:

  1. Перейдите» Divi » в меню слева в административной области
  2. Выберите «Параметры темы».
  3. На вкладке «Общие» прокрутите вниз до места, где написано «Пользовательский CSS».
  4. Введите свой CSS в текстовое поле справа.
  5. Нажмите «Сохранить изменения».
Метки: