Position of icons


I have just opened my account with oneall.

I would like my chosen share icons to appear at the top of a blog and be centred. What I have achieved is icons at the top let hand corner of the page and underneath the text of the blog which doesnt look right? Can I edit this? and also put spaces between the icons?


  • Hi Melanie,

    Are you using the WordPress plugin ?
    If yes, I've added custom id/class names on each icon container, so you can override the CSS by yours.

    I suppose you're using the "header postion", so you can use the class .oas_box_position_header to override the container position and buttons spacing.

    You can also use a shortcode like this :
    [oa_social_sharing_icons id="my_custom_id" size="btns_l"]

    It will generate this html code :
    <div class="oas_box oas_box_btns_m oas_box_my_custom_id" data-title="Hello world! – Test" data-url="http://www.wordpress001.loc/2016/01/18/hello-world/"> <span class="oas_btn oas_btn_facebook" title="Send to Facebook"> <span class="oas_btn_ico"></span> </span> <span class="oas_btn oas_btn_twitter" title="Send to Twitter"> <span class="oas_btn_ico"></span> </span> </div>

    So you can use the class .oas_box_my_custom_id to override the CSS.

    Best regards
  • Hi I am sorry I am confused by this. Yes i am using wordpress plugin. I do not understand the code above at all what do I put where?
    I have chosen the 3 social share buttins and then it asks me for Plugin position and I choose either blog footer or header haven't decided which yet and it always adds to the top left of every page too - which I dont want. Could you advise please?
  • Hi Melanie,

    Which position do you want for the icons ?
    Are you sure that the "plugin position" for header and footer are on "disabled" ?
    Do you have a test page where I could see the icons ?

    The code above:
    [oa_social_sharing_icons id="my_custom_id" size="btns_l"] is a shortcode that you can add anywhere you want via the admin page editor. It will generate icons at the position you set the code. In this case large buttons, and the icons container will have the css class "my_custom_id" so you could edit the css if you want to.

    Best regards
  • It is now doing something diffrent - still not what i want it to do! I have some screen shots can i get them to you? this is what the page looks like http://www.sacarmi.com/body-lived-experience/ I have screenshots to show you what i am selecting. I want the buttons vertically at the bottom of every blog post - not to the side horizontally. I also get this on my blog summary page which looks really odd http://www.sacarmi.com/blog/ I am not a developer and am not familiar with css instrictions you outline I'm afraid. Do you have any more beginner level instructions taht tell me where I find the admon page etc!
  • Hi Melanie,

    Is it possible to get an admin access to your website, so that I could try to fix it ?
    Maybe your theme has specificities that may interfere with the plugin.
    If yes, send me everything via private message and NOT in this thread.

    Here some instructions that could help you :
    So if I understand, you want your buttons at the end of each post and vertically. According to the link you sent me, I assume you want medium button.

    1) Go to the OneAll Social Sharing plugin options
    2) For "Blog footer" in plugin position section, select "disabled"
    3) For "After each post" in plugin position section, select "Medium Buttons"
    5) Click on "Save changes". Check if values are ok.
    4) Then go to "Appearance" -> "Editor", you could edit the stylesheet (CSS) of your theme
    5) Add at the end of it :
    .oas_box.oas_box_position_end_post { width: 30px; }
    The icons will be now vertically and not horizontally anymore.
    If you wanna use other button size, just change the value of width.
    Basic values to set the buttons vertically according to their sizes, that you could edit if you want to :
    small : 21px, medium : 29px, large : 37px

    Best regards
Sign In or Register to comment.