Button Add favorites

Hello,

I would like replacing this button by a small one (picture).
Is it possible ?

Comments

  • fretzl Administrator
    Use CSS
  • Do you an example ?

    I'm using Basic Theme.

    The submit button is
    `



    `
  • Ok I will use:

    `

    .imagesFavorites_remove input[type="submit"] {

    border: thin solid red;

    }

    .imagesFavorites_add input[type="submit"] {

    border: thin solid green;

    }

    `
  • Now I'm trying to add an icon webfont.

    I need to add this somewhere...

    `

    .icon-heart:before {

    content: "\e627";

    }

    `

    Any idea ?
  • acrylian Administrator
    `.imagesFavorites_add:before`?
  • Nope :(
  • acrylian Administrator
    `.imagesFavorites_add input[type="submit"]:before` maybe. Other than that you can also replace the text with the content/icon.
  • Not better :(
    I give up.

    A last question: the form is made by the function 'ad_removeButton'. Can I make a new one with ' 'zp_register_filter ' ?
  • fretzl Administrator
    This works for me. So it should work with an icon font as well.

    `
    .imagesFavorites_add:before {
    content:"some text";
    }
    `
  • acrylian Administrator
    If you use icomoon iconfonts you beed to modify the generated css as well. `.imagesFavorites_add` otherwise is probably just not assigne the font.

    You can disable the filter but then you have to re-create the full function attached as well.
  • @ fretzl
    For me, it just add "some text" before the form.

    @acrylian
    For the function zp_remove_filter and zp_register_filter, I don't understand the 1st parameter $hook. What is it?
    (it's ok for theme_head, theme_body_open..)
    I don't find anything in ZP documentation.
  • acrylian Administrator
    The hook is the filter you want to use. You have to look at the favorites plugin which that is exactly. Be aware that this is a fairly complex plugin. You might have to re-create a lot of things to not break anything.

    It should be possible to do this via CSS only.
    For me, it just add "some text" before the form.
    Which fretzl's CSS is supposed to do. You want to add an icon. So you need to use the right font. If no icon is added you don't. That is for sure icon font css from icomoon so it is by default only assigned to the `.icon-heart` class. Since you cannot add that to the favorites you need to assign the font to the other class, too.
  • zp_remove_filter:
    This function removes a function attached to a specified filter hook. This method can be used to remove default functions attached to a specific filter hook and possibly replace them with a substitute.

    zp_remove_filter( string $hook, callback $function_to_remove, [int $priority = NULL])

    How to replace them with a substitute ?

    I will look for css later.
    Thank you for your patience ;-)
  • acrylian Administrator
    You really should try CSS. Using filters is rather advanced coding. You have to look the faviorites plugin and see what it does. Find the filter used for the button (I don't know off hand which filter does what right now) and replicate the function attached. Best make a custom plugin. You could also hack the plugin directly but in both cases you have to maintain your changes if we do any changes ourselves. CSS is really saver :-)
  • gjr Member
    .imagesFavorites_add input[type="submit"]:before has no content to put the pseudo-element before so this will not work. The "content" of an input submit is defined in the value attribute (value="Remove favorite").

    You can do this via js though, see the solution @:
    http://stackoverflow.com/questions/7383766/css-how-can-i-add-something-before-the-value-of-an-input
  • acrylian Administrator
    Hm, right. Another way would maybe be the old school way via a background image.
  • gjr Member
    You shouldn't be so anti-js acrylian! :)
  • acrylian Administrator
    Yeah, I know, but with JS I still feel less is more often :-)
  • gjr's script is fine for unicode character, but not for icomoon font
  • acrylian Administrator
    Then maybe the oldschool way is easiest. MAybe even using a svg image icomoon provides (problem with some browsers though without also JS tricks.)
Sign In or Register to comment.