Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • Author
    Posts
  • July 12, 2018 at 12:49 pm #984680
    smoothbob

    Hi
    I want to replace some of the icons with my own pngs.

    i found this link that discusses it but I cannot get it working

    https://kriesi.at/support/topic/custom-icon-in-icon-box/

    here is my code, I gave the icon a css name of myicon

    /* ICONS————–*/
    .myicon .iconbox_icon:before { visibility: hidden !important; }
    .myicon .iconbox_icon { background: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    the last icon on this page for example should be replaced but is not working

    Useful links

    thanks!

    July 13, 2018 at 9:30 am #985048
    Guenni007

    nearby – the selector is not the iconbox_icon:

    .myicon .av-icon-char::before {
    visibility: hidden;
}

.myicon .av-icon-char {
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

    by the way the kriesi logo above has a lot of transparency arround the logo. If you do not have this space the image will be bigger.

    July 13, 2018 at 11:07 am #985107
    smoothbob

    I replaced the icon with a more suitable image.
    something is happening, as in the fontello icon is being removed but it is not showing the image in its place
    http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png

    thanks!

    July 13, 2018 at 11:38 am #985114
    Guenni007

    your link in the css to the image is not correct:

    .myicon .av-icon-char {
    background-image: url('http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
    July 13, 2018 at 1:09 pm #985143
    smoothbob

    if you copy the image link and try it it is correct

    .myicon .av-icon-char {
    background-image: url
    (http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    }

    July 13, 2018 at 3:39 pm #985193
    Guenni007

    the link to your image is correct – but your css entry has a different link !

    this is what is in your css:

    .myicon .av-icon-char {
    background-image: url('http://wpg.com.gridhosted.co.uk/wp-content/uploads/dynamic_avia/wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

    maybe you have to erase the old merged css files of your enfold !

    • This reply was modified 6 years, 4 months ago by Guenni007.
    July 13, 2018 at 4:29 pm #985216
    smoothbob

    enfold is changing the path – the one I enter is correct
    http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png

    but it ends up being:
    http://wpg.com.gridhosted.co.uk/wp-content/uploads/dynamic_avia/wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png

    how do I stop that? use a relative path?

    I tried checking and unchecking this in the performance section of the theme:
    Delete old CSS and JS files?
    but nothing happens.
    also tried installing some caching plugins but none work properly right now…

    thanks

    July 15, 2018 at 4:17 pm #985672
    Mike

    Hi,
    The image path issue was a bug in v4.3, yet I see you are using v4.4.1, perhaps this file is in your child theme?
    Please try replacing this file with the one in the Private Content area:

    /enfold/config-templatebuilder/avia-template-builder/php/asset-manager.class.php

    and check if there is a copy of it in your child theme.

    Please keep a copy of your file as a backup, until you have well tested.

    Best regards,
    Mike

    July 16, 2018 at 11:38 am #985899
    smoothbob

    Hi Mike

    I do not have that file in my child theme and adding it makes no difference

    thanks

    July 17, 2018 at 3:22 am #986193
    Mike

    Hi,
    Please include a admin login & FTP access in the Private Content area, so we can take a closer look.

    Best regards,
    Mike

    July 17, 2018 at 6:09 pm #986533
    smoothbob

    thanks!

    • This reply was modified 6 years, 4 months ago by Mike. Reason: moved password to Private Content area
    July 18, 2018 at 1:18 pm #986960
    Mike

    Hi,
    Thank you for the login, I changed your quick css to:

    .myicon .av-icon-char:before { visibility: hidden !important; }
.myicon .av-icon-char { background: url(https://your-site.com/wp-content/uploads/2018/07/myicon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    and it now works, Please clear your browser cache and check.

    Best regards,
    Mike

    July 18, 2018 at 1:33 pm #986966
    smoothbob

    perfect. thanks for your help

    July 18, 2018 at 4:16 pm #987081
    smoothbob

    Hi
    sorry, another thing…

    Homepage

    on this page I have now replaced the icons in Services but cannot replace the icons inside the Our Network tabs
    thanks!

    July 18, 2018 at 8:11 pm #987156
    Guenni007

    So kids so much imagination you should have that you can add !important.
    It’s the same code as here: https://kriesi.at/support/topic/using-pngs-instead-of-fontello-icons/#post-985048
    Head shake emoji :lol

    July 19, 2018 at 3:50 am #987243
    Mike

    Hi,
    Do you mean the icons that look like flags or the ones that look like the globe?

    Best regards,
    Mike

    July 19, 2018 at 10:09 am #987321
    smoothbob

    Ah, sorry, the globe icons. thanks!

    July 19, 2018 at 10:53 am #987330
    smoothbob

    also on those tabs is it possible to give me the ccs classes for a rollover and selected state?

    many thanks

    July 20, 2018 at 3:05 am #987670
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    #top.home #av-tab-section-1 .av-tab-section-icon:before { visibility: hidden !important; }
#top.home #av-tab-section-1 .av-tab-section-icon { background: url(https://your-site.com/wp-content/uploads/2018/07/iko-1.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
#top.home #av-tab-section-1 .av-tab-section-icon:hover { background: url(https://your-site.com/wp-content/uploads/2018/05/globe.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    please adjust images to suit
    Please see screenshot in Private Content area.

    Best regards,
    Mike

    July 23, 2018 at 3:42 pm #988727
    smoothbob

    Hi

    it kind of worked…

    I added this code but all tabs are now showing the 1st image, I want to have 5 different images plus the rollover/selced state does not see to work

    thanks!

    #top.home #av-tab-section-1 .av-tab-section-icon:before { visibility: hidden !important; }
    #top.home #av-tab-section-1 .av-tab-section-icon { background: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
    #top.home #av-tab-section-1 .av-tab-section-icon:hover { http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    #top.home #av-tab-section-2 .av-tab-section-icon:before { visibility: hidden !important; }
    #top.home #av-tab-section-2 .av-tab-section-icon {http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/midicon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
    #top.home #av-tab-section-2 .av-tab-section-icon:hover { http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/midicon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    July 24, 2018 at 3:52 am #989009
    Mike

    Hi,
    Oh, I see, I added this new css to your Quick CSS, and I commented it for you to see which code is for which tab:

    /* Tab 1 */
#top.home #av-tab-section-1 a[data-av-tab-section-title="1"] .av-tab-section-icon:before { visibility: hidden !important; }
#top.home #av-tab-section-1 a[data-av-tab-section-title="1"] .av-tab-section-icon { background: url(https://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
#top.home #av-tab-section-1 a[data-av-tab-section-title="1"] .av-tab-section-icon:hover { background: url(https://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

/* Tab 2*/
#top.home #av-tab-section-1 a[data-av-tab-section-title="2"] .av-tab-section-icon:before { visibility: hidden !important; }
#top.home #av-tab-section-1 a[data-av-tab-section-title="2"] .av-tab-section-icon { background: url(https://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/midicon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
#top.home #av-tab-section-1 a[data-av-tab-section-title="2"] .av-tab-section-icon:hover { background: url(https://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/midicon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    This is for the first two tabs, so you just need to copy it 3 more times and change the image url and the number in:

    [data-av-tab-section-title="2"]

    to correspond to the tab.
    Please clear your browser cache and check the first two tabs.

    Best regards,
    Mike

    July 24, 2018 at 12:23 pm #989136
    smoothbob

    Hi
    that’s great thanks, but how do I change the active tab as well?

    thanks again

    July 24, 2018 at 4:50 pm #989252
    smoothbob

    also, how do I apply this code to other pages? I have an instance of these tabs on a different page but it does not find the css mods
    thanks!

    July 25, 2018 at 3:22 am #989461
    Mike

    Hi,
    What changes do you want for the active tab?
    To use this code for other pages, you will need to change the word “home” in the code to match your page id, such as “page-id-657” and as long as you only have one tab section on each page, the id “#av-tab-section-1” should stay the same.
    There are many plugins that will list your page & post id’s in your dashboard list. Reveal IDs is one.
    You can also use your browser’s inspector:
    2018-07-24_212050

    Best regards,
    Mike

    July 25, 2018 at 1:41 pm #989670
    smoothbob

    that’s great thanks, is there any way to codense this code so it covers both pages rather than having to repeat the whole block, as the code is identical? no big deal but might be tidier

    thanks again

    /* Tab 1 home*/
    #top.home #av-tab-section-1 a[data-av-tab-section-title=”1″] .av-tab-section-icon:before { visibility: hidden !important; }
    #top.home #av-tab-section-1 a[data-av-tab-section-title=”1″] .av-tab-section-icon { background: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
    #top.home #av-tab-section-1 a[data-av-tab-section-title=”1″] .av-tab-section-icon:hover { background: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    /* Tab 1 N/W*/
    #top.page-id-235 #av-tab-section-1 a[data-av-tab-section-title=”1″] .av-tab-section-icon:before { visibility: hidden !important; }
    #top.page-id-235 #av-tab-section-1 a[data-av-tab-section-title=”1″] .av-tab-section-icon { background: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }
    #top.page-id-235 #av-tab-section-1 a[data-av-tab-section-title=”1″] .av-tab-section-icon:hover { background: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    July 25, 2018 at 2:04 pm #989685
    smoothbob

    also, what is the active (selected) state as well please, I asked a couple of times :)

    thanks!

    July 26, 2018 at 2:29 am #990008
    Mike

    Hi,
    Condensing the code any further would have it work on every page, which could cause problems in the future if you decide to use tabs on a different page.
    the activate state class is:

    av-active-tab-title

    an example of it in use:

    #top.home.page #av-tab-section-1 a.av-active-tab-title[data-av-tab-section-title="1"] .av-tab-section-icon {

    I could advise better if I knew how you wish to style the active state.

    Best regards,
    Mike

    July 27, 2018 at 11:13 am #990634
    smoothbob

    Hi wanted the selected/active tab to use the same icon as the rollover

    I tried this code:

    #top.home.page #av-tab-section-1 a.av-active-tab-title[data-av-tab-section-title=”1″] .av-tab-section-icon {
    background: url(http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; }

    but it has now changed the background colour of that first tab and I don;t know why…

    I have removed that code but it still has the wrong background colour and the only way to get it right is to rollback the file…which is strange

    thanks!

    July 27, 2018 at 1:31 pm #990689
    Mike

    Hi,
    For the first tab, when active, this is the correct css:

    #top.home #av-tab-section-1 a.av-active-tab-title[data-av-tab-section-title="1"] .av-tab-section-icon { background: url(https://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/euricon_hover.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important;}

    I put it into place, Please clear your browser cache and check.
    As for the background color of the first tab, you had a space in the css which broke it, I fixed it, please check.

    Best regards,
    Mike

    July 27, 2018 at 1:48 pm #990701
    smoothbob

    great, ..all done!

    thanks for your help on this

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • The topic ‘Using pngs instead of fontello icons’ is closed to new replies.