Implemented CSS Classes for CAS Ad Type Labels

[Bob]

Please add some CSS Classes for CAS Ad Type Labels

 

[Bob]

This should do the trick. I've added some CAS specific Label Classes that you can target for each Ad Type Label:

• label--casForSale
• label--casForRent
• label--casForLoan
• label--casForTrade
• label--casFree
• label--casWanted
• label--casService
• label--casJob
• label--casAnnouncement

And here you can see how they are applied in the getAdTypeLabelHtml() function in the Ad Entity.

    // used for creating HTML labels for Ad Types
    public function getAdTypeLabelHtml()
    {
        $adTypeLabelHtml = '';
      
        if ($this->ad_type  == 'for_sale')
        {
            $adTypeLabelHtml = '<span class="label label--green label--casForSale">' . \XF::phraseDeferred('xa_cas_for_sale') . '</span>';
        }
        else if ($this->ad_type  == 'for_rent')
        {
            $adTypeLabelHtml = '<span class="label label--olive label--casForRent">' . \XF::phraseDeferred('xa_cas_for_rent') . '</span>';
        }
        else if ($this->ad_type  == 'for_loan')
        {
            $adTypeLabelHtml = '<span class="label label--olive label--casForLoan">' . \XF::phraseDeferred('xa_cas_for_loan') . '</span>';
        }
        else if ($this->ad_type  == 'for_trade')
        {
            $adTypeLabelHtml = '<span class="label label--orange label--casForTrade">' . \XF::phraseDeferred('xa_cas_for_trade') . '</span>';
        }
        else if ($this->ad_type  == 'free')
        {
            $adTypeLabelHtml = '<span class="label label--lightGreen label--casFree">' . \XF::phraseDeferred('xa_cas_free') . '</span>';
        }
        else if ($this->ad_type  == 'wanted')
        {
            $adTypeLabelHtml = '<span class="label label--red label--casWanted">' . \XF::phraseDeferred('xa_cas_wanted') . '</span>';
        }
        else if ($this->ad_type  == 'service')
        {
            $adTypeLabelHtml = '<span class="label label--royalBlue label--casService">' . \XF::phraseDeferred('xa_cas_service') . '</span>';
        }
        else if ($this->ad_type  == 'job')
        {
            $adTypeLabelHtml = '<span class="label label--skyBlue label--casJob">' . \XF::phraseDeferred('xa_cas_job') . '</span>';
        }
        else if ($this->ad_type  == 'announcement')
        {
            $adTypeLabelHtml = '<span class="label label--yellow label--casAnnouncement">' . \XF::phraseDeferred('xa_cas_announcement') . '</span>';
        }
              
        return $adTypeLabelHtml;
    }

 

[Bob]

This should do the trick.

 

[Tracy Perry]

For any wondering what this can be used for, this is an example of three of the different types using FA icons for the transaction type (yes, the one image somewhat shows that already I gave).
It works like a champ and adds just a touch of "pizz-azz" to the ads.

 

[gldtn]

This should do the trick. I've added some CAS specific Label Classes that you can target for each Ad Type Label:

• label--casForSale
• label--casForRent
• label--casForLoan
• label--casForTrade
• label--casFree
• label--casWanted
• label--casService
• label--casJob
• label--casAnnouncement

