Joomla Templates Club 406,261 posts

[unimarconi Friend unimarconiJoin date: September 2015Posts: 24Downloads:136Uploads:0 Thanked: 1 times in 1 posts]

#1068585

Hello, I need to specify some line breaks into the description field of the ACM Features Intro (Style 2) in homepage. I put
and it correctly breaks the lines in normal display, but when I hover the component it shows the literal html code instead. I traced the problem back to this css rule:

p:before {
        color: rgba(255, 255, 255, 0.5);
        content: attr(data-letters);
        left: 0;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 2;
        .transition(opacity 750ms ease 0s);
        .opacity(0);
      }

as per css specifications content is taken verbatim and not passed to the html processor so html tags are showed literally.

Is there a workaround?
Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1068780

Hi,

Could you share the URL of your site and tell me the part you’re mentioning?

[unimarconi Friend unimarconiJoin date: September 2015Posts: 24Downloads:136Uploads:0 Thanked: 1 times in 1 posts]

#1069171

Hello, the web site is still in development so is not accessible yet. You can easy try for yourself on the demo site edit the features intro acm module and put some html tag (like "strong" or "br") into the description field. They will show correctly in the "normal" view but once you will over with the mouse they will show the tags in clear. I found a solution, not sure if it breaks anything but I did the following:

.acm-features.style-2 .features-item:hover p {
  /* color: transparent; */
  color: #ffffff;
}
.acm-features.style-2 p:before {
  color: rgba(255, 255, 255, 0.9);
/*  content: attr(data-letters); */
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 2;
  -webkit-transition: opacity 750ms ease 0s;
  -o-transition: opacity 750ms ease 0s;
  transition: opacity 750ms ease 0s;
  opacity: 0;
  filter: alpha(opacity=0);
}

I probably lost some fancy effect, but now the description is displayed correctly on hover If you have any comment about my solution let me know Thanks

• This reply was modified 7 years, 1 month ago by  unimarconi.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1069419

I got your point, when hovering each item in this module, it will retrieve the description and put in ‘data-letters’, then the ‘content’ property here will show that description. However, when it can only retrieve the raw text so it keeps showing the html tags you used in the description. You can use above customization or if you want to remove html tags when hovering, you can go to file:

root/templates/ja_events_ii/acm/features-intro/tmpl/style-2.php

at approx line 42, you change:

<p data-letters="<?php echo $helper->get('data.description', $i) ?>"><?php echo $helper->get('data.description', $i) ?></p>

to:

<p data-letters="<?php echo strip_tags($helper->get('data.description', $i)) ?>"><?php echo $helper->get('data.description', $i) ?></p>

This will keep the style, not show the HTML tags but it will display the original description text.

[Author]

Posts