How do I change the open and close icons used for the toggler?
My UX people want the triangle without the border...
Thanks
Changing the Toggler icon
-
- Propeller Head
- Posts: 51
- Joined: Mon Sep 18, 2017 6:14 am
-
- Propeller Head
- Posts: 51
- Joined: Mon Sep 18, 2017 6:14 am
Re: Changing the Toggler icon
OK found it
1) Found the original icons in the output under Skins\Default\Stylesheets\Images
the are called DropDownOpen.gif and DropDownClosed.gif
2) Edit the images (I use SnagIt) to get rid of the borders (yes they are part of the image)
3) Copied the images to my Resources/images folder
3) Edit the main CSS file and set the properties mc-open-image and mc-closed-image to point to these files
or just use a text editor and add the css
MadCap|toggler
{
mc-closed-image: url('../Images/DropDownClosed.png');
mc-open-image: url('../Images/DropDownOpen.png');
}
1) Found the original icons in the output under Skins\Default\Stylesheets\Images
the are called DropDownOpen.gif and DropDownClosed.gif
2) Edit the images (I use SnagIt) to get rid of the borders (yes they are part of the image)
3) Copied the images to my Resources/images folder
3) Edit the main CSS file and set the properties mc-open-image and mc-closed-image to point to these files
or just use a text editor and add the css
MadCap|toggler
{
mc-closed-image: url('../Images/DropDownClosed.png');
mc-open-image: url('../Images/DropDownOpen.png');
}
-
- Propeller Head
- Posts: 89
- Joined: Tue Jun 04, 2013 9:49 am
- Location: Arkansas, U.S.A.
Re: Changing the Toggler icon
Yes, I've done this. But I want to resize the default Flare size. Everything I've tried doesn't work.
-
- Sr. Propeller Head
- Posts: 259
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Changing the Toggler icon
I think it's because the toggler definition is an inline element. If I do the above and make my icons 50px square, I see the larger icon, but I only see a slice of it to fit in the line-height of the toggler. If I change it to a block element and specify a height like below, I can see the larger 50px icon.
Is that what you're trying to do?
Rob
Code: Select all
MadCap|toggler
{
mc-closed-image: url('../Images/DropDownClosed.gif');
mc-open-image: url('../Images/DropDownOpen.gif');
height: 50px;
display: block;
}
Rob