fbpx

Trick or Treat - 30% OFF - Coupon Code: SCARY20 Download Now

Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED)JD Law Practice mouse over icon

JD Law Practice mouse over icon 1 year 3 months ago #16599


I would like to use style 2 of the jd law practice element, but I can't change the icon that appears when I move the mouse over the image. For all elements (business law, criminal law, ...), the image is always the one attached.
Is there a way to customize it?
Thanks
Last Edit: 1 year 3 months ago by [email protected].
The administrator has disabled public write access.

JD Law Practice mouse over icon 1 year 3 months ago #16605

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4151
  • Thank you received: 609
  • Karma: 108
Hi,

Can you provide a screenshot of the section you are referring to?

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

JD Law Practice mouse over icon 1 year 3 months ago #16606

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4151
  • Thank you received: 609
  • Karma: 108
I meant from the demo site demo.joomdev.com/lawx/toolbar, since what you provide isn't clear enough.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

JD Law Practice mouse over icon 1 year 3 months ago #16607

Hi,
on the demo site you can see the Service 2 section https://demo.joomdev.com/lawx/toolbar/index.php/services/services-02
the mouse over on the practice areas, always displays the same icon.
In the configurations of the JD Law practice element I can just modify the background image but not the mouse over image.
I hope I was clearer.
Thanks
Sebastiano
The administrator has disabled public write access.

JD Law Practice mouse over icon 1 year 3 months ago #16618

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 700
  • Thank you received: 96
  • Karma: 24
Hello,

We have not an option of these type for the moment. But you can do it by adding a class and few custom CSS.
Step 1: Add a class in every element for the specific icon of services Like icon1, icon2, icon3 ...
See Screenshot: www.screencast.com/t/cnoE1kv3coZ
Step 2: You must have icons images to put different icons.
Step 3: Add the following CSS in the custom.css file.
.qx-element-jd-law-practice.icon1 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-1.png) no-repeat;
}
.qx-element-jd-law-practice.icon2 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-2.png) no-repeat;
}
.qx-element-jd-law-practice.icon3 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-3.png) no-repeat;
}
.qx-element-jd-law-practice.icon4 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-4.png) no-repeat;
}
.qx-element-jd-law-practice.icon5 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-5.png) no-repeat;
}
.qx-element-jd-law-practice.icon6 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-6.png) no-repeat;
}

Path: JoomlaRoot\templates\jd_lawx\css

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The administrator has disabled public write access.

JD Law Practice mouse over icon 1 year 3 months ago #16623

Perfect...It works fine!
I also added the instruction below to have the same result
background-position: center;
Following the code added in custom.css
.qx-element-jd-law-practice.icon1 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-1.png) no-repeat;
	background-position: center;
}
.qx-element-jd-law-practice.icon2 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-2.png) no-repeat;
	background-position: center;
}
.qx-element-jd-law-practice.icon3 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-3.png) no-repeat;
	background-position: center;
}
.qx-element-jd-law-practice.icon4 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-4.png) no-repeat;
	background-position: center;
}
.qx-element-jd-law-practice.icon5 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-5.png) no-repeat;
	background-position: center;
}
.qx-element-jd-law-practice.icon6 .media-background a:hover::after {
	background: rgba(87, 197, 70, 0.83) url(../images/icons/icon-6.png) no-repeat;
	background-position: center;
}
Problem solved.
Thanks
The administrator has disabled public write access.

JD Law Practice mouse over icon 1 year 3 months ago #16626

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 700
  • Thank you received: 96
  • Karma: 24
Awesome you liked it and sure we'll keep up the work. Issue closed.
Your feedbacks are very much valuable for us, therefore, we'll be happy if you could also rate the template on our website: www.joomdev.com/products/templates/jd-lawx-template and would be amazing if you could tweet about your experience with us on our twitter handle: twitter.com/joomdev

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.369 seconds