css social media

• 

  moshekahol · Member · Oct 7, 2016 at 11:19 am

  • Copy link
  • Add topic to favorites

  Hi. when commenting (bortom here: https://kahol.co.il/2016/09/29/ds/#more-2154)
  you have an option to log in to social media,
  now what I want is to add googleplus and also make the social media icons bigger.

  I managed to target the area but dont know how to change the size of the icons…
  here is what I have so far for wordpress icon:

  /* comment area social */
  a#postas-wordpress {
  width: 100px !important;
  height: 50px !important;
  display: none !important;
  }

  here is what target all the icons together:
  #comments #respond #comment-form-identity #comment-form-nascar a, #comments #respond .comment-form-avatar a

  Summary: Need some help with making the icons large and adding googleplus :) thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  innisfreehomestead · Member · Oct 7, 2016 at 3:31 pm

  • Copy link

  Hello there!

  You won’t be able to add the googleplus login unless it’s already a function of the theme (guessing it isn’t just an option as the other ones show up automatically?)

  Here’s the code that should help with the sizing. The images for the icons are rather small so I’d suggest replacing the background url link with larger versions. Editing the background-size property will change the size of the image while editing the height and width of the last bit of code will change the area around the background image (if the background size is set larger the image will be cut off).

  #postas-wordpress {
  	background: url(../../post-flair/sharing/images/icon-wordpress.png) center center no-repeat;
  	background-size: 24px;
  }
  
  #postas-facebook {
  	background: url(../../post-flair/sharing/images/icon-facebook.png) center center no-repeat;
  	background-size: 24px;
  }
  
  #postas-twitter {
  	background: url(../../post-flair/sharing/images/icon-twitter.png) center center no-repeat;
  	background-size: 24px;
  }
  
  #respond #comment-form-nascar ul li a {
  	height: 30px;
  	width: 30px;
  }

  Let me know if that doesn’t work,
  Sage

• 

  moshekahol · Member · Oct 9, 2016 at 5:33 pm

  • Copy link

  Hi sage it worked :) As you can see Ive got some issue with it… the facebook icon won’t align with the text above it… can you teach me how to fix it?
  I triedf margin and padding but it didnt work – just created spaces but not made the logo and text above it same level…

  thanks Sage!

• 

  moshekahol · Member · Oct 9, 2016 at 5:41 pm

  • Copy link

  sage also help me to enlarge also the socail icons here at the top of posts?for example here:
  https://kahol.co.il/2016/09/29/ds/#more-2154

  really apreciated! thanks Sage!

• 

  innisfreehomestead · Member · Oct 10, 2016 at 3:00 pm

  • Copy link

  Hello there,

  I’m not seeing the social media icons above the comment form anymore, is this still an issue?

  To edit the new share buttons sizes would take extensive coding, how exactly would you like them to look?

  Thanks,
  Sage

• 

  moshekahol · Member · Oct 10, 2016 at 3:31 pm

  • Copy link

  Hi Sage thanks for replying…
  here is the current problems I would be happy if you can help me solve :)

  1. I would like them to look bigger in size
  2. also Sge if you can see I added a social media side bar with css but I understood I cant use it because it need javascript for the share link…
  if I put it menually the link is not changing from post to post… is there any way to solve this? I really want that side bar…

• 

  moshekahol · Member · Oct 10, 2016 at 3:40 pm

  • Copy link

  about 1 : I would be happy if they will look like circle icons but it doesnt seem that it can be also counting of shares next to the icon… Hope you got some insights about 1+2

  thanks Sage!

• 

  innisfreehomestead · Member · Oct 10, 2016 at 7:02 pm

  • Copy link

  Hey there,

  1. As I mentioned, editing the size of those buttons would take quite a bit of code, it isn’t just a simple line and there are other things that need to be taken into consideration too like the dropdown. I’m terribly sorry, but since it is a different task than the one at the start of your thread would you mind creating a new one just for that? I would find it a bit difficult to do that level of customization without being able to test it myself to see what works etc.

  2. There isn’t a whole lot of functionality that can be accomplished without access to the theme’s code, this bit included. As mentioned before you might actually find a WordPress.org site better to your liking as then you’d have full control over everything.

  Hope that helps,
  Sage