Need help? Check out our Support site, then


Styling sharing buttons (Suburbia theme)

  1. Hi,
    I have two questions that I would truly appreciate help with. Both questions relate to styling the 'Sharing' section:

    1. I would like to remove the line appearing at the top of the whole section of sharing buttons, but am not sure how ('.sharing' doesn't seem to work).

    2. I was looking to style the buttons differently than the default icons (at the bottom of each page), to just black-and-white ones. Is there a way to change the appearance of these without going into the Image Widgets and setting up separate links (which also adds a new section at the bottom)?

    Many thanks for any help or suggestions on this.

    The blog I need help with is contextualternate.com.

  2. 1. Add this:

    div.sharedaddy div.sd-block {
    border-top: 0 none;
    }

    2. The icons are background images. As an example, here's the FB icon:
    http://wordpress.com/wp-content/mu-plugins/post-flair/sharing/images/facebook.png
    I don't know of a way to make them B&W via CSS alone. If I'm right, then you'd have to copy the original images to your computer, edit them in an image editing application, then upload the new versions to your blog, copy the file URLs and use CSS editing to replace the original ones.

    If you do this, here's what they might look like:
    http://wpbtips.files.wordpress.com/2013/12/contextualternate_icons.png
    Are you sure you like this? And do you think it's user friendly?

  3. Hi, thanks a lot! Just what I needed.

    I am thinking of replacing the whole set of share-buttons with another, simpler set, to keep it quite understated. I'd like to try and see if it works. I have the images for these. In that case, how can I try replacing the original ones with the new ones using CSS?

    On a related topic, how can I insert a one-off image using CSS on the home page? (I am thinking of something that functions as a sticker saying 'new' or something like that.)

    Thanks as always, your help is indispensable.

  4. You're welcome.

    1.
    First you need to upload each image to your blog via Media > Add New, click Edit once the image is uploaded, and copy its URL from the "File URL" field of the Save module.
    Next you need to add this for each image, if the images are 16x16:

    SELECTOR HERE {
    background-image: url("IMAGE URL HERE");
    }

    If the images are larger, you need to add this:

    SELECTOR HERE {
    background-image: url("IMAGE URL HERE");
    background-size: 16px 16px;
    }

    To stick to my FB example, the selector for that icon is:
    li.share-facebook a.sd-button > span
    Do you know how to find the selector for each icon?

    2.
    Your second question isn't clear to me. Where exactly should that one-off image show?

  5. O great, that works fine for me and the selectors seem to be okay too! Thanks a bunch.

    For the second question: I was thinking of a small image, say, on top of one of the sticky post images, like a stamp or sticker. This could be a small header-image-sized circle/triangle in the corner that says 'work in progress' or 'this week' etc, like a sticker. Something like the steady-beta sticker in this link: Book cover archive. Is it possible to insert and position something like that?

    As always, much obliged for your help.

  6. I can think of at least three ways to do this.
    Should the small image link to the post or not? If it does, you'll have to change the URL each time you change the sticky. If it doesn't, the area of the featured image that is covered by the small image won't be clickable.

  7. Thanks for your reply. The image doesn't need to link to the post, just function as a marker. The second scenario seems fine to me, could try and see if it works.

  8. You can add the image via an image widget in the footer widget area, and then we reposition the image and hide the area. Or we can add it as a background image to the tagline area then reposition that area. The second solution seems more economical to me. If you agree, I need the image URL!

  9. Okay, here's the image URL
    Image URL

    What I want is for this to go on top of the sticky-post image, left top corner, for instance. Can that work?

    Thanks.

  10. Whoa - you said small and that's 1837px long!
    I can make it work, but it's better to use an image that's actually small (i.e. display it in real size instead of scaling it down via CSS). The width of the sticky featured image is 350px, so create a new version of the image, around 100-150px.

  11. O wow, didn't realize. How about any of these:
    Image 1
    Image 2

  12. The second one isn't transparent.

    Here's how you do it if you want to display the image in real size:

    .desc {
    background: url("http://contextualternate.files.wordpress.com/2013/12/this.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    left: 228px;
    min-height: 104px;
    padding: 0;
    position: absolute;
    top: 88px;
    width: 313px;
    z-index: 111;
    }

    But do you really want it that large? (My suggestion was 100-150px.)

  13. Thank you! Much appreciated, this is very helpful!

    I've tried something now but it is also appearing on all posts and pages. How can that be fixed?

    Many thanks again!

  14. Oh sorry, I completely forgot that this has to show on the homepage only... Turn the selector to:
    .home .desc

    Also, always set the width and min-height values to those of the image, to minimize the area that becomes unclickable.

  15. Brilliant! That does it! Thank you.

    Lastly, does this mean that there can only be a single image placed thus or more can be inserted using CSS alone?

    Thanks a lot!

  16. You're welcome.

    You mean display two or more than two images at the same time?

  17. That's right, two or more.

  18. Then you can't use CSS alone. For a single image, I took advantage of the tagline container, because you don't display the tagline. You don't have several equally "free" containers, so you need a different method. You can add non-linking custom menu items to your menu then use CSS for bg images, restyling and repositioning, or you can use my other suggestion (less work, I think): add all the images to the footer widget area via Image widgets or via one Text widget then use CSS to reposition them.

  19. Thank you! That's great to know.
    Will try and experiment. Thanks so much for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic