Jump to content


Photo
- - - - -

Need some help with custom css

share bar

  • Please log in to reply
4 replies to this topic

#1 Frederic

Frederic

    Super Member

  • Members

  • 192 posts
  • Country: Country Flag

Posted 11 April 2014 - 04:59 AM

Hi there,
 
I have been trying to fix a small issue related to custom css but didn't find the answer. Then asked some developers and same problem - they work with different systems, do not know much dev tools and could not help ... so, turning to you in the hope you can give me a hand!
 
I want to adjust the share buttons in share bar and have two situations on the same page:
 
 
The first one
 
Current situation is here
 
What I want here
 
Page ID here
 
It must have to do with 
class="twitter-share-button twitter-tweet-button twitter-count-horizontal" that we need to change to vertical but apart from that, it is all i can do ... :(
 
Second oneon the same page, again related to the share bar;
 
Screencast here and desired result here
 
Is there a way of reducing padding/margins around the share buttons so they fit within the space defined by the line below them?

 

 

Really hope you can help!

 

Thanks



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17015 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 April 2014 - 10:43 AM

HI,

 

1. This isn't anything CSS can help you with, as the buttons you currently have and the ones you would like to have are different. If you do not like how they display, then you will want to use a plugin, there are literally tons of them on the Wordpress plugin repo.

 

2. The image you provide which is what you want to achieve, isn't right, it is actually cutting off the one of the counters so you can't see it correctly. So I am not sure why you would want to use that ?

 

If you do not like how the ShareBar functions, I would recommend using an alternative, you could try this one (untested) https://wordpress.or...ins/share-this/



#3 Frederic

Frederic

    Super Member

  • Members

  • 192 posts
  • Country: Country Flag

Posted 12 April 2014 - 05:09 AM

Hi there, thanks for your reply

 

I do like very much how pl Sharebar functions and would really prefer not to rely on extra plugins when there is already a great section in DMS. I had some bad experiences with shared plugins consistently wiping off the custom css.

 

What I want to reach is to adjust the way the share buttons are positioned which means:

 

--> positioning the counters on 'vertical' rather than 'horizontal' for this one - I saw the code in dev tool but do not know how to formulate it for the custom css file 

 

--> aligning right and reducing the space between the share buttons so they fit better for this one - and yes, doing that without cutting off the counters of course.

 

Really hope you can give me a hand on that - it has been a real headache so far



#4 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 12 April 2014 - 12:58 PM

--> positioning the counters on 'vertical' rather than 'horizontal' for this one - I saw the code in dev tool but do not know how to formulate it for the custom css file:

 

Use a widgetized area and add to your sidebar (custom made with sidebar manager light) with your added shortcodes: 

[pinterest img=url(optional)] <br>

[like_button url=http://url-to-like.com] <br>
[googleplus]<br>
[linkedin]<br>
[twitter_button]<br>
[twitter_button type="follow"] etc
 

--> aligning right and reducing the space between the share buttons so they fit better for this one - and yes, doing that without cutting off the counters of course.

As above but with shortcodes as: [pinterest img=url(optional)] [like_button url=http://url-to-like.com] [googleplus] [linkedin] [twitter_button][twitter_button type="follow"]
 
You will need to use your chrome developer tools to adjust the "spacing" as each of those buttons has a class width to allow for additional followers. Ie, if only 6, would need a smaller amount space than if you had 90.3k ie:
 
.fb-like {
margin-right: 0px;
}
etc
 
!important For the google+1 and Twitter, it is important to use the !important, otherwise your changes made from Chrome dev inspection will not take effect:
 
  • iframe#twitter-widget-1 {
      width: 85px !important;
    }
  • #___plusone_1 {
      width: 58px !important;
    }
 
Align Right
 
Identify the widget id and add something like this to the wp-admin > Pagelines > DMS Fallbacks > LESS:
 
#list_otw-sidebar-3 {
  text-align: right;
}


#5 Frederic

Frederic

    Super Member

  • Members

  • 192 posts
  • Country: Country Flag

Posted 18 April 2014 - 04:46 AM

Many thanks for that @GetMeWebDesign and apologies for such late reply - too much happening over here! :-)

 

I will try and let you know when it works - again many thanks! 







Also tagged with one or more of these keywords: share bar