The new listing form must be user friendly, better text font, compact form, better appearence and shorter form fields.
Everything can easily be played around with some basic css code, let me know if you need guidance.
Hello @arendaparent ,
I am interested in your comment.
Is it possible to apply CSS attribute (ID or class) on rendering ?
<div class="hp-form__field hp-form__field--number">
<label class="hp-field__label hp-form__label">
<span>Budget</span></label>
<input type="number" name="budget" value="" step="0.01" min="0" required="required" data-component="number" class="hp-field hp-field--number"></div>
Granted, you could apply CSS by name e.g. :
input[name=budget] {
width: 100px;
}
But they would be still stacked on top of each other.
It would be nice to apply some CSS ID on containing div, it would add some more flexibility.
Can you please explain what you are exactly trying to succeed, you can easily edit the whole design of the form, add headers, descriptions borders and dividers (using snippets).
What if I want two textboxes side by side, instead of on top of each other?
I assume you know how to add custom CSS
Now this code works that it targets only text field on the form, but in order to target the correct text area im using number of field on form, i made it 6 and 7 (this was how i used it), every field counts, Title, Category, Images etc., so just count on your form which field it is
Now keep in mind that when a user updates their listing the “Category” field is missing, so just copy paste this code and change “listing-submit” to listing-update" and move the numbers one lower, so instead of 6 and 7, it should 5 and 6, let me know if this works for you.
I dont know how to make it show up as code here, sorry
.hp-form--listing-submit .hp-form__fields .hp-form__field--textarea:nth-of-type(6) {
display: inline-block;
width: 48%;
margin-right: 2%;
vertical-align: top;
}
.hp-form--listing-submit .hp-form__fields .hp-form__field--textarea:nth-of-type(7) {
display: inline-block;
width: 48%;
margin-right: 0;
vertical-align: top;
}
/* Responsive design for stacking on smaller screens */
@media (max-width: 768px) {
.hp-form--listing-submit .hp-form__fields .hp-form__field--textarea(6),
.hp-form--listing-submit .hp-form__fields .hp-form__field--textarea(7) {
display: block;
width: 100%;
margin-right: 0;
margin-bottom: 10px;
}
}
Yes, it works.
Not the most simplistic way, but it works.
I attached my test screenshot for those interested.
And the CSS code to copy/paste ( and edit to your need) :
.hp-form__field:nth-of-type(3), .hp-form__field:nth-of-type(4) {
border: 1px solid red;
display: inline-block;
width: 48%;
margin-right: 2%;
vertical-align: top;
}
I figured out I would have to use the :nth-child CSS attribute, but your solution works just as well.
Thank you for that !
Now, how do I set up a default value for an attribute in a list ? It’s tedious to have to select it over and over again.
Say I have a listing with a delivery_time attribute, and I want to set its default value to one of its option value having 123 as ID.
I’ve checked the forum, found this, but could not make it work.
First of all happy to hear that it worked for you.
Just to let you know im not at all an expert in WordPress im just using chatgpt to assist me, thats the advantage of hivepress themes, its so WordPress native and clean so i can use chatgpt and other stuff
Im using the yellow pencil plugin to get the classes of items and then do the editing with css code, not in the plugin
To set a default time in time field you can do it when adding this field and adding a placeholder
Thank you for your endearment.
Unfortunately it is not working.
Placeholders are just showing you what you could type in a TEXT field, but it is a “ghost” value. it’s a short hint that is displayed in the input field before the user enters a value.
I will dig deeper, and share my findings, if any.
Cheers !
Sorry you are right, chatgpt gave me this JS, i did not try it, you can add it using the code snippet plugin
document.addEventListener('DOMContentLoaded', function () {
var timeInput = document.querySelector('.hp-form__field--time .hp-field--time input[type="text"]');
if (timeInput) {
timeInput.value = "09:00";
}
});
I’ll share the jQuery code that is working for me.
Because it’s a finite set a values, so it is displayed in a dropdown list (and not a text field).
I remind you that “delivery_time” is the attribute name, and 114 the ID of the option available that I want to set as default.
jQuery(document).ready(function($) {
// Target the select element by its class or name
const $deliveryTimeSelect = $('select[name="delivery_time"]');
// Check if the first option has an empty value
const $firstOption = $deliveryTimeSelect.find('option:first');
if ($firstOption.val() === "") {
// Replace the first blank option with the desired option
$firstOption.replaceWith('<option value="114">nous consulter</option>');
// Set the new first option as the default selected option
$deliveryTimeSelect.val('114');
}
});
There must be a better way, using the some PHP code instead. But hey, I could not find any better solution but at least is working and it is not a security breach.
Just for all those that complained here in a different thread that its very hard to find developers ready to customize hivepress theme, i have worked with a handful of prebuilt seems similar to Hivepress, and i did not find any of them coming close to the Easiness, Cleanness, and Native’ness of Hivepresses themes
These developers that say that hivepress is complicated are either not developers or lazy, keep in mind i never learned coding, and i think that i can change ANY aspect of the hivepress themes, with the help of their support, this forum and obviously chatgpt
So to conclude a big Thumbs up 
for hivepress for keeping their code so clean and straight.
A loyal customer and fan.
1 Like
Can I ask for some website examples you’ve set up with HivePress ?
You look both resourceful and helpful.
Cheers !
Give me a way to reply privately
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.