Toolbar icons not working properly?

Go down

Solved Toolbar icons not working properly?

Post by Mimóza on December 19th 2015, 12:43 pm

Hi... agian,
Geez, sorry for the flood of problems lately, but I'm such a noob. Toolbar icons not working properly? 1f631 
SO, I tried to change the toolbar icons, but as usually, I must have messed up something.
In the end, I changed so many things, they don't work and 2 icons can be seen for 1 button at the same time. Toolbar icons not working properly? 1f610 
Toolbar icons not working properly? Du

Codes I use:
JS:

Code:
$(function() {
  var share = {
  
    text : 'Megosztás',
 
    buttons : {
      /* DEFAULT SHARE BUTTONS */
      fb : {
        enable : true,
 innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Facebookon'
      },
    
      twitter : {
        enable : true,
innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Twitteren'
      },
    
      gp : {
        enable : true,
innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Google Pluson'
      },
    
      mail : {
        enable : true,
innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Elküldés E-mailben'
      },
    
      rss : {
        enable : true,
innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'View this forum\'s RSS feed'
      },
 
      /* START CUSTOM SHARE BUTTONS */
    
      /* extra share buttons */
      pinterest : {
        enable : true,
        innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Pinteresten',
      
        onclick : function(e) {
          var media = prompt('You\'re about to pin this page. Share an image ?');
        
          if (media == null) return false;
          else if (media == '') media = $('meta[property="og:image"]').attr('content') || '';
        
          window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + (media ? '&media=' + encodeURIComponent(media) : '') + '&description=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
    
      tumblr : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/tumblr11.png" />',
        title : 'Megosztás Tumblren',
      
        onclick : function(e) {
          window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(window.location.href), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
    
      reddit : {
        enable : true,
        innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Redditen',
      
        onclick : function(e) {
          window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
    
      /* misc buttons */
      print : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/60/73/print11.png" />',
        title : 'Nyomtatás',
      
        onclick : function(e) {
          window.print();
          e.preventDefault();
        }
      },
    
      copy_url : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/link10.png" />',
        title : 'Copy BBCode URL',
      
        onclick : function(e) {
          prompt('Copy the BBCode URL of this page ?', '[url=' + window.location.href + ']' + document.title + '[/url]');
          e.preventDefault();
        }
      },
    
      top : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/top10.png" />',
        title : 'Top of the page',
        href : '#top'
      },
    
      bottom : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/bottom11.png" />',
        title : 'Bottom of the page',
        href : '#bottom'
      }
      /* END CUSTOM SHARE BUTTONS*/
    }
  },
 
  newList = document.createElement('SPAN'),
  fa_share,
  fa_share_text,
  existingNode,
  newNode,
  i, k;
 
  $(function() {
    fa_share = document.getElementById('fa_share');
    fa_share_text = document.getElementById('fa_share_text');
    if (!fa_share) return;
  
    // apply new share text
    if (fa_share_text) fa_share_text.innerHTML = share.text + ' : ';
 
    // redefine share buttons
    for (i in share.buttons) {
      existingNode = document.getElementById('fa_' + i);
 
      // modify exisiting share buttons
      if (existingNode) {
        if (share.buttons[i].enable) {
          for (k in share.buttons[i]) if (k != 'enable') existingNode[k] = share.buttons[i][k];
          newList.appendChild(existingNode);
        }
        else existingNode.parentNode.removeChild(existingNode);
      }
    
      // create a new share button
      else if (share.buttons[i].enable) {
        newNode = document.createElement('A');
        newNode.id = 'fa_' + i;
      
        for (k in share.buttons[i]) if (k != 'enable') newNode[k] = share.buttons[i][k];
        if (!newNode.href) newNode.href = '#';
      
        newList.appendChild(newNode);
      }
 
    }
 
    fa_share.appendChild(newList);
  });
});



CSS:

Code:
#fa_pinterest {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_fb {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_reddit {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}



Any tips to make them work properly?
In addition, could a hover effect be added to them? http://ianlunn.github.io/Hover/ (Radial In - (#23799c))

Thanks in advance!  Toolbar icons not working properly? 1f601


Last edited by Mimóza on December 20th 2015, 4:10 pm; edited 1 time in total
Mimóza
Mimóza
Forumember

Female Posts : 611
Reputation : 258
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Rhino.Freak on December 19th 2015, 1:41 pm

Hey Very Happy
The problem of multiple picture was that you added image to default buttons again via JavaScript. That shouldn't be done since there is already image before.
So replace the JS by this
Js:
Code:
$(function() {
  var share = {
 
    text : 'Megosztás',
 
    buttons : {
      /* DEFAULT SHARE BUTTONS */
      fb : {
        enable : true,
        title : 'Megosztás Facebookon'
      },
   
      twitter : {
        enable : true,
        title : 'Megosztás Twitteren'
      },
   
      gp : {
        enable : true,
        title : 'Megosztás Google Pluson'
      },
   
      mail : {
        enable : true,
        title : 'Elküldés E-mailben'
      },
   
      rss : {
        enable : true,
        title : 'View this forum\'s RSS feed'
      },
 
      /* START CUSTOM SHARE BUTTONS */
   
      /* extra share buttons */
      pinterest : {
        enable : true,
        innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Pinteresten',
     
        onclick : function(e) {
          var media = prompt('You\'re about to pin this page. Share an image ?');
       
          if (media == null) return false;
          else if (media == '') media = $('meta[property="og:image"]').attr('content') || '';
       
          window.open('http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + (media ? '&media=' + encodeURIComponent(media) : '') + '&description=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
   
      tumblr : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/tumblr11.png" />',
        title : 'Megosztás Tumblren',
     
        onclick : function(e) {
          window.open('http://www.tumblr.com/share/link?url=' + encodeURIComponent(window.location.href), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
   
      reddit : {
        enable : true,
        innerHTML : '<img src="http://illiweb.com/fa/pbucket.gif" />',
        title : 'Megosztás Redditen',
     
        onclick : function(e) {
          window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '', 'menubar=no,status=no,scrollbars=no,width=800,height=600');
          e.preventDefault();
        }
      },
   
      /* misc buttons */
      print : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/60/73/print11.png" />',
        title : 'Nyomtatás',
     
        onclick : function(e) {
          window.print();
          e.preventDefault();
        }
      },
   
      copy_url : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/link10.png" />',
        title : 'Copy BBCode URL',
     
        onclick : function(e) {
          prompt('Copy the BBCode URL of this page ?', '[url=' + window.location.href + ']' + document.title + '[/url]');
          e.preventDefault();
        }
      },
   
      top : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/top10.png" />',
        title : 'Top of the page',
        href : '#top'
      },
   
      bottom : {
        enable : false,
        innerHTML : '<img src="http://i21.servimg.com/u/f21/18/21/41/30/bottom11.png" />',
        title : 'Bottom of the page',
        href : '#bottom'
      }
      /* END CUSTOM SHARE BUTTONS*/
    }
  },
 
  newList = document.createElement('SPAN'),
  fa_share,
  fa_share_text,
  existingNode,
  newNode,
  i, k;
 
  $(function() {
    fa_share = document.getElementById('fa_share');
    fa_share_text = document.getElementById('fa_share_text');
    if (!fa_share) return;
 
    // apply new share text
    if (fa_share_text) fa_share_text.innerHTML = share.text + ' : ';
 
    // redefine share buttons
    for (i in share.buttons) {
      existingNode = document.getElementById('fa_' + i);
 
      // modify exisiting share buttons
      if (existingNode) {
        if (share.buttons[i].enable) {
          for (k in share.buttons[i]) if (k != 'enable') existingNode[k] = share.buttons[i][k];
          newList.appendChild(existingNode);
        }
        else existingNode.parentNode.removeChild(existingNode);
      }
   
      // create a new share button
      else if (share.buttons[i].enable) {
        newNode = document.createElement('A');
        newNode.id = 'fa_' + i;
     
        for (k in share.buttons[i]) if (k != 'enable') newNode[k] = share.buttons[i][k];
        if (!newNode.href) newNode.href = '#';
     
        newList.appendChild(newNode);
      }
 
    }
 
    fa_share.appendChild(newList);
  });
});

And for the CSS, you need to use
Code:
!important
to override the default image.
So use this
css:
Code:
#fa_pinterest {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}
#fa_fb {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
}
#fa_reddit {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif');
}


