WordPress.org

Ready to get started?Download WordPress

Forums

Collapse-O-Matic
[resolved] replace arrow and text with own image (13 posts)

  1. cathbland
    Member
    Posted 2 years ago #

    HI!

    Can I replace the arrow and text with a button (image that I have created). I tried replacing the arrow pic in Images folder but that didnt work ;)

    http://wordpress.org/extend/plugins/jquery-collapse-o-matic/

  2. Baden
    Member
    Plugin Author

    Posted 2 years ago #

    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

  3. cathbland
    Member
    Posted 2 years ago #

    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 :)

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

    Sorry again!
    Cathy

  4. victor_noxx
    Member
    Posted 2 years ago #

    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.

  5. Baden
    Member
    Plugin Author

    Posted 2 years ago #

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

  6. SirMrDoctorTim
    Member
    Posted 1 year ago #

    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(http://algebranation.com/wp-content/uploads/2012/11/arrow_24x26-copy.png) !important;
    padding: 0 0 0 16px;
    }
    .colomat-close {
        background-image: url(http://algebranation.com/wp-content/uploads/2012/11/down_arrow-2-copy.png) !important;
    }

    and the page is located at http://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!

  7. Baden
    Member
    Plugin Author

    Posted 1 year ago #

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

  8. SirMrDoctorTim
    Member
    Posted 1 year ago #

    Thank you for the response!

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

  9. mattlokay
    Member
    Posted 1 year ago #

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

    http://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.

  10. UaMV
    Member
    Posted 1 year ago #

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

  11. mattlokay
    Member
    Posted 1 year ago #

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

  12. UaMV
    Member
    Posted 1 year ago #

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

  13. Paal Joachim Romdahl
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.