WordPress.org

Ready to get started?Download WordPress

Forums

Shareaholic | share buttons & related posts
[resolved] Custom Header? (10 posts)

  1. SheerHeartAttack
    Member
    Posted 1 year ago #

    On the previous version I was using, I was able to use a custom header by replacing one of the images with my own. But now the images are hosted offsite so I can't do that. Is there any way I can use my own image again?

    http://wordpress.org/plugins/shareaholic/

  2. Shareaholic
    Member
    Plugin Author

    Posted 1 year ago #

  3. SheerHeartAttack
    Member
    Posted 1 year ago #

    Excellent, thank you! I'm trying to change the margin of the group of buttons, but I can't seem to get it to work. I thought

    .shareaholic-share-buttons-container ul.shareaholic-share-buttons {
    	margin: 0 0 0 30px !important;
    }

    would do it, but I can't get the margin to be anything other than the default. Any ideas?

  4. Celeste - Shareaholic
    Member
    Posted 1 year ago #

    If you use Chrome, you can sample-edit the CSS for any page by utilizing the Inspect Element tool (right-click anywhere on a page to access this through the shortcut menu and quickly jump to the HTML that corresponds with the element you clicked to pull up the menu).

    This is a great way to directly see how different styles will affect the layout of your page (or the elements contained) before you make any actual changes to your files. I think this will help you with tinkering to get the exact look you wish to achieve. :) Good luck!

  5. SheerHeartAttack
    Member
    Posted 1 year ago #

    Yes, that's what I did to find the selector I'm trying to change. I'm pretty sure it's not working because the Shareaholic CSS (which is remotely hosted, so I can't edit it) has it marked as !important, so my own style is unable to override it.

  6. Celeste - Shareaholic
    Member
    Posted 1 year ago #

    Try targeting .shareaholic-canvas instead... This will apply the style to all of the apps. If you'd like to only target a specific one, use [data-app-id="xxx"] instead of .shareaholic-canvas where the x's are replaced with the app's unique ID number, which you can find with Inspect Element or through the Edit panel for the app on the Available Apps settings screen.

  7. SheerHeartAttack
    Member
    Posted 1 year ago #

    I want the entire row of buttons, but NOT the entire "widget", to be indented slightly. You can see in this example post how it looks right now — if I indent the whole thing (.shareaholic-canvas) it indents the "Share This Post" header as well, which is not helpful. The problem is that the arrow on the header is covered up by the buttons, so I just need to move them over slightly. It doesn't seem practical to have to apply a style to each button individually when there's a wrapper around the row, I'm just not given the ability to edit it.

  8. Celeste - Shareaholic
    Member
    Posted 1 year ago #

    The easiest thing would be to modify the image so that nothing needs to be moved, but to do what you require in CSS, just shift the heading to the left and then shift the canvas the same amount to the right.

    .shareaholic-share-buttons-container .shareaholic-share-buttons-heading {margin-left:-30px;}
    [data-app="share_buttons"] {margin-left:30px;}

    Or target specific apps if you only need this style applied to certain share bars.

  9. SheerHeartAttack
    Member
    Posted 1 year ago #

    OK, thanks — don't know why I didn't think of that. I did it with

    div.shareaholic-canvas {margin-left: 20px;}
    
    .shareaholic-share-buttons-container .shareaholic-share-buttons-heading {margin-left:-20px;}
  10. Celeste - Shareaholic
    Member
    Posted 1 year ago #

    Awesome! Looks great! :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.