[Plugin: jQuery Collapse-O-Matic] replace arrow and text with own image

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Baden

    (@baden03)

    Yes you can, but you will need to know a bit about css do it.

    One thing to keep in mind: do not simply replace the arrow images in the plugin’s folder, as these will be overwritten when the plugin is updated. Rather, do the following:

    1. Add the arrow-up.png and arrow-down.png images you want to use to your theme’s image folder.
    2. Add the following to your theme’s style.css file: 
      .collapseomatic {
	background-image: url(images/arrow-down.png);
}
.colomat-close {
	background-image: url(images/arrow-up.png);
}
    3. If the spacing needs to be adjusted fit the new images, then add and adjust:
      padding: 0 0 10px 16px;
      to the .collapseomatic definition you added in step above

    Give that a try, and let us know how it all worked out.

    -Baden

    Thread Starter cathbland

    (@cathbland)

    Hi Baden,

    I am very very sorry for bothering you before I had properly read all your documentation!!!

    I found a doc that showed me how to add the pic ??

    https://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/

    Sorry again!
    Cathy

    Hi guys.
    Im really sorry but i want to ask you to write for me a simple how to on replacing the text with a image button. I have tried to insert this code:

    [expand title=”<img src=’falcon_girl.jpg’ />” tag=”div”]Target Content[/expand]

    and replace the ‘falcon_girl.jpg’ with an image url from my site but it didnt work, i have seen the documentation too, but im not really a programmer ??

    If you could write a dummy-type tutorial i would be very grateful.
    Thanks in advance.

    Plugin Author Baden

    (@baden03)

    please share the exact shortcode you are trying to use. A link to the page you are working on is always helpful as well.

    Good Morning,

    I have successfully replaced the arrow image (thanks for the .psd file!), and, unfortunately, I am having issues with moving the file around via CSS. I currently have

    .collapseomatic {
    background-image: url(https://algebranation.com/wp-content/uploads/2012/11/arrow_24x26-copy.png) !important;
padding: 0 0 0 16px;
}
.colomat-close {
    background-image: url(https://algebranation.com/wp-content/uploads/2012/11/down_arrow-2-copy.png) !important;
}

    and the page is located at https://algebranation.com/teachervideos/ (password is algebranation2012).

    Basically, I cannot figure out how to move the arrow down so that it points to the center of the letter. Thanks so much for your help on this!

    Plugin Author Baden

    (@baden03)

    if you change the size of the arrows, you might have to adjust the background-position property in css to center the arrows.

    Thank you for the response!

    Added
    background-position:0% 50%;
    and it’s displaying perfectly.

    Hello,

    I got this to work but now I want to have certain menus to stay expanded and I can’t get it working.

    Here’s the code I’m using for this one image on a page (icon says ERA: 1990s):

    <img src="https://www.vintageland.com/Ebay/images/icons/1990s_men_black.png" id="men5" class="collapseomatic noarrow" expanded="true"  />
<div id="target-men5" class="collapseomatic_content">

<body onLoad="MM_preloadImages('https://www.vintageland.com/Ebay/images/icons/mens_buttondown.png','https://www.vintageland.com/Ebay/images/icons/mens_pants.png','https://www.vintageland.com/Ebay/images/icons/mens_jacket.png','https://www.vintageland.com/Ebay/images/icons/mens_coat.png','https://www.vintageland.com/Ebay/images/icons/mens_accessories.png','https://www.vintageland.com/Ebay/images/icons/mens_accessories_black.png','https://www.vintageland.com/Ebay/images/icons/mens_coat_black.png','https://www.vintageland.com/Ebay/images/icons/mens_jacket_black.png','https://www.vintageland.com/Ebay/images/icons/mens_pants_black.png','https://www.vintageland.com/Ebay/images/icons/mens_buttondown_black.png','https://www.lukasgraphics.com/vintageland/images/all_black.png','https://www.lukasgraphics.com/vintageland/images/all.png')"><table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"><a href="https://lukasgraphics.com/vintageland/?page_id=438" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('1990s_all','','https://www.lukasgraphics.com/vintageland/images/all_black.png',1)"><img id="1990s_all" src="https://www.lukasgraphics.com/vintageland/images/all_black.png"></a></td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
  </tr>
</table>

</div>

    The page is here (see sidebar):

    https://lukasgraphics.com/vintageland/1990s-mens/

    The “ERA: 1990s” icon should be expanded when opening the page but it is not. What am I doing wrong?

    Thanks.

    Try adding colomat-expand-only to the trigclass attribute.

    in the CSS or the code I posted above? I don’t understand. I’m still learning.

    It would actually be in the shortcode. Add trigclass=”colomat-expand-only” to the shortcode declaration.

    What about just adding a red color to the arrows instead of replacing the arrows?

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Plugin: jQuery Collapse-O-Matic] replace arrow and text with own image’ is closed to new replies.