Add a CSS class to Attributes

  • This topic has 7 replies, 4 voices, and was last updated 8 months ago by Andre Flores.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #987418
    Marco Elsinger
    Participant

    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

    #987482
    Andre Flores
    Moderator

    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

    #988275
    Marco Elsinger
    Participant

    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

    #988299
    Marco Elsinger
    Participant

    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

    #988355
    Andre Flores
    Moderator

    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

    #1030041
    Maria Sarantinou
    Participant

    thanks ๐Ÿ™‚

    #1035195
    Jason Schaefer
    Participant

    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

    #1036244
    Andre Flores
    Moderator

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.