Add a CSS class to Attributes

[Marco Elsinger]

Hi,

is it possible to add a custom class to the attributes.
It would be quite handy as you could display different fontawesome icons instead of the normal info icon. Like a wifi, garage, pool, etc. Would there be a plugin to do that or is that just not an option.

Thanks

[Andre Flores]

Hi, Marco!

Each attribute has a unique class by default, you may find the exact class name using Inspect Element tool of your favorite browser. Let’s say, the attribute is named “Location”, in this case the CSS class will be
.mphb-location-title

Regards,
Andre

[Marco Elsinger]

Hi,

Yes I never thought about it so I’ve been playing arround with this now and what I’m trying to archieve is this:

li.mphb-room-type-location.mphb-room-type-custom-attribute::before{
content: “\f3c5”;}

When I apply the change in the browser it will swaap the icon but when I add it to the custom css in the tempalte the icon is not replaced.

Any ideas?

Thanks

[Marco Elsinger]

Hi,

Yes I never thought about it so I’ve been playing arround with this and its working now.

I leave the code below if anyone want to do this in future:

.mphb-room-type-“your atribute slug”.mphb-room-type-custom-attribute::before{content: “you font awesome icone unicode”;}

Thanks

[Andre Flores]

Hi, Marco!

Thanks for sharing the code that worked out for you, I am glad that you have managed to resolve the issue.

Regards,
Andre

[Maria Sarantinou]

thanks 🙂

[Jason Schaefer]

Hi…

Here is more samples to make life easier… as I am a newbie and have struggled to get a grasp on all this… but tonight I think it started to all come together.

INSERT CUSTOM TYPE IN TO PAGE WITH PARAMETERS:

.mphb-loop-room-type-attributes li.mphb-room-type-custom-attribute .mphb-attribute-value > span,
.mphb-single-room-type-attributes li.mphb-room-type-custom-attribute .mphb-attribute-value > span,
.mphb-widget-room-type-attributes li.mphb-room-type-custom-attribute .mphb-attribute-value > span {
  display: inline-block;
  border: 1px solid #acacac;
	border-radius: 10px;
  padding: .325rem 1.25rem;
  margin: 0 .625rem .625rem 0;
	background-color: transparent;
}

INSERT CUSTOM TYPE WITH ICONS BEFORE:

.mphb-loop-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span:before,
.mphb-single-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span:before,
.mphb-widget-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span:before {
  content: '\f0f2';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #aca;
  margin-right: .75em;
  font-size: 14px;
}

INSERT YOUR CUSTOM TYPE WITH BACKGROUND COLOR:

.mphb-loop-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span,
.mphb-single-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span,
.mphb-widget-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span {
  background-color: #ffe;
}

* Just change the SLUG called ‘unit-type’ with your own custom slug name…
* If you want the ICON AFTER your CUSTOM TYPE, just change out the ‘BEFORE’ in the CSS CLASS to ‘AFTER’… and it will allow you to choose which side you want it on.
* Just set your own parameters to what you need, or add more if needed.

INSERT CUSTOM TYPE ICONS AFTER:

.mphb-loop-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span:after,
.mphb-single-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span:after,
.mphb-widget-room-type-attributes li.mphb-room-type-unit-type .mphb-attribute-value > span:after {
  content: '\f0f2';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #aca;
  margin-right: .75em;
  font-size: 14px;
}

Hope this helps someone… as it helped me a ton to learn! (And yes I know the CSS has more logic than is needed to apply your info or alter it… Just throwing it all out there to help.)

… And Andre is a big help and awesome for advice!

Have a great day!
Jason

[Andre Flores]

Hello Jason,

Thanks for sharing your experience, it is indeed much appreciated! I am sure the above sharing will help many users. It would be also much appreciated if your leave your positive feedback about the Hotel Booking plugin at: https://motopress.com/products/hotel-booking/#edd-reviews-respond if you have not had a chance to do it yet 🙂

Thank you in advance!

Regards,
Andre

[Author]

Posts