Я пытался изменить стиль этой формы защиты страницы Wordpress.
Функция защиты страницы Wordpress включена, а пароль установлен с помощью Wordpress, однако ранее у меня был установлен плагин PPWP, и с его помощью я мог вносить изменения во внешний вид формы.
У меня также установлен Elementor Pro, и похоже, что PPWP использовал Elementor для создания формы и обхода Wordpress для управления функцией защиты паролем страницы.
Теперь, когда я удалил плагин PPWP, я могу включить защиту паролем с помощью Wordpress, но больше не могу изменять внешний вид. Я надеюсь, что смогу использовать дополнительный CSS настройщика темы Hello, чтобы внести изменения во внешний вид формы, сосредоточившись на уникальном идентификаторе, но не могу понять, как это сделать.
Если я просто попытаюсь изменить класс, это также повлияет на другие страницы и контейнеры сайта. Я хочу только манипулировать внешним видом этой формы.
Исходный код формы следующий (https://www.bohoblossomstudio.com/freebies-vault/):
<div data-elementor-type = "single-page" data-elementor-id = "4471" class = "elementor elementor-4471 elementor-location-single post-4687 page type-page status-publish post-password-required hentry" data-elementor-post-type = "elementor_library">
<div class = "elementor-element elementor-element-26d69811 e-flex e-con-boxed e-con e-parent" data-id = "26d69811" data-element_type = "container">
<div class = "e-con-inner"></div>
</div>
<div class = "elementor-element elementor-element-324307b9 e-flex e-con-boxed e-con e-parent" data-id = "324307b9" data-element_type = "container">
<div class = "e-con-inner">
<div class = "elementor-element elementor-element-50c64a7e elementor-widget elementor-widget-theme-post-content" data-id = "50c64a7e" data-element_type = "widget" data-widget_type = "theme-post-content.default">
<div class = "elementor-widget-container">
<form action = "https://www.bohoblossomstudio.com/wp-login.php?action=postpass" class = "post-password-form" method = "post">
<p>This content is password protected. To view it please enter your password below:</p>
<p><label for = "pwbox-4687">Password: <input name = "post_password" id = "pwbox-4687" type = "password" spellcheck = "false" size = "20" /></label> <input type = "submit" name = "Submit" value = "Enter" /></p>
</form>
</div>
</div>
</div>
</div>
</div>
Скриншот формы:
Я могу добавить отступы с помощью дополнительного CSS и не влиять на другие контейнеры на сайте, но не могу центрировать их на странице. На данный момент у меня есть только этот дополнительный CSS:
div.elementor-4471 {
padding:2rem;
}
Согласно инспектору, для этого класса показан CSS:
.elementor-4471 .elementor-element.elementor-element-26d69811{
--display:flex;
--flex-direction:row;
--container-widget-width:initial;
--container-widget-height:100%;
--container-widget-flex-grow:1;
--container-widget-align-self:stretch;
--flex-wrap-mobile:wrap;
--background-transition:0.3s;
}
Мои навыки HTML, PHP, CSS и JS находятся на зачаточном уровне. Будем признательны за любую помощь в выяснении того, как использовать CSS, PHP или JS для управления этим. Я надеюсь извлечь из этого урок и затем смогу применить его в других подобных ситуациях. Заранее благодарим вас за любые советы, предложения и решения.
🤔 А знаете ли вы, что...
С помощью CSS можно создавать эффекты параллакса для элементов на веб-странице.
Чтобы изменить внешний вид формы защиты паролем на определенной странице WordPress, не затрагивая другие, используйте уникальный идентификатор (например, #pwbox-4687) в сочетании с пользовательским CSS. Каждая страница имеет уникальный идентификатор публикации, что позволяет вам настроить таргетинг только на форму пароля на этой странице, гарантируя, что ваши стили не повлияют на формы на других страницах. Для этого выполните следующие действия:
/* Оформление поля ввода */
#pwbox-4687[type = "password"] {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
После добавления пользовательского CSS нажмите «Опубликовать», чтобы сохранить и применить изменения.
Учитывая ваш прикладной код:
div.elementor-4471 {
padding:2rem;
}
Это применит дополнение к элементу (при условии, что селектор div.elementor-4471 соответствует). Однако, если вы подадите заявку, например. display: block вместо padding: 2rem правило display: flex, приведенное ниже, перезапишет его. Это связано с спецификой CSS. Зная это, вам необходимо применить желаемый стиль с более высокой специфичностью, чем код ниже.
.elementor-4471 .elementor-element.elementor-element-26d69811{
--display:flex;
--flex-direction:row;
--container-widget-width:initial;
--container-widget-height:100%;
--container-widget-flex-grow:1;
--container-widget-align-self:stretch;
--flex-wrap-mobile:wrap;
--background-transition:0.3s;
}
Посмотрев на предоставленную ссылку, вам нужно применить justify-content: center, чтобы центрировать форму. Вы можете использовать этот селектор:
.elementor-element-324307b9.e-flex .e-con-inner {
justify-content: center;
}
Вам нужен такой селектор из-за специфичности - поскольку к этому элементу применен этот стиль, показанный ниже, поэтому вам нужно его перезаписать (хотя «initial» установлено как переменная CSS, значение этой переменной — «initial»).
.e-con.e-flex>.e-con-inner {
justify-content: initial;
}
но еще и потому, что вам нужен уникальный идентификатор (.elementor-element-324307b9), чтобы ваш CSS не мешал ничему другому на странице.
Вы можете применить стиль в том же месте, где вы разместили текущий пользовательский CSS.