Jump to content

Archived

This topic is now archived and is closed to further replies.

Frederic

Need some help with custom css

Recommended Posts

Frederic    3
Frederic
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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.org/plugins/share-this/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

--> 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;
}

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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! 

Share this post


Link to post
Share on other sites

  • Similar Content

    • hibbsy78
      By hibbsy78+
      The share bar has updated and no longer fits nicely on a single line in mobile view. Any chance this can be corrected?
      http://www.johnhibbs.me/

    • danoah
      By danoah
      Hello, I'm trying to add the sharebar below the meta data on posts. Problem is, I can't figure out how to center it.

      Example: http://www.blogmug.com/2012/10/03/massive-identity-crisis/

      Thanks for your help!
×