Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 4, 2016 at 3:57 pm #627310
    Real-3D

    Hi,

    I’m trying to customize the fullscreen slider. I tried to read other topic that deal with the same issue but i didn’t find any solution.

    I’m asking if it’s possible to change the icons of the navigation arrows provided by the theme with other created by me?

    Thanks for the support

    May 6, 2016 at 5:14 am #628079
    Rikard

    Hi Real-3D,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    May 6, 2016 at 8:36 am #628172
    Real-3D

    Hi!

    The link of the site is here in the private content.

    Thanks a lot!

    May 8, 2016 at 7:04 am #628815
    Rikard

    Hi,

    You can try something like this in Quick CSS:

    .next-slide:before, .prev-slide:before {
content: 'your content here' !important;
}

    Regards,
    Rikard

    May 9, 2016 at 9:14 am #629086
    Real-3D

    Hi!
    Thanks for the suggestion, what would i insert in “your content here”?
    Thanks!

    May 10, 2016 at 1:11 pm #629872
    Yigit

    Hi,

    You can refer to this post to use another icon from the theme – http://kriesi.at/documentation/enfold/change-icon-used-for-standard-theme-elements/
    If you would like to use anything else, yes, you should replace “your content here” with your content. If that does not help, please show us the icon you would like to use.

    Best regards,
    Yigit

    May 11, 2016 at 11:18 am #630598
    Real-3D

    Hi,
    I tried to see the linked post but I couldn’t change the icons.
    I’d like to see other icons of the theme before adding ony one created by me. How can i choose (for example with a CSS) between the provided icons?

    Thanks!

    May 11, 2016 at 2:20 pm #630729
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
a.prev-slide:before { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-position: 50% 50%; background-repeat: no-repeat; content: '';}
a.next-slide:before { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-position: 50% 50%; background-repeat: no-repeat; content: '';}

    and adjust links

    Best regards,
    Yigit

    May 11, 2016 at 3:10 pm #630754
    Real-3D

    Hi!
    The code seems to be ok, I was able to upload 2 images (.png 100x100px with no background) as icons, but these images are shown cut with a black background.
    Any suggestions?
    Thanks a lot!

    May 11, 2016 at 3:27 pm #630761
    Yigit

    Hey!

    Can you please post the link to your page where we can see the issue? Default icons are visible on the link you posted above.

    Regards,
    Yigit

    May 11, 2016 at 3:30 pm #630764
    Real-3D

    That’s because i turned default.
    Here’s the link

    HOME

    the issue is in the masonry gallery of the home page.
    Thanks

    May 11, 2016 at 3:42 pm #630772
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    a.prev-slide:before,a.next-slide:before { background-size: contain; }

    Regards,
    Yigit

    May 11, 2016 at 4:16 pm #630809
    Real-3D

    Ok, now the icons are shown in regular size! :)
    Is there a way to remove the grey semi-transparent box that is shown with those icons?
    Thanks a lot!

    May 11, 2016 at 4:19 pm #630811
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #top .avia-slideshow-arrows a:before {
    background-color: transparent;
}

    Regards,
    Yigit

    May 11, 2016 at 4:31 pm #630821
    Real-3D

    Yeah that’s perfect! Just as I wanted!
    Thanks a lot for your help!!!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Change icon arrows in fulscreen slider’ is closed to new replies.