Joomla Templates Club 406,261 posts

[raymondle80 Friend raymondle80Join date: August 2015Posts: 16Downloads:10Uploads:4 Thanked: 1 times in 1 posts]

#842334

Hi everyone, I will like to ask for some help regarding the slideshow module. Have made it autorun and its very nice and all, but I think it can be better.

1. Take a look at the module in the backend, there is ‘Title’ and ‘Description’
   • on the frontend, the title is clickable as a link but the description is not clickable.

Is there anyway to allow the description to be linked as well?

1. Customising the font size of ‘Title’ and ‘Description’ on the frontend, is it possible?

2. When the slideshow module is activated (instead of invisible) on small devices such as mobile phones, the description is missing. Only the title is showing.

How do we show the description as well?

Hope you can help 🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#843840

Hi,

Hope my explanation below will help you to understand the issue :

• Slideshow type under JA ACM module only works with clickable title and not the description, if you want to add the into description, you would need to customize it.

Open templates/ja_platon/acm/slideshow/tmpl/style-owl.php file

find and change

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

to

<?php if($helper->get('data.title', $i)): ?>
<p class="item-desc"><a href="<?php echo $helper->get('data.slideshow-link', $i); ?>" title="<?php echo $helper->get('data.title', $i) ?>"><?php echo $helper->get('data.description', $i) ?></a></p>
<?php endif; ?>

• Description is not showing on the mobile layout because the dimension width and height are very small that’s why you can not see the description. You would need to customize it as well.

• About changing the CSS style the title and the description, you have a look at from templates/ja_platon/acm/slideshow/css/themes/indigo/style.css file

.acm-slideshow .owl-carousel .item .slider-content .item-desc {
  color: #ffffff;
  font-size: 36px;
  line-height: 40px;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 991px) {
  .acm-slideshow .owl-carousel .item .slider-content .item-desc {
    display: none;
  }
}
.acm-slideshow .owl-carousel .item .slider-content .item-title {
  margin-top: 0;
  position: relative;
  margin-bottom: 12px;
  color: #ffffff;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

Let me know if it helps

Regards

[raymondle80 Friend raymondle80Join date: August 2015Posts: 16Downloads:10Uploads:4 Thanked: 1 times in 1 posts]

#843875

Edited** – able to see ninja lead’s reply now

[raymondle80 Friend raymondle80Join date: August 2015Posts: 16Downloads:10Uploads:4 Thanked: 1 times in 1 posts]

#845502

Hi Ninja Lead! Thank you for your help. Your tips works beautifully.

1. The description in the slideshow module is now linkable. However it has turned orange instead of white.

2. Unfortunate that I still dont know how to customise the description to appear in small devices.

3. I have managed to change the font size of the description with ease.

Very grateful for your help 🙂

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#846314

If you want to show description on mobile layout, you have to remove the CSS style below in templates/ja_platon/acm/slideshow/css/themes/indigo/style.css file

@media (max-width: 991px) {
  .acm-slideshow .owl-carousel .item .slider-content .item-desc {
    display: none;
  }
}

About the text color under description in the slideshow module changed to orange, you can force it to white with my CSS style below

p.item-desc a {
    color: #fff;
}

[raymondle80 Friend raymondle80Join date: August 2015Posts: 16Downloads:10Uploads:4 Thanked: 1 times in 1 posts]

#847415

Thanks Ninja lead, the font colour has changed after a forced CSS modification.

However after removing the code

@media (max-width: 991px) {
.acm-slideshow .owl-carousel .item .slider-content .item-desc {
display: none;
}
}
from the style.css file, I am still unable to see the description on the mobile device.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#847447

In this case, you should give me the credentials e.g: URL, admin account so that I will help you to check it directly on your site.

[raymondle80 Friend raymondle80Join date: August 2015Posts: 16Downloads:10Uploads:4 Thanked: 1 times in 1 posts]

#847553

This reply has been marked as private.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#847558

I fixed the problem directly on your site and you can see my solution into templates/ja_platon/acm/slideshow/css/style.css file

@media (max-width: 767px) {
    .acm-slideshow .owl-carousel .item .slider-content .item-desc {
        display: block !important;
        font-weight: 100 !important;
        font-size: 14px !important;
        line-height: 14px !important;
    }

    .acm-slideshow .owl-carousel .item .slider-content {
        top: 60px !important;
    }
}

[Author]

Posts