Apply these codes and let me know if you need any help with positioning. Smile
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Mimóza on December 19th 2015, 3:29 pm

Thanks, but now apart from the Pinterest and Reddit icons all of them are gone. Toolbar icons not working properly? 1f601
Mimóza
Mimóza
Forumember

Female Posts : 611
Reputation : 258
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Rhino.Freak on December 20th 2015, 2:11 pm

Oops I forgot to reposition the background image XD

Add this in your CSS
Code:
#fa_fb {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://illiweb.com/fa/pbucket.gif')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Mimóza on December 20th 2015, 2:22 pm

Thank you! But something is still not okay, because the icons are not there. Smile
Mimóza
Mimóza
Forumember

Female Posts : 611
Reputation : 258
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Rhino.Freak on December 20th 2015, 2:27 pm

I have to say your forum's code are very messed. This rule is lying somewhere in your forum index that is over writing the css
Code:
#fa_twitter {
    background-position: -90px 0px;
}

I really suggest you to try and clean codes up.

But for now, you have to create a java script that will over write that rule, so go to
ACP > Modules > JavaScript Management > Create new
Tick in all pages
Code:
$(function() {
  $(document.body).append('<style>#fa_fb, #fa_twitter, #fa_gp, #fa_mail, #fa_rss {background-postition: 0px!important;}</style>');
});

