Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 4, 2014 at 8:21 am #274409
    InitiativeNeuland

    I want to make my own overlay für linked image. Where can I edit this? I just need the path to the document, where overlay can be edited.
    Or is there a easy way to do? I just found that I can edit the color of overlay / background and icon.
    I don´t just want to change overlay icon but also the animation.
    Thanks,
    Kathrin

    June 4, 2014 at 7:55 pm #274703
    Josue

    Hi Kathrin!

    It’s not an image but an icon font, here’s how to change it:
    https://kriesi.at/support/topic/rollover-disc-arrow-replacement-part-2/#post-121206

    And here’s the Entypo character’s map with the proper codes:
    http://www.entypo.com/characters/

    Regards,
    Josue

    October 20, 2014 at 3:13 am #338088
    etnMathy

    Hello everybody,

    is it really only possible to just pick from the Entypo picture :(? I would like to have my logo on it. Is there any chance of changing it without destroying the code of the theme O:-)?

    Thanks in advance and have a nice day!
    Martin

    October 20, 2014 at 8:06 am #338168
    Josue

    Hey Martin!

    No, it is possible to use custom fonts too, you’ll just need to import them as icon fonts, check out this video.

    Use Fontello to convert your custom graphic into an icon font, you’ll need to import it as a compound-path SVG.

    Regards,
    Josue

    October 20, 2014 at 12:55 pm #338288
    etnMathy

    Awesome! Will do. Thanks!!

    October 20, 2014 at 3:34 pm #338389
    Josue

    Hope it works for you, let us know if you have any other questions :)

    Regards,
    Josue

    October 21, 2014 at 11:41 pm #339270
    etnMathy

    Hi,

    I watched it all around and read it all and I’m kinda stucked in the css phase, still missing something. I suppose that now I can leave the css code it in my child-theme’s css (?). I’ve imported custom font from Fontello and my custom icon appeard in WordPress. If I hover it in the Icon list, it says that the Charcode is \ue800. But when I add this to css:

    .image-overlay.overlay-type-extern .image-overlay-inside::before{content:"E800";}
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"E800";}

    (I tried “\ue800” and “e800”), the result is that only the code between the qoutes is shown :(. Please can give me a hint on what I’m doing wrong :(?

    Many thanks!
    Martin

    October 22, 2014 at 12:46 am #339289
    Josue

    Hey Martin!

    You don’t necessarily have have to add CSS to make this change, you could do it via child functions.php, try adding this:

    add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);

function avia_replace_standard_icon($icons)
{
$icons['ov_external']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue915');
$icons['ov_image']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue915');
$icons['ov_video']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue915');
return $icons;
}

    Replace “entypo-fontello” by the name of the imported font and “ue915” by the code of the desired icon, you can check these when adding an Avia icon-based element in a page.

    Reference:
    http://kriesi.at/documentation/enfold/change-icon-used-for-standard-theme-elements/

    Regards,
    Josue

    October 22, 2014 at 3:24 am #339322
    etnMathy

    Hello,

    thanks for your reply. I think that I added it right, according to the font name and code rom the icon box:
    https://www.dropbox.com/s/dw1pnxlms8kpvdk/Screenshot%202014-10-22%2003.13.00.png?dl=0

    …and then applied the code you provided on function.php in my child theme (checked the refference as well, to understand it more properly) like this:
    https://www.dropbox.com/s/3y7ovcv5jc6i7v6/Screenshot%202014-10-22%2003.14.51.png?dl=0

    And nothing happend :(. Did I do something wrong in the process :(?

    Thanks alot!
    Martin

    October 22, 2014 at 3:30 am #339324
    Josue

    Hi,

    Can you post the link to your website please? an administrator account would be helpful too.

    Regards,
    Josue

    October 22, 2014 at 3:36 am #339326
    etnMathy
    This reply has been marked as private.
    October 22, 2014 at 3:56 am #339330
    Josue

    Hey!

    It works now, i ended up using CSS, for some reason that filter is not working.

    .image-overlay .image-overlay-inside:before {
content: "\E800";
font-family: 'fontello';
}

    Regards,
    Josue

    October 22, 2014 at 4:05 am #339336
    etnMathy

    Thanks! But..I still don’t see any change O:-). I’ve tried all my browsers and erased the cache….is there anything I can do?

    October 22, 2014 at 4:15 am #339341
    Josue

    Check it now.

    October 22, 2014 at 8:32 am #339395
    etnMathy

    Works like a charm, you’re my personal hero Josue, thank you very much :). Where was the problem?

    October 22, 2014 at 3:53 pm #339500
    Josue

    I needed to add !important so it doesn’t get overwritten by any other rule:

    .image-overlay .image-overlay-inside:before {
content: "\E800" !important;
font-family: 'fontello' !important;
}

    Regards,
    Josue

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.