And here you can see how they are applied in the getAdTypeLabelHtml() function in the Ad Entity.

    // used for creating HTML labels for Ad Types
    public function getAdTypeLabelHtml()
    {
        $adTypeLabelHtml = '';
  
        if ($this->ad_type  == 'for_sale')
        {
            $adTypeLabelHtml = '<span class="label label--green label--casForSale">' . \XF::phraseDeferred('xa_cas_for_sale') . '</span>';
        }
        else if ($this->ad_type  == 'for_rent')
        {
            $adTypeLabelHtml = '<span class="label label--olive label--casForRent">' . \XF::phraseDeferred('xa_cas_for_rent') . '</span>';
        }
        else if ($this->ad_type  == 'for_loan')
        {
            $adTypeLabelHtml = '<span class="label label--olive label--casForLoan">' . \XF::phraseDeferred('xa_cas_for_loan') . '</span>';
        }
        else if ($this->ad_type  == 'for_trade')
        {
            $adTypeLabelHtml = '<span class="label label--orange label--casForTrade">' . \XF::phraseDeferred('xa_cas_for_trade') . '</span>';
        }
        else if ($this->ad_type  == 'free')
        {
            $adTypeLabelHtml = '<span class="label label--lightGreen label--casFree">' . \XF::phraseDeferred('xa_cas_free') . '</span>';
        }
        else if ($this->ad_type  == 'wanted')
        {
            $adTypeLabelHtml = '<span class="label label--red label--casWanted">' . \XF::phraseDeferred('xa_cas_wanted') . '</span>';
        }
        else if ($this->ad_type  == 'service')
        {
            $adTypeLabelHtml = '<span class="label label--royalBlue label--casService">' . \XF::phraseDeferred('xa_cas_service') . '</span>';
        }
        else if ($this->ad_type  == 'job')
        {
            $adTypeLabelHtml = '<span class="label label--skyBlue label--casJob">' . \XF::phraseDeferred('xa_cas_job') . '</span>';
        }
        else if ($this->ad_type  == 'announcement')
        {
            $adTypeLabelHtml = '<span class="label label--yellow label--casAnnouncement">' . \XF::phraseDeferred('xa_cas_announcement') . '</span>';
        }
          
        return $adTypeLabelHtml;
    }

Is this hard coded in a php file? Sorry I'm a little lost as I don't have access to the whole conversation. I've been looking/searching into templates for a while and could not find it. Which brought me here. Can you shed a light on how I can edit/override the default values in getAdTypeLabelHtml() ? or is that a php callback that I can run on a template edit?

Thanks!

 

[gldtn]

Never mind guys, I was able to figure it out.

Thank you!

 

[Bob]

Never mind guys, I was able to figure it out.

Thank you!

I KNEW there was something I had to do this AM...glad you got things sorted

 

[gldtn]

I KNEW there was something I had to do this AM...glad you got things sorted

Took me a while to figure out that you where referring to the php file, I removed default labels that was conflicting with my edit and got it working beautifully.

When I have a little more time I'll try to find a way so I'm not editing the php to remove defaults, maybe just a matter of playing with css.

Here is how it looks if someone is looking for inspiration lol:


And for those interested here is how I applied colors and icons:

.label
{
    &:before
    {
        padding-right: 4px;
        .m-faBase();
    }

    &.label--
    {
        &casFree:before
        {
           .m-faContent(@fa-var-hands-heart);
        }
        &casFree { .m-labelVariation(#120F12, #ccf9c8, #a9d5a5); } // lightGreen
     
        &casWanted:before
        {
             .m-faContent(@fa-var-binoculars);
        }
        &casWanted { .m-labelVariation(#120F12, #FFB86C, #d38028); } // orange

        &casForTrade:before
        {
            .m-faContent(@fa-var-handshake);
        }
        &casForTrade { .m-labelVariation(#120F12, #8BE9FD, #4dc7e1); } // blue
    }
}

 

[Bob]

When I have a little more time I'll try to find a way so I'm not editing the php to remove defaults, maybe just a matter of playing with css.

I THINK for CAS 2.3 (or 3.0), I've added Style Properties for each Ad Status, so that Ad Status can be colored on a per style basis. Bit easier than php edits and or extra less. Reason I say THINK as I am working on so many different versions of addons right now lol

 

[gldtn]

It's always nice to get those extra details, I know a lot of people won't touch PHP files.

** Where are all the fun post reactions? Xen 1 is missing all the fun

 

[Bob]

** Where are all the fun post reactions? Xen 1 is missing all the fun

XenAddons Product Manager aka XAPM (new store) is getting closer and closer. Once its at least to a point where license holders can download, I think I will upgrade this site to XF2. Purchasing can always be handled via PP Invoicing until I have the available time to work on the purchasing side of things.