The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Toolbar icons not working properly?

View previous topic View next topic 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.  
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.  


Codes I use:
JS:

Code:
$(function() {
  var share = {
  
    text : 'Megosztás',
 
    buttons : {
      /* DEFAULT SHARE BUTTONS */
      fb : {
        enable : true,
 innerHTML : '<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/fbi_1.png" />',
        title : 'Megosztás Facebookon'
      },
    
      twitter : {
        enable : true,
innerHTML : '<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/twiti_1.png" />',
        title : 'Megosztás Twitteren'
      },
    
      gp : {
        enable : true,
innerHTML : '<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/gpu_1.png" />',
        title : 'Megosztás Google Pluson'
      },
    
      mail : {
        enable : true,
innerHTML : '<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/emil_1.png" />',
        title : 'Elküldés E-mailben'
      },
    
      rss : {
        enable : true,
innerHTML : '<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/rss_1.png" />',
        title : 'View this forum\'s RSS feed'
      },
 
      /* START CUSTOM SHARE BUTTONS */
    
      /* extra share buttons */
      pinterest : {
        enable : true,
        innerHTML : '<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/pinte_1.png" />',
        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://i1370.photobucket.com/albums/ag257/AppleDrink/redi_1.png" />',
        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://i1370.photobucket.com/albums/ag257/AppleDrink/pinte_1.png');
}
#fa_fb {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/fbi_1.png');
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/twiti_1.png');
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/gpu_1.png');
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/emil_1.png');
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/rss_1.png');
}
#fa_reddit {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/redi_1.png');
}



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!  


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

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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://i1370.photobucket.com/albums/ag257/AppleDrink/pinte_1.png" />',
        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://i1370.photobucket.com/albums/ag257/AppleDrink/redi_1.png" />',
        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://i1370.photobucket.com/albums/ag257/AppleDrink/pinte_1.png');
}
#fa_fb {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/fbi_1.png')!important;
  background-repeat: no-repeat;
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/twiti_1.png')!important;
  background-repeat: no-repeat;
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/gpu_1.png')!important;
  background-repeat: no-repeat;
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/emil_1.png')!important;
  background-repeat: no-repeat;
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/rss_1.png')!important;
  background-repeat: no-repeat;
}
#fa_reddit {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/redi_1.png');
}


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

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
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. 

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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://i1370.photobucket.com/albums/ag257/AppleDrink/fbi_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_twitter {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/twiti_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_gp {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/gpu_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_mail {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/emil_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}
#fa_rss {
  width:25px;
  height:25px;
  background-image:url('http://i1370.photobucket.com/albums/ag257/AppleDrink/rss_1.png')!important;
  background-repeat: no-repeat;
  background-postition: 0px!important;
}

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
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
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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
Active Poster

Male Posts : 1243
Reputation : 105
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!!!  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.  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. 

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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
Active Poster

Male Posts : 1243
Reputation : 105
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

 
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
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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
Active Poster

Male Posts : 1243
Reputation : 105
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!  

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

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
Active Poster

Male Posts : 1243
Reputation : 105
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 .


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5144
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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