An additional problem we just realized and you might be able to help with that. As it looks like in the Services and Persons editor Gutenberg is not enabled and we can’t use the editor to edit those pages! That is pretty sad – we actually use DIVI too but there is no DIVI content elements we could use for that purpose. The overall plugin show looks really great after we moved the jQuery UI CSS and the other provided CSS file to DIVI options as it did not get loaded by default. We also ad to adjust the CSS so the fields displayed correctly.
/* ------------ BOOKING Buaphan Specific ----------- */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
padding: 0.7em;
width: 100%;
}
.entry-content button, .entry-content input[type="button"], .entry-content input[type="submit"], .entry-content .dt-sc-button, .entry-content button, .entry-content input[type="button"], .entry-content input[type="submit"], .entry-content .dt-sc-button, .dt-sc-button, .dt-sc-button {
background-color: #370e62;
}
.entry-content button:hover, .entry-content input[type="button"]:hover, .entry-content input[type="submit"]:hover, .entry-content .dt-sc-button:hover, .entry-content button:focus, .entry-content input[type="button"]:focus, .entry-content input[type="submit"]:focus, .entry-content .dt-sc-button:focus, .dt-sc-button:hover, .dt-sc-button:focus {
background-color: #b6007d;
}
.dt-sc-schedule-progress.dt-sc-current-step .dt-sc-progress-step span, .dt-sc-info-box {
background-color: #b6007d;
border: 1px solid #370e62;
color: #fff;
}
.dt-sc-info-box::before {
content: "\f05a";
color: #fff;
}
select {
/* border: 1px solid #bbb;*/
-webkit-border-radius: 3px;
border-radius: 3px;
height: 3em;
max-width: 100%;
}
@media screen and (min-width: 48em) {
body, button, input, select, textarea {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
}
@media screen and (min-width: 30em) {
body, button, input, select, textarea {
font-size: 18px;
font-size: 1.125rem;
}
}
/* BLOG Page Overview */
@media (min-width: 981px) {
.et_pb_gutters2 .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3, .et_pb_gutters2.et_pb_row .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 {
width: 28.4%;
margin-right: 3%;
}
}
That was necessary to get the look and feel like in your demo in DIVI – for all those who like to use that great plugin in Divi.
Now we only need to get the specific Item pages and people pages showing up like in your demo and that is not easy as it looks like (unfortunately) as we can’t enable Gutenberg and all text we enter looks like only parsed without any CSS at all.