Styling sharing buttons (Suburbia theme)

  • Author
    Posts
  • #1561051

    errorsinc
    Member

    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.

    #1561194

    justpi
    Member

    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?

    #1561219

    errorsinc
    Member

    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.

    #1561229

    justpi
    Member

    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 16×16:

    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?

    #1561241

    errorsinc
    Member

    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.

    #1561268

    justpi
    Member

    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.

    #1561269

    errorsinc
    Member

    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.

    #1561272

    justpi
    Member

    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!

    #1561275

    errorsinc
    Member

    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.

    #1561282

    justpi
    Member

    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.

    #1561288

    errorsinc
    Member

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

    #1561296

    justpi
    Member

    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.)

    #1561309

    errorsinc
    Member

    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!

    #1561310

    justpi
    Member

    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.

    #1561311

    errorsinc
    Member

    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!

    #1561312

    justpi
    Member

    You’re welcome.

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

    #1561313

    errorsinc
    Member

    That’s right, two or more.

    #1561314

    justpi
    Member

    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.

    #1561315

    errorsinc
    Member

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

The topic ‘Styling sharing buttons (Suburbia theme)’ is closed to new replies.