Button Add favorites

ClicClac

Hello,

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

fretzl

Use CSS

ClicClac

Do you an example ?

I'm using Basic Theme.

The submit button is
`



`

ClicClac

Ok I will use:

`

.imagesFavorites_remove input[type="submit"] {

border: thin solid red;

}

.imagesFavorites_add input[type="submit"] {

border: thin solid green;

}

`

ClicClac

Now I'm trying to add an icon webfont.

I need to add this somewhere...

`

.icon-heart:before {

content: "\e627";

}

`

Any idea ?

acrylian

`.imagesFavorites_add:before`?

ClicClac

Nope

acrylian

`.imagesFavorites_add input[type="submit"]:before` maybe. Other than that you can also replace the text with the content/icon.

ClicClac

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

This works for me. So it should work with an icon font as well.

`
.imagesFavorites_add:before {
content:"some text";
}
`

acrylian

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.

ClicClac

@ 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

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.

ClicClac

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

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

.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

Hm, right. Another way would maybe be the old school way via a background image.

gjr

You shouldn't be so anti-js acrylian!

acrylian

Yeah, I know, but with JS I still feel less is more often :-)

ClicClac

gjr's script is fine for unicode character, but not for icomoon font

acrylian

Then maybe the oldschool way is easiest. MAybe even using a svg image icomoon provides (problem with some browsers though without also JS tricks.)