this SHOULD fix it.
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Mimóza on December 20th 2015, 2:40 pm

Sorry for the troubles!!! Toolbar icons not working properly? 1f623 Ya, I'm having a hard time finding things in the codes too, and tried to remove the unnecessary parts, but seems like many remained. Toolbar icons not working properly? 1f610 However, the thing you mentioned is nowhere in the codes. At least I cannot find them. And bad news... the JS didn't fix the problem. Toolbar icons not working properly? 1f631
Mimóza
Mimóza
Forumember

Female Posts : 611
Reputation : 258
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Rhino.Freak on December 20th 2015, 2:43 pm

Replace the script by this
Code:
$(function() {
  $(document.body).append('<style>#fa_fb, #fa_twitter, #fa_gp, #fa_mail, #fa_rss {background-position: 0px!important;}</style>');
});

I misspelled 'position' as 'postition' Razz
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Mimóza on December 20th 2015, 2:49 pm

Toolbar icons not working properly? 323245330_Holy20Cow_answer_1_small 
It's working!! Thank you so much!!
Can I bother you with the second question?
In addition, could a hover effect be added to them? http://ianlunn.github.io/Hover/ (Radial In - (#23799c))

Or I had better be satisfied with the result and give up on the hover effect? Very Happy
Mimóza
Mimóza
Forumember

Female Posts : 611
Reputation : 258
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Rhino.Freak on December 20th 2015, 2:58 pm

So you want on hover it to become from pink to #23799c with radial in effect?
If so I think you need to make the background of the image you're using to transparent.
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Mimóza on December 20th 2015, 3:46 pm

Yup, I wanted that. I thought you can have an effect that overwrites the color? 
Nevermind, I changed my mind, and don't want the effect. It would be too much. Very Happy 

Thanks for your help and time Rhino!  Toolbar icons not working properly? 1f600Toolbar icons not working properly? 270c
Mimóza
Mimóza
Forumember

Female Posts : 611
Reputation : 258
Language : Hungarian, English
Location : Hungary

http://dianagyms.deviantart.com/gallery/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by Rhino.Freak on December 20th 2015, 5:56 pm

lol well whatever you wish XD
Glad to be of help Smile
Rhino.Freak
Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 104
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Toolbar icons not working properly?

Post by brandon_g on December 20th 2015, 8:09 pm

Thanks for the help Rhino!

Topic solved and archived ~ brandon_g

Happy holidays rendeer .


Toolbar icons not working properly? Brando10
Remember to mark your topic Toolbar icons not working properly? Solved15 when a solution is found.
brandon_g
brandon_g
Manager
Manager

Male Posts : 8277
Reputation : 759
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum