Change post title color bug

When I change the Title color of a post like:
๐Ÿ”Ž <span style="color: #ffcc00;">Philips Brilliance 272P</span>

There appears a text like: " Philips Brilliance 272P" class=" featured-img"> above the image of the highlights carousel.

How do I fix this?

It has nothing to do with the emoji, just with the color changing code.

@kharisblank @vlad

Hello there,

Could you please tell me how you did that? So I could reproduce it in my test site to debug and troubleshoot the possible error might be there.

You could also manage the title color with this simple CSS code:

.athemes_posts_carousel a.post-title-standard {
  color: #ff0000; 
}

To apply it to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Doesnโ€™t it work for you?

Regards,
Kharis

Hey Kharis,

Thank you for your reply but this does not solve the problem. I only want certain titles to be (gold) coloured, others can stay black or the colour they were.

How I tried to do that is as follows:
Posts -> edit a post -> Change the title to โ€œ<span style="color: #ffcc00;">Philips Brilliance 272P</span>โ€

Kind regards,
Wesley de Vries

Hello there,

It looks like wrapping it with:

   <span style="color: #ffcc00;">....</span>

is an ideal way. To avoid HTML error ensure the tag properly closed or written.

Regards,
Kharis

Dear,

Thank you for your reply but it still does not solve the problem. The html code keeps on showing up in the carrousel (mobile and normal website) the tag is properly closed. It is exactly exactly the same as what I posted in my first post.

Kind regards,
Wesley

Hello Wesley,

I took some time to inspect it deeper and found that the HTML tag inside the title produces a conflict with the title attribute. To fix it, use single quote for span attribute. Edit your posts, and use:

   <span style='color: #ffcc00;'>....</span>

Update.

Then do the below steps to remove the span tag inside the title attribute of the postโ€™s link.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      if( $('a[title]').length ) {
        var valTitle = $('a[title]').attr('title');
        $('a[title]').attr('title', valTitle.replace(/(<([^>]+)>)/ig,""));
      }

    })(jQuery)
  1. Update

You may need to flush any site cache (if applied), as it usually prevents new code addition to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

1 Like

Thank you so much, it solved the problem. I hope other people who encounter the same will find this topic and make use of it as well! :slight_smile:

I hope so! Youโ€™re welcome! Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Eventually I switched themes. My website looks much better now on mobile. Still many thanks for